963 lines
33 KiB
Vue
963 lines
33 KiB
Vue
<template>
|
|
<div class="divBox">
|
|
<el-card class="box-card">
|
|
<div style="display: flex;align-items: center;">
|
|
<div>
|
|
<el-select v-model="tableFrom.merId" style="width: 200px;" @change="merChange" filterable remote
|
|
reserve-keyword placeholder="选择维修店" :loading="loading" clearable :remote-method="remoteMethod">
|
|
<el-option v-for="(item, index) in merchantList" :key="index" :label="item.name" :value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div style="margin-left: 12px;">
|
|
<el-radio-group v-model="tableFrom.dateLimit" size="small" @change="selectChange(tableFrom.dateLimit)">
|
|
<el-radio-button v-for="(itemn, indexn) in fromList.fromTxt" :key="indexn" :label="itemn.val">{{
|
|
itemn.text
|
|
}}</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
<div style="margin-left: 12px;">
|
|
<el-date-picker v-model="time1" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
|
|
:default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
|
|
@change="timeChange">
|
|
</el-date-picker>
|
|
</div>
|
|
</div>
|
|
<!-- 四 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ frequency.currentData }}元</div>
|
|
<div class="title">总台次</div>
|
|
<div class="percentage">
|
|
<div :class="[frequency.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[frequency.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ frequency.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[frequency.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[frequency.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ frequency.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ money.currentData }}元</div>
|
|
<div class="title">维保产值</div>
|
|
<div class="percentage">
|
|
<div :class="[money.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[money.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']" style="font-weight: 700;"></i>
|
|
{{ money.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[money.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[money.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ money.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ accessory.currentData }}元</div>
|
|
<div class="title">维保成本</div>
|
|
<div class="percentage">
|
|
<div :class="[accessory.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[accessory.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ accessory.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[accessory.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[accessory.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ accessory.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ profit.currentData }}元</div>
|
|
<div class="title">维保利润</div>
|
|
<div class="percentage">
|
|
<div :class="[profit.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[profit.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']" style="font-weight: 700;"></i>
|
|
{{ profit.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[profit.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[profit.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ profit.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 四 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="6">
|
|
<AccessoryEcharts :id="'pie1'" ref="pie1" :title="'进店台次分车型占比'" :pieData="pieData1"></AccessoryEcharts>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<AccessoryEcharts :id="'pie2'" ref="pie2" :title="'进店台次分所属公司占比'" :pieData="pieData2"></AccessoryEcharts>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<AccessoryEcharts :id="'pie3'" ref="pie3" :title="'维保产值按车型占比'" :pieData="pieData3"></AccessoryEcharts>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<AccessoryEcharts :id="'pie4'" ref="pie4" :title="'维保产值按所属公司占比'" :pieData="pieData4"></AccessoryEcharts>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 三 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ average.currentData }}元</div>
|
|
<div class="title flex space-between">
|
|
<div>维保单车产值</div>
|
|
<div>平均单车</div>
|
|
</div>
|
|
<div class="percentage">
|
|
<div :class="[average.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[average.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ average.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[average.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[average.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ average.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ averageModelData.currentData }}元</div>
|
|
<div class="title flex space-between">
|
|
<div>维保单车产值</div>
|
|
<el-select v-model="modelName" placeholder="按照车型分" @change="changeAverageModelFn">
|
|
<el-option v-for="item in averageModel" :key="item.id" :label="item.name" :value="item.name">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="percentage">
|
|
<div :class="[averageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[averageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ averageModelData.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[averageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[averageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ averageModelData.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ averageCompanyData.currentData }}元</div>
|
|
<div class="title flex space-between">
|
|
<div>维保单车产值</div>
|
|
<el-select v-model="companyName" placeholder="按照所属公司分" @change="changeAverageCompanyFn">
|
|
<el-option v-for="item in averageCompany" :key="item.id" :label="item.name" :value="item.name">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="percentage">
|
|
<div :class="[averageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[averageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ averageCompanyData.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[averageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ averageCompanyData.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 二 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<ConsumeEcharts :id="'pie5'" ref="topOne" :title="'维保产值TOP5车型'" :barData="topOne"></ConsumeEcharts>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<ConsumeEcharts :id="'pie6'" ref="topTwo" :title="'维保产值TOP5公司'" :barData="topTwo"></ConsumeEcharts>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 二 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<AccessoryEcharts :id="'pie7'" ref="pie5" :title="'维保成本按车型占比'" :pieData="pieData5"></AccessoryEcharts>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<AccessoryEcharts :id="'pie8'" ref="pie6" :title="'维保成本按所属公司占比'" :pieData="pieData6"></AccessoryEcharts>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 三 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ costAverage.currentData }}元</div>
|
|
<div class="title flex space-between">
|
|
<div>维保单车成本</div>
|
|
<div>平均单车</div>
|
|
</div>
|
|
<div class="percentage">
|
|
<div :class="[costAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[costAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ costAverage.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[costAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[costAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ costAverage.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ costAverageModelData.currentData }}元</div>
|
|
<div class="title flex space-between">
|
|
<div>维保单车成本</div>
|
|
<el-select v-model="costModelName" placeholder="按照车型分" @change="costModelFn">
|
|
<el-option v-for="item in costAverageModel" :key="item.id" :label="item.name" :value="item.name">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="percentage">
|
|
<div :class="[costAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[costAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ costAverageModelData.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[costAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ costAverageModelData.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ costAverageCompanyData.currentData }}元</div>
|
|
<div class="title flex space-between">
|
|
<div>维保单车成本</div>
|
|
<el-select v-model="costCompanyName" placeholder="按照所属公司分" @change="costCompanyFn">
|
|
<el-option v-for="item in costAverageCompany" :key="item.id" :label="item.name" :value="item.name">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="percentage">
|
|
<div :class="[costAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[costAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ costAverageCompanyData.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[costAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ costAverageCompanyData.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 二 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<ConsumeEcharts :id="'pie9'" ref="barOne" :title="'维保成本TOP10'" :barData="barOne"></ConsumeEcharts>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<ConsumeEcharts :id="'pie10'" ref="barTwo" :title="'维保成本配件使用数量TOP10'" :barData="barTwo"></ConsumeEcharts>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 二 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<AccessoryEcharts :id="'pie11'" ref="pie7" :title="'维保利润按车型占比'" :pieData="pieData7"></AccessoryEcharts>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<AccessoryEcharts :id="'pie12'" ref="pie8" :title="'维保利润按所属公司占比'" :pieData="pieData8"></AccessoryEcharts>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 三 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ profitAverage.currentData }}元</div>
|
|
<div class="title flex space-between">
|
|
<div>维保单车利润</div>
|
|
<div>平均单车</div>
|
|
</div>
|
|
<div class="percentage">
|
|
<div :class="[profitAverage.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[profitAverage.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ profitAverage.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[profitAverage.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[profitAverage.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ profitAverage.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ profitAverageModelData.currentData }}元</div>
|
|
<div class="title flex space-between">
|
|
<div>维保单车利润</div>
|
|
<el-select v-model="profitModelName" placeholder="按照车型分" @change="profitModelFn">
|
|
<el-option v-for="item in profitAverageModel" :key="item.id" :label="item.name" :value="item.name">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="percentage">
|
|
<div :class="[profitAverageModelData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[profitAverageModelData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ profitAverageModelData.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[profitAverageModelData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ profitAverageModelData.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<div class="grid-content bg-purple">
|
|
<div class="price"> ￥{{ profitAverageCompanyData.currentData }}元</div>
|
|
<div class="title flex space-between">
|
|
<div>维保单车利润</div>
|
|
<el-select v-model="profitCompanyName" placeholder="按照所属公司分" @change="profitCompanyFn">
|
|
<el-option v-for="item in profitAverageCompany" :key="item.id" :label="item.name" :value="item.name">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="percentage">
|
|
<div :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[profitAverageCompanyData.yearOnYear >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ profitAverageCompanyData.yearOnYear }}%
|
|
</p>
|
|
同比
|
|
</div>
|
|
<div :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'percentage-s' : 'percentage-j']">
|
|
<p>
|
|
<i :class="[profitAverageCompanyData.linkRelativeRatio >= 0 ? 'el-icon-top' : 'el-icon-bottom']"
|
|
style="font-weight: 700;"></i>
|
|
{{ profitAverageCompanyData.linkRelativeRatio }}%
|
|
</p>
|
|
环比
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 二 -->
|
|
<el-row :gutter="20">
|
|
<el-col :span="12">
|
|
<ConsumeEcharts :id="'pie13'" ref="profitOne" :title="'维保利润TOP5车型'" :barData="profitOne"></ConsumeEcharts>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<ConsumeEcharts :id="'pie14'" ref="profitTwo" :title="'维保利润TOP5公司'" :barData="profitTwo"></ConsumeEcharts>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { merchantListApi } from "@/api/merchant"
|
|
import { maintenanceAnalysisLattice, maintenanceAnalysisModelRatio, maintenanceAnalysisCompany, maintenanceAnalysisYieldModel, maintenanceAnalysisYieldCompany, yieldModelandcompany, analysisAvgLattice, costModelandcompany, analysisCostLattice, analysisProfitLattice, modelandcompanyHistogram, profitModelandcompany, profitHistogram } from "@/api/statistics.js"
|
|
import AccessoryEcharts from '../components/accessoryEcharts';
|
|
import ConsumeEcharts from '../components/consumeEcharts';
|
|
export default {
|
|
name: 'Dashboard',
|
|
components: { AccessoryEcharts, ConsumeEcharts },
|
|
data() {
|
|
return {
|
|
//维修店列表
|
|
merchantList: [],
|
|
loading: false,
|
|
fromList: this.$constants.fromList,
|
|
time1: [],
|
|
tableFrom: {
|
|
page: 1,
|
|
dateLimit: '',
|
|
type: 1
|
|
},
|
|
//进店总台次
|
|
frequency: {},
|
|
//维保产值
|
|
money: {},
|
|
//维保成本
|
|
accessory: {},
|
|
//维保利润
|
|
profit: {},
|
|
//饼图1
|
|
pieData1: [],
|
|
//饼图2
|
|
pieData2: [],
|
|
//饼图3
|
|
pieData3: [],
|
|
//饼图4
|
|
pieData4: [],
|
|
//饼图5
|
|
pieData5: [],
|
|
//饼图6
|
|
pieData6: [],
|
|
//饼图7
|
|
pieData7: [],
|
|
//饼图8
|
|
pieData8: [],
|
|
//z柱图1
|
|
topOne: {
|
|
labels: ['一', '二', '三', '四'],
|
|
values: [10, 20, 30, 40]
|
|
},
|
|
topTwo: {
|
|
labels: ['一', '二', '三', '四'],
|
|
values: [10, 20, 30, 40]
|
|
},
|
|
//维保成本top10
|
|
barOne: {
|
|
labels: ['一', '二', '三', '四'],
|
|
values: [10, 20, 30, 40]
|
|
},
|
|
barTwo: {
|
|
labels: ['一', '二', '三', '四'],
|
|
values: [10, 20, 30, 40]
|
|
},
|
|
//维保利润柱状图top5
|
|
profitOne: {
|
|
labels: ['一', '二', '三', '四'],
|
|
values: [10, 20, 30, 40]
|
|
},
|
|
profitTwo: {
|
|
labels: ['一', '二', '三', '四'],
|
|
values: [10, 20, 30, 40]
|
|
},
|
|
//第二栏选择
|
|
//维保单车产值
|
|
average: {},
|
|
//车型
|
|
averageModel: [],
|
|
averageModelData: {},
|
|
modelName: '',
|
|
//所属公司
|
|
averageCompany: [],
|
|
averageCompanyData: {},
|
|
companyName: '',
|
|
//维保成本格子图 //////////////////////////////
|
|
costAverage: {},
|
|
//所属公司
|
|
costAverageCompany: [],
|
|
costAverageCompanyData: {},
|
|
costCompanyName: '',
|
|
//车型
|
|
costAverageModel: [],
|
|
costAverageModelData: {},
|
|
costModelName: '',
|
|
//维保利润格子图
|
|
profitAverage: {},
|
|
//所属公司
|
|
profitAverageCompany: [],
|
|
profitAverageCompanyData: {},
|
|
profitCompanyName: '',
|
|
//车型
|
|
profitAverageModel: [],
|
|
profitAverageModelData: {},
|
|
profitModelName: '',
|
|
};
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
created() {
|
|
this.remoteMethod()
|
|
},
|
|
methods: {
|
|
// 初始化
|
|
init() {
|
|
this.maintenanceAnalysisLatticeFn()
|
|
this.maintenanceAnalysisModelRatioFn()
|
|
this.maintenanceAnalysisCompanyFn()
|
|
this.maintenanceAnalysisYieldModelFn()
|
|
this.maintenanceAnalysisYieldCompanyFn()
|
|
this.yieldModelandcompanyFn()
|
|
//二栏格子
|
|
this.analysisAvgLatticeFn()
|
|
//成本饼图
|
|
this.costModelandcompanyFn()
|
|
//三栏格子图
|
|
this.analysisCostLatticeFn()
|
|
this.modelandcompanyHistogramFn()
|
|
//维保成本饼图
|
|
this.profitModelandcompanyFn()
|
|
//四栏格子图
|
|
this.analysisProfitLatticeFn()
|
|
//维保利润柱状图
|
|
this.profitHistogramFn()
|
|
},
|
|
//年月日
|
|
selectChange(e) {
|
|
// console.log(e);
|
|
this.tableFrom.dateLimit = e;
|
|
this.timeVal = [];
|
|
this.init()
|
|
},
|
|
//远程搜索
|
|
remoteMethod(query) {
|
|
this.loading = true;
|
|
merchantListApi({
|
|
keywords: query,
|
|
page: 1,
|
|
limit: 1000,
|
|
}).then(res => {
|
|
this.loading = false
|
|
this.merchantList = res.list
|
|
this.tableFrom.merId = this.merchantList[0].id
|
|
this.init()
|
|
})
|
|
},
|
|
//选择确认
|
|
merChange(e) {
|
|
// console.log(e);
|
|
this.tableFrom.merId = e
|
|
this.init()
|
|
},
|
|
//时间选择监听
|
|
timeChange(e) {
|
|
// console.log(e);
|
|
if (e) {
|
|
this.tableFrom.dateLimit = e.join(',')
|
|
} else {
|
|
this.tableFrom.dateLimit = ''
|
|
}
|
|
this.init()
|
|
},
|
|
//顶部四个格子
|
|
maintenanceAnalysisLatticeFn() {
|
|
maintenanceAnalysisLattice(this.tableFrom).then(res => {
|
|
//进店总台次
|
|
if (res.frequency) {
|
|
this.frequency = res.frequency
|
|
}
|
|
//维保产值
|
|
if (res.money) {
|
|
this.money = res.money
|
|
}
|
|
//维保成本
|
|
if (res.accessory) {
|
|
this.accessory = res.accessory
|
|
}
|
|
//维保利润
|
|
if (res.profit) {
|
|
this.profit = res.profit
|
|
}
|
|
})
|
|
},
|
|
//第二栏三个格子
|
|
analysisAvgLatticeFn() {
|
|
analysisAvgLattice(this.tableFrom).then(res => {
|
|
if (res.average) {
|
|
this.average = res.average
|
|
}
|
|
if (res.averageCompany.length) {
|
|
this.averageCompany = res.averageCompany
|
|
this.averageCompanyData = this.averageCompany[0]
|
|
this.companyName = this.averageCompany[0].name
|
|
}
|
|
if (res.averageModel.length) {
|
|
this.averageModel = res.averageModel
|
|
this.averageModelData = this.averageModel[0]
|
|
this.modelName = this.averageModel[0].name
|
|
}
|
|
})
|
|
},
|
|
//选择车型(产值)
|
|
changeAverageModelFn(e) {
|
|
this.averageModel.forEach(item => {
|
|
if (item.name == e) {
|
|
this.averageModelData = item
|
|
}
|
|
})
|
|
},
|
|
//选择所属公司
|
|
changeAverageCompanyFn(e) {
|
|
// console.log(e);
|
|
this.averageCompany.forEach(item => {
|
|
if (item.name == e) {
|
|
this.averageCompanyData = item
|
|
}
|
|
})
|
|
},
|
|
//进店台次分车型占比
|
|
maintenanceAnalysisModelRatioFn() {
|
|
maintenanceAnalysisModelRatio(this.tableFrom).then(res => {
|
|
if (res.length) {
|
|
this.pieData1 = res
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs.pie1.inits()
|
|
}, 200);
|
|
})
|
|
},
|
|
//进店台次分所属公司占比
|
|
maintenanceAnalysisCompanyFn() {
|
|
maintenanceAnalysisCompany(this.tableFrom).then(res => {
|
|
if (res.length) {
|
|
this.pieData2 = res
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs.pie2.inits()
|
|
}, 200);
|
|
|
|
})
|
|
},
|
|
//维保产值按车型占比
|
|
maintenanceAnalysisYieldModelFn() {
|
|
maintenanceAnalysisYieldModel(this.tableFrom).then(res => {
|
|
if (res.length) {
|
|
this.pieData3 = res
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs.pie3.inits()
|
|
}, 200);
|
|
|
|
})
|
|
},
|
|
//维保产值按所属公司占比
|
|
maintenanceAnalysisYieldCompanyFn() {
|
|
maintenanceAnalysisYieldCompany(this.tableFrom).then(res => {
|
|
if (res.length) {
|
|
this.pieData4 = res
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs.pie4.inits()
|
|
}, 200);
|
|
|
|
})
|
|
},
|
|
//top5车型,公司
|
|
yieldModelandcompanyFn() {
|
|
yieldModelandcompany(this.tableFrom).then(res => {
|
|
console.log('1111111111', res);
|
|
if (res.topOne) {
|
|
this.topOne = res.topOne
|
|
this.topTwo = res.topTwo
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs.topOne.inits()
|
|
this.$refs.topTwo.inits()
|
|
}, 200);
|
|
})
|
|
},
|
|
// 维保成本占比车型/所属公司饼图
|
|
costModelandcompanyFn() {
|
|
costModelandcompany(this.tableFrom).then(res => {
|
|
if (res.companyPie) {
|
|
this.pieData6 = res.companyPie
|
|
}
|
|
if (res.modelPie) {
|
|
this.pieData5 = res.modelPie
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs.pie5.inits()
|
|
this.$refs.pie6.inits()
|
|
}, 200);
|
|
})
|
|
},
|
|
//第三栏格子图 维保成本
|
|
analysisCostLatticeFn() {
|
|
analysisCostLattice(this.tableFrom).then(res => {
|
|
if (res.average) {
|
|
this.costAverage = res.average
|
|
}
|
|
if (res.averageCompany.length) {
|
|
// console.log(1, true);
|
|
this.costAverageCompany = res.averageCompany
|
|
this.costAverageCompanyData = this.costAverageCompany[0]
|
|
this.costCompanyName = this.costAverageCompany[0].name
|
|
}
|
|
if (res.averageModel.length) {
|
|
// console.log(true);
|
|
this.costAverageModel = res.averageModel
|
|
this.costAverageModelData = this.costAverageModel[0]
|
|
this.costModelName = this.costAverageModel[0].name
|
|
}
|
|
})
|
|
},
|
|
//选择车型(成本)
|
|
costModelFn(e) {
|
|
this.costAverageModel.forEach(item => {
|
|
if (item.name == e) {
|
|
this.costAverageModelData = item
|
|
}
|
|
})
|
|
},
|
|
//选择所属公司(成本)
|
|
costCompanyFn(e) {
|
|
this.costAverageCompany.forEach(item => {
|
|
if (item.name == e) {
|
|
this.costAverageCompanyData = item
|
|
}
|
|
})
|
|
},
|
|
//维保成本top10和维保使用配件数量top10公司柱状图
|
|
modelandcompanyHistogramFn() {
|
|
modelandcompanyHistogram(this.tableFrom).then(res => {
|
|
console.log('top10', res);
|
|
if (res.topOne) {
|
|
this.barOne = res.topOne
|
|
this.barTwo = res.topTwo
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs.barOne.inits()
|
|
this.$refs.barTwo.inits()
|
|
}, 200);
|
|
})
|
|
},
|
|
//维保成本饼图
|
|
profitModelandcompanyFn() {
|
|
profitModelandcompany(this.tableFrom).then(res => {
|
|
// console.log('饼图', res);
|
|
if (res.companyPie) {
|
|
this.pieData8 = res.companyPie
|
|
}
|
|
if (res.modelPie) {
|
|
this.pieData7 = res.modelPie
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs.pie7.inits()
|
|
this.$refs.pie8.inits()
|
|
}, 200);
|
|
})
|
|
},
|
|
|
|
//第四栏格子图 维保利润
|
|
analysisProfitLatticeFn() {
|
|
analysisProfitLattice(this.tableFrom).then(res => {
|
|
// console.log('撒结婚登记卡死', res);
|
|
this.profitAverage = res.average
|
|
|
|
if (res.company.length) {
|
|
this.profitAverageCompany = res.company
|
|
this.profitAverageCompanyData = this.profitAverageCompany[0]
|
|
this.profitCompanyName = this.profitAverageCompany[0].name
|
|
}
|
|
if (res.model.length) {
|
|
this.profitAverageModel = res.model
|
|
this.profitAverageModelData = this.profitAverageModel[0]
|
|
this.profitModelName = this.profitAverageModel[0].name
|
|
}
|
|
})
|
|
},
|
|
//选择车型(利润)
|
|
profitModelFn(e) {
|
|
this.profitAverageModel.forEach(item => {
|
|
if (item.name == e) {
|
|
this.profitAverageModelData = item
|
|
}
|
|
})
|
|
},
|
|
//选择所属公司(利润)
|
|
profitCompanyFn(e) {
|
|
this.profitAverageCompany.forEach(item => {
|
|
if (item.name == e) {
|
|
this.profitAverageCompanyData = item
|
|
}
|
|
})
|
|
},
|
|
//维保利润(柱状图)
|
|
profitHistogramFn() {
|
|
profitHistogram(this.tableFrom).then(res => {
|
|
console.log(res);
|
|
if (res.topOne) {
|
|
this.profitOne = res.topOne
|
|
this.profitTwo = res.topTwo
|
|
}
|
|
setTimeout(() => {
|
|
this.$refs.profitOne.inits()
|
|
this.$refs.profitTwo.inits()
|
|
}, 200);
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.price {
|
|
font-size: 26px;
|
|
color: rgb(102, 154, 177);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.title {
|
|
font-size: 18px;
|
|
color: #333333;
|
|
margin-top: 14px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.percentage {
|
|
background-color: #f5f5f5;
|
|
padding: 12px 8px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
|
|
.percentage-s {
|
|
p {
|
|
color: green;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
}
|
|
|
|
.percentage-j {
|
|
p {
|
|
color: red;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.el-row {
|
|
margin-bottom: 20px;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.el-col {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.bg-purple-dark {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.bg-purple {
|
|
background: #f5f5f5;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.bg-purple-light {
|
|
background: #ffffff;
|
|
}
|
|
|
|
.grid-content {
|
|
border-radius: 4px;
|
|
min-height: 36px;
|
|
padding: 24px 18px 8px 24px;
|
|
border-radius: 12px 12px 12px 12px;
|
|
}
|
|
|
|
.row-bg {
|
|
padding: 10px 0;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.space-between {
|
|
justify-content: space-between
|
|
}
|
|
</style>
|