|
|
@@ -2,7 +2,7 @@
|
|
|
* @Author: liuzhenlin 461480418@qq.ocm
|
|
|
* @Date: 2023-01-12 11:57:48
|
|
|
* @LastEditors: liuzhenlin
|
|
|
- * @LastEditTime: 2023-03-06 16:46:52
|
|
|
+ * @LastEditTime: 2023-03-10 16:59:38
|
|
|
* @Description: file content
|
|
|
* @FilePath: \oms\pages\home\index.vue
|
|
|
-->
|
|
|
@@ -149,7 +149,29 @@
|
|
|
<view class="data-container">
|
|
|
<h4>个人报表</h4>
|
|
|
<view class="echarts" v-for="item in echarts" :key="item.id">
|
|
|
- <h4>{{ item.report_name }}</h4>
|
|
|
+ <view class="flex">
|
|
|
+ <h4>{{ item.report_name }}</h4>
|
|
|
+ <view class="center" style="padding-left: 30rpx" v-if="item.id == 20006">
|
|
|
+ <u-button
|
|
|
+ :text="saleVal"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="
|
|
|
+ showSaleType = true
|
|
|
+ hideKeyboard()
|
|
|
+ "></u-button>
|
|
|
+ </view>
|
|
|
+ <view class="center" style="padding-left: 30rpx" v-if="item.id == 20007">
|
|
|
+ <u-button
|
|
|
+ :text="collectionVal"
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ @click="
|
|
|
+ showCollectionType = true
|
|
|
+ hideKeyboard()
|
|
|
+ "></u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
<view class="chart">
|
|
|
<l-echart :ref="item.id + ''" @finished="init(item.id)"></l-echart>
|
|
|
</view>
|
|
|
@@ -205,6 +227,18 @@
|
|
|
</view> -->
|
|
|
</view>
|
|
|
<view class="check" @click="toCheckIn">卡</view>
|
|
|
+ <u-action-sheet
|
|
|
+ :show="showSaleType"
|
|
|
+ :actions="quarter"
|
|
|
+ title="请选择季度"
|
|
|
+ @close="showSaleType = false"
|
|
|
+ @select="selectSaleVal"></u-action-sheet>
|
|
|
+ <u-action-sheet
|
|
|
+ :show="showCollectionType"
|
|
|
+ :actions="quarter"
|
|
|
+ title="请选择季度"
|
|
|
+ @close="showCollectionType = false"
|
|
|
+ @select="selectCollectionVal"></u-action-sheet>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -218,6 +252,34 @@
|
|
|
name: 'omsIndex',
|
|
|
data() {
|
|
|
return {
|
|
|
+ showSaleType: false,
|
|
|
+ showCollectionType: false,
|
|
|
+ saleVal: '全年',
|
|
|
+ collectionVal: '全年',
|
|
|
+ saleType: 0,
|
|
|
+ collectionType: 0,
|
|
|
+ quarter: [
|
|
|
+ {
|
|
|
+ name: '一季度',
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '二季度',
|
|
|
+ type: 2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '三季度',
|
|
|
+ type: 3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '四季度',
|
|
|
+ type: 4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '全年',
|
|
|
+ type: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
bannerList: [
|
|
|
require('@/static/images/swiper/banner1.png'),
|
|
|
require('@/static/images/swiper/banner2.png'),
|
|
|
@@ -270,6 +332,16 @@
|
|
|
LEchart,
|
|
|
},
|
|
|
methods: {
|
|
|
+ selectSaleVal(e) {
|
|
|
+ this.saleVal = e.name
|
|
|
+ this.saleType = e.type
|
|
|
+ this.init(20006)
|
|
|
+ },
|
|
|
+ selectCollectionVal(e) {
|
|
|
+ this.collectionVal = e.name
|
|
|
+ this.collectionType = e.type
|
|
|
+ this.init(20007)
|
|
|
+ },
|
|
|
async getReport(type) {
|
|
|
this.tabDate = type
|
|
|
let params = { viewInterval: this.tabDate }
|
|
|
@@ -335,17 +407,59 @@
|
|
|
},
|
|
|
async init(id) {
|
|
|
// console.log(id, 'id')
|
|
|
- const [err, res] = await to(
|
|
|
- indexApi.getHomeDataReportData({
|
|
|
+ let params = {}
|
|
|
+ if (id == 20006) {
|
|
|
+ params = {
|
|
|
+ Params: { year: new Date().getFullYear(), quarter: this.saleType },
|
|
|
id,
|
|
|
- })
|
|
|
- )
|
|
|
+ }
|
|
|
+ } else if (id == 20007) {
|
|
|
+ params = {
|
|
|
+ Params: { year: new Date().getFullYear(), quarter: this.collectionType },
|
|
|
+ id,
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ params = {
|
|
|
+ Params: {},
|
|
|
+ id,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const [err, res] = await to(indexApi.getHomeDataReportData(params))
|
|
|
+ console.log(res)
|
|
|
if (err) return
|
|
|
+ let yAxis =
|
|
|
+ id == 20006 || id == 20007
|
|
|
+ ? [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '金额(元)',
|
|
|
+ alignTicks: true,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ : [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: '金额(元)',
|
|
|
+ alignTicks: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ name: res.data.id == 20000 ? '签约完成率(%)' : '回款率(%)',
|
|
|
+ min: 0,
|
|
|
+ max: 100,
|
|
|
+ alignTicks: true,
|
|
|
+ interval: 20,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value} %',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ]
|
|
|
const option = {
|
|
|
grid: {
|
|
|
- bottom: 10,
|
|
|
- top: 20,
|
|
|
+ bottom: 30,
|
|
|
+ top: 40,
|
|
|
right: 10,
|
|
|
+ left: 10,
|
|
|
containLabel: true,
|
|
|
},
|
|
|
tooltip: {
|
|
|
@@ -354,29 +468,23 @@
|
|
|
xAxis: [
|
|
|
{
|
|
|
type: 'category',
|
|
|
- data: res.data.data.xData,
|
|
|
+ data: res.data.data ? res.data.data.xData : [],
|
|
|
axisTick: {
|
|
|
alignWithLabel: true,
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- name: '(元)',
|
|
|
- nameLocation: 'start',
|
|
|
- },
|
|
|
- ],
|
|
|
+ yAxis,
|
|
|
series: [
|
|
|
{
|
|
|
name: '销售指标',
|
|
|
type: 'bar',
|
|
|
- data: res.data.data.yDataTarget,
|
|
|
+ data: res.data.data ? res.data.data.yDataTarget : [],
|
|
|
},
|
|
|
{
|
|
|
name: '销售额度',
|
|
|
type: 'bar',
|
|
|
- data: res.data.data.yDataReal,
|
|
|
+ data: res.data.data ? res.data.data.yDataReal : [],
|
|
|
},
|
|
|
],
|
|
|
}
|
|
|
@@ -610,7 +718,7 @@
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
.echarts {
|
|
|
- height: 480rpx;
|
|
|
+ height: 500rpx;
|
|
|
box-shadow: 0 6rpx 19rpx 2rpx rgba(0, 45, 132, 0.15);
|
|
|
border-radius: 31rpx 31rpx 31rpx 31rpx;
|
|
|
|
|
|
@@ -619,7 +727,7 @@
|
|
|
}
|
|
|
|
|
|
.chart {
|
|
|
- height: 400rpx;
|
|
|
+ height: 420rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|