|
- <template>
- <view class="box">
- <view class="boxtittab">
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 4 }" @click="tabtimetap(4)">近七天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 5 }" @click="tabtimetap(5)">近15天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6)">近30天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3)">自定义</view>
- </view>
- </view>
-
- <view class="timepick">
- <view class="timepicktime" @click="chiocStaff(0)">
- <view>{{staff1.label}} <image class="Underimg" src="../../../static/images/down.png" mode=""></image></view>
- </view>
- <view class="timepickpick" v-if="staff1.value">
- <view @click="checkboxChange()" style="width: 40rpx;height:40rpx;border: 1rpx solid #E0E0E0;">
- <image v-if="timepickpickisshow" style="width: 40rpx;height: 40rpx;"
- src="../../../static/images/xuanzhong.png" mode=""></image>
- </view>
- <view style="font-size:26rpx;text-indent: 12rpx;">对比</view>
- </view>
- <view class="timepicktime" v-if="timepickpickisshow" @click="chiocStaff(1)">
- <view>{{staff2.label}}<image class="Underimg" src="../../../static/images/down.png" mode=""></image></view>
- </view>
- </view>
-
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">接待量</view>
- <view class="title3" style="flex: 1;">
- <view class="title3-box" @click="tabtimetap1(0)">
- <view style="height: 42rpx;" :class="{ activecltab: eharTab.active1 == 0 }">排名</view>
- </view>
- <view class="title3-box" @click="tabtimetap1(1)">
- <view style="height: 42rpx;" :class="{ activecltab: eharTab.active1 == 1 }">趋势</view>
- </view>
- </view>
- </view>
- <view class="hejisan">
- <view class="sanbox1">
- <view class="text1-2">{{newTeam1||0}}</view>
- <view class="text1-1">{{!staff1.value?'团队总数':staff1.label}}</view>
- </view>
- <view class="sanbox1" >
- <view class="text1-2">{{newAvg1||0}}</view>
- <view class="text1-1">{{!staff2.value?'团队平均':staff2.label}}</view>
- </view>
- </view>
- <view class="" v-if="eharTab.active1 == 1 ">
- <view class="danwei">接待量(次)</view>
- <view class="uchaserbox">
- <template v-if="lineOptsect1">
- <qiun-data-charts type="line" :opts="lineOpts1" :chartData="lineOptsect1" background="none" :ontouch="true"
- canvasId="wangxiaohuaerlingeryilingwuyibbb" :canvas2d="true" />
- </template>
- </view>
- </view>
- <view class="jindu" v-if="eharTab.active1 == 0 ">
- <view class="jindu-box" v-for="(item,index) in newlisttabinfo1" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
- <view class="progress-cus">
- <view class="color" :style="'width:'+ getPercent(item.zxl,1) + '%'" ></view>
- </view>
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
- </view>
- </view>
- </view>
- </view>
-
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">接待时长</view>
- <view class="title3" style="flex: 1;">
- <view class="title3-box" @click="tabtimetap2(0)">
- <view style="height: 42rpx;" :class="{ activecltab: eharTab.active2 == 0 }">排名</view>
- </view>
- <view class="title3-box" @click="tabtimetap2(1)">
- <view style="height: 42rpx;" :class="{ activecltab: eharTab.active2 == 1 }">趋势</view>
- </view>
- <!-- <view class="title3-box">
- <view style="height: 42rpx;" :class="{ activecltab: activeTotal2 == 2 }">表格</view>
- </view> -->
- </view>
- </view>
- <view class="hejisan">
- <view class="sanbox1" >
- <view class="text1-2">{{newTeam2||0}}</view>
- <view class="text1-1">{{!staff1.value?'团队总数':staff1.label}}</view>
- </view>
- <view class="sanbox1" >
- <view class="text1-2">{{newAvg2||0}}</view>
- <view class="text1-1">{{!staff2.value?'团队平均':staff2.label}}</view>
- </view>
- </view>
- <view v-if="eharTab.active2 == 1 ">
- <view class="danwei">录音时长(min)</view>
- <view class="uchaserbox">
- <template v-if="lineOptsect2">
- <qiun-data-charts type="line" :opts="lineOpts1" :chartData="lineOptsect2" background="none" :ontouch="true"
- canvasId="wangxiaohuaerlingeryilingwuyibb" :canvas2d="true" />
- </template>
- </view>
- </view>
- <view class="jindu" v-if=" eharTab.active2 == 0 ">
- <view class="jindu-box" v-for="(item,index) in newlisttabinfo2" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
- <view class="progress-cus">
- <view class="color" :style="'width:'+ getPercent(item.zxl,2) + '%'" ></view>
- </view>
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}</view>
- </view>
- </view>
- </view>
- </view>
-
- <view class="single">
- <view class="title">
- <view class="title1" style="flex: 1;">销讲执行率</view>
- <view class="title3" style="flex: 1;">
- <view class="title3-box" @click="tabtimetap3(0)">
- <view style="height: 42rpx;" :class="{ activecltab: eharTab.active3 == 0 }">排名</view>
- </view>
- <view class="title3-box" @click="tabtimetap3(1)">
- <view style="height: 42rpx;" :class="{ activecltab: eharTab.active3 == 1 }">趋势</view>
- </view>
- </view>
- </view>
- <view v-if="eharTab.active3 == 1 ">
- <view class="danwei">执行率(%)</view>
- <view class="uchaserbox">
- <template v-if="lineOptsect3">
- <qiun-data-charts type="line" :chartData="lineOptsect3" background="none" :ontouch="true"
- canvasId="wangxiaohuaerlingeryilingwuyib" :canvas2d="true" :opts="lineOpts" />
- </template>
- </view>
- </view>
- <view class="jindu" v-if="eharTab.active3 == 0 ">
- <view class="jindu-box" v-for="(item,index) in newlisttabinfo3" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
- <view class="progress-cus">
- <view class="color" :style="'width:'+ getPercent1(item.zxl) + '%'" ></view>
- </view>
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
- </view>
- </view>
- </view>
- </view>
-
- <view class="single">
- <view class="title" style="padding-right: 30rpx;">
- <view class="title1" style="flex: 1;">销讲能力</view>
- <view class="title2" style="flex: 1;justify-content: flex-end;" @click="goTeam">
- <view class="title2-che">团队
- <image class="righttochoose" src="../../../static/images/down.png" mode=""></image>
- </view>
- </view>
- </view>
-
- <view class="uchaserbox" v-if="chartData1">
- <qiun-data-charts :opts="opts" type="radar" :chartData="chartData1" :canvas2d="true"
- canvasId="wangxiaohuaerlingeryilingwuyib88" background="none" />
- </view>
- </view>
- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
- <!-- 选择部门的选择框 -->
- <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback" :default-value='selindex'>
- </u-select>
- <u-select v-model="staffShow1" :list="staffList1" @confirm="staffSelectCallback" :default-value='selindex'>
- </u-select>
-
- <!-- 加载组件 -->
- <u-loadings v-model="LOADING"></u-loadings>
-
- </view>
- </template>
-
- <script>
- var app = getApp();
- var util = require("../../../utils/util.js");
- var config = require("../../../config");
- export default {
- data() {
- return {
- activeTotal: 4,
- eharTab: {
- active1: 0,
- active2: 0,
- active3: 0,
- active4: 0,
- },
- deptids: '',
- bocindex: 0,
- timepickpickisshow: false,
- totalTimeShow: false,
- // 项目id
- houseId: '',
- staffList: [],
- staffList1: [],
- staffShow: false,
- staffShow1: false,
- staff1: {
- value: '',
- label: ''
- },
- staff2: {
- value: '',
- label: '平均'
- },
- lastStartDate: '',
- lastEndDate: '',
- selindex: [0],
- choseStaffFlag: false,
- lineOptsect1: {
- "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
- "series": [{
- "name": "成交量1",
- "data": [35, 8, 25, 37, 4, 20]
- },
- {
- "name": "成交量2",
- "data": [40, 18, 45, 44, 10, 60]
- }
- ]
- },
- lineOptsect2: {
- "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
- "series": [{
- "name": "成交量1",
- "data": [35, 8, 25, 37, 4, 20]
- },
- {
- "name": "成交量2",
- "data": [40, 18, 45, 44, 10, 60]
- }
- ]
- },
- lineOptsect3: {
- "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
- "series": [{
- "name": "成交量1",
- "data": [35, 8, 25, 37, 4, 20]
- },
- {
- "name": "成交量2",
- "data": [40, 18, 45, 44, 10, 60]
- }
- ]
- },
- lineOptsect4: {
- "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
- "series": [{
- "name": "成交量1",
- "data": [35, 8, 25, 37, 4, 20]
- },
- {
- "name": "成交量2",
- "data": [40, 18, 45, 44, 10, 60]
- }
- ]
- },
- newlisttabinfo1: [{
- name: '接待量',
- zxl: '10'
- },
- {
- name: '平均执行率',
- zxl: '50'
- },
- {
- name: '接待客户',
- zxl: '80'
- },
- ],
- newlisttabinfo2: [{
- name: '接待量',
- zxl: '10'
- },
- {
- name: '平均执行率',
- zxl: '50'
- },
- {
- name: '接待客户',
- zxl: '80'
- },
- ],
- newlisttabinfo3: [{
- name: '接待量',
- zxl: '10'
- },
- {
- name: '平均执行率',
- zxl: '50'
- },
- {
- name: '接待客户',
- zxl: '80'
- },
- ],
- newlisttabinfo4: [{
- name: '接待量',
- zxl: '10'
- },
- {
- name: '平均执行率',
- zxl: '50'
- },
- {
- name: '接待客户',
- zxl: '80'
- },
- ],
- newTeam1: '',
- newAvg1: '',
- newTeam2: '',
- newAvg2: '',
- newTeam3: '',
- newAvg3: '',
- newTeam4: '',
- newAvg4: '',
- chartData1: {
- "categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
- "series": [{
- "name": "成交量",
- "data": [90, 110, 165, 195, 187, 172]
- }]
- },
- chartData2: {
- "categories": ["维度1", "维度2", "维度3", "维度4", "维度5", "维度6"],
- "series": [{
- "name": "成交量",
- "data": [90, 110, 165, 195, 187, 172]
- }]
- },
- opts: {
- fontSize: 10,
- extra: {
- radar: {
- max: 100
- }
- }
- },
- lineOpts: {
- xAxis: {
- disableGrid: true,
- scrollShow: true,
- itemCount: 8
- },
- yAxis: {
- data: [
- {
- max: 100,
- min: 0,
- }
- ]
- }
- },
- lineOpts1: {
- xAxis: {
- disableGrid: true,
- scrollShow: true,
- itemCount: 8
- }
- },
- };
- },
- onLoad() {
- this.LOADING = true
- let that = this
- uni.$on('update', function(data) {
- // console.log(data)
- that.deptids = data.arr.join(',')
- // 获取销奖能力
- that.getPowerList()
- })
- // 获取项目id
- this.houseId = uni.getStorageSync('buildingID').id;
- // this.buildingname = uni.getStorageSync('buildingID').name;
- // 请求接口获取所有置业顾问员工的列表
- this.getSectionList()
-
- },
- onPullDownRefresh(){
- this.getSectionList()
- setTimeout(function () {
- uni.stopPullDownRefresh();
- }, 1000);
- },
- methods: {
- getPercent1(num){
- console.log(num)
- return num||0
- },
- getPercent(num,type) {
- if(this.newlisttabinfo1&&this.newlisttabinfo1.length&&type==1){
- console.log(this.newlisttabinfo1)
- let index0 = this.newlisttabinfo1[0]
- let percent = num/(index0.zxl) * 100
- return percent.toFixed(2)
- }else if(this.newlisttabinfo2&&this.newlisttabinfo2.length&&type==2){
- let index0 = this.newlisttabinfo2[0]
- let percent = num/(index0.zxl) * 100
- return percent.toFixed(2)
- }else if(this.newlisttabinfo3&&this.newlisttabinfo3.length&&type==3){
- let index0 = this.newlisttabinfo3[0]
- let percent = num/(index0.zxl) * 100
- return percent.toFixed(2)
- }else{
- return 0
- }
- },
- //是否对比
- checkboxChange() {
- this.timepickpickisshow = !this.timepickpickisshow;
- this.staff2.label = '平均'
- this.staff2.value = ''
- this.lineOptsect1 = null
- this.lineOptsect2 = null
- this.lineOptsect3 = null
- this.chartData1 = null
- // 团队对比接待量
- this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
- // 团队对比接待时长
- this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
- /* 销奖执行率 */
- this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
- // 获取销奖能力
- this.getPowerList()
- },
- // 获取部门列表
- getSectionList() {
- this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
- houseId: this.houseId
- })
- .then(res => {
- this.staffList = []
- this.staffList1 = []
- res.map(item => {
- let obj = {}
- obj.value = item.deptId
- obj.label = item.deptName
- this.staffList.push(obj)
- })
- this.staffList1 = [...this.staffList]
- this.staffList.unshift({
- value: '',
- label: '全部'
- })
- this.staffList1.unshift({
- value: '',
- label: '平均'
- })
- this.staff1 = this.staffList[0]
- // 团队对比接待量
- this.receptionCountList(0, 1, '/cusLvStatistics/teamAnalysisReception')
- // 团队对比接待时长
- this.receptionCountList(0, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
- /* 销奖执行率 */
- this.receptionCountList(0, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
- // 获取销奖能力
- this.getPowerList()
-
- })
- },
- // 点击部门对比
- chiocStaff(idx) {
- if (idx == 0) {
- // 当选择了第一个的时候
- this.choseStaffFlag = false
- this.staffShow = true
- } else {
- this.choseStaffFlag = true
- this.staffShow1 = true
- }
-
- },
- //时间切换
- tabtimetap(index) {
- this.activeTotal = index;
- if (index == 3) {
- this.totalTimeShow = true;
- } else {
- this.lastEndDate = ''
- this.lastStartDate = ''
- // 获取数据
- // 团队对比接待量
- this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
- // 团队对比接待时长
- this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
- /* 销奖执行率 */
- this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
- // 获取销奖能力
- this.getPowerList()
- }
- },
- // 接待量
- tabtimetap1(idx) {
- this.eharTab.active1 = idx
- // 调用方法
- this.receptionCountList(idx, 1, '/cusLvStatistics/teamAnalysisReception')
- },
- // 接待时长
- tabtimetap2(idx) {
- this.eharTab.active2 = idx
- // 调用方法
- this.receptionCountList(idx, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
- },
- tabtimetap3(idx) {
- this.eharTab.active3 = idx
- // 调用方法
- this.receptionCountList(idx, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
- },
- tabtimetap4(idx) {
- this.eharTab.active4 = idx
- // 调用方法
- // this.getRecordList()
- },
- //自定义时间
- totalTimeChange(e) {
- console.log(e.startDate, e.endDate)
- this.activeTotal = 3;
- this.lastEndDate = e.endDate
- this.lastStartDate = e.startDate
- // 获取数据
- // 团队对比接待量
- this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
- // 团队对比接待时长
- this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
- /* 销奖执行率 */
- this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
- // 获取销奖能力
- this.getPowerList()
- },
- //指标执行率分析tab
- tapspagek2(index) {
- this.bocindex = index;
- },
- //集团对比
- Groupcontrast() {
- uni.navigateTo({
- url: '/pages/center/Piabodata/Groupcontrast'
- });
- },
- // 去选择团队
- goTeam() {
- uni.navigateTo({
- url: `/pages/center/Piabodata/selectTeam?ids=${this.deptids}`
- })
- },
- staffSelectCallback(e) {
- if (this.choseStaffFlag) {
- // 第二个客户
- // console.log(e,'第二个')
- this.staff2 = e[0]
- } else {
- // 第一个客户
- // console.log(e,'第一个')
- // 当选择全部时
- if (!e.value) {
- this.timepickpickisshow = false
- this.staff2.label = '平均'
- this.staff2.value = ''
- }
- this.staff1 = e[0]
- }
- if (this.staff1.label == this.staff2.label) {
- uni.showToast({
- title: '请勿选择重复',
- icon: 'none'
- })
- this.staff2.label = '请选择'
- // this.staff2.label='平均'
- // this.staff2.value=''
- return
- } else {
- // 获取数据
- // 团队对比接待量
- this.receptionCountList(this.eharTab.active1, 1, '/cusLvStatistics/teamAnalysisReception')
- // 团队对比接待时长
- this.receptionCountList(this.eharTab.active2, 2, '/cusLvStatistics/teamAnalysisReceptionTime')
- /* 销奖执行率 */
- this.receptionCountList(this.eharTab.active3, 3, '/cusLvStatistics/teamAnalysisExecutionRate')
- // 获取销奖能力
- this.getPowerList()
- }
- },
-
- // 公共方法
- receptionCountList(idx, index, url) {
- this.$u.post(url, {
- deptIds: [this.staff1.value, this.staff2.value].filter(item => item).join(','),
- showRank: idx,
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal + '',
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate
- })
- .then(res => {
- console.log('我再此')
- let result = res.result
- this['newTeam' + index] = res.avg[0]
- this['newAvg' + index] = res.avg[1]
- if (idx == 0) {
- console.log(idx, index, url, '打卡记录撒橘红颗粒大健康1 ')
- // 当选择的是牌名时
- // 处理数据
- // 先处理牌名数据,需要进行判断全部还是单个
- // 当为全部时
- this['newlisttabinfo' + index] = []
- let arr = []
- // 当选择全部时
- if (!this.staff1.value && !this.staff2.value) {
- // console.log(1)
- result[0].map(item => {
- let obj = {}
- obj.name = item.deptName
- obj.zxl = item.data
- arr.push(obj)
-
- })
- arr = this.dealData(arr)
- this['newlisttabinfo' + index] = arr
- }
- // 当选择只有一个时
- else if (this.staff1.value && !this.staff2.value) {
- // console.log(2)
- result[0].map(item => {
- let obj = {}
- obj.name = item.deptName
- obj.zxl = item.data
- arr.push(obj)
- })
- // 判断是否显示平均
- // 如果显示对比
- if (this.timepickpickisshow) {
- result[1].map(item => {
- let obj = {}
- obj.name = '平均'
- obj.zxl = item.data
- arr.push(obj)
- })
- }
- arr = this.dealData(arr)
- this['newlisttabinfo' + index] = arr
- } else {
- console.log(3, '啥大上课了就可领取诶去玩害偶尔UI哦请勿诶哦')
- // 当两个都选择的时候
- result[0].map(item => {
- let obj = {}
- obj.name = item.deptName
- obj.zxl = item.data
- arr.push(obj)
- })
- result[1].map(item => {
- let obj = {}
- obj.name = item.deptName
- obj.zxl = item.data
- arr.push(obj)
- })
- arr = this.dealData(arr)
- this['newlisttabinfo' + index] = arr
- }
- } else {
- console.log(idx, index, url, '1231231231289123132UI哦23UI哦23UI哦1 ')
- // 当选择趋势时
- this['lineOptsect' + index] = {}
- let allobj = {
- categories: [],
- series: []
- }
- // 先处理时间
- // 当选择全部时
- if (!this.staff1.value && !this.staff2.value) {
- result.map((item, idx) => {
- let obj = {}
- obj.name = item[0].deptName
- obj.data = []
- item.map(item1 => {
- // 时间的处理
- if (idx == 0) {
- allobj.categories.push(item1.statDate.slice(5, 10))
- }
- obj.data.push(item1.data)
- })
- allobj.series.push(obj)
- })
- }
- // 当选择只有一个时
- else if (this.staff1.value && !this.staff2.value) {
- // console.log(2)
- let obj = {}
- obj.data = []
- obj.name = result[0][0].deptName
- result[0].map(item => {
- allobj.categories.push(item.statDate.slice(5, 10))
- obj.data.push(item.data)
- })
- allobj.series.push(obj)
- // 判断是否显示平均
- // 如果显示对比
- if (this.timepickpickisshow) {
- let obj = {}
- obj.data = []
- obj.name = '平均'
- result[1].map(item => {
- obj.data.push(item.data)
- })
- allobj.series.push(obj)
- }
- } else {
- // console.log(3)
- // 当两个都选择的时候
- let obj = {}
- let obj1 = {}
- obj.data = []
- obj1.data = []
- obj.name = result[0][0].deptName
- obj1.name = result[1][0].deptName
- result[0].map(item => {
- allobj.categories.push(item.statDate.slice(5, 10))
- obj.data.push(item.data)
- })
- result[1].map(item => {
- obj1.data.push(item.data)
- })
- allobj.series.push(obj)
- allobj.series.push(obj1)
- }
- // console.log(allobj)
- // return
- // this.lineOptsect1=allobj
- this['lineOptsect' + index] = allobj
- // this['lineOptsect'+index].series=allobj.series
- // this['lineOptsect'+index].categories=allobj.categories
- }
-
- this.$forceUpdate()
- })
- },
- // 获取销奖能力
- getPowerList() {
- this.$u.post('/cusLvStatistics/teamAnalysisMarketingAbility', {
- deptIds: this.deptids || [this.staff1.value, this.staff2.value].filter(item => item).join(','),
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal + '',
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate
- })
- .then(res => {
- this.LOADING = false
- // console.log(res)
- // 处理数据
- this.chartData1 = {
- categories: [],
- series: []
- }
- let allobj = {
- categories: [],
- series: []
- }
- // 当选择全部时
- if (!this.staff1.value && !this.staff2.value) {
- // let first=res.first
- res.first.map((item, index) => {
- let obj = {
- name: item[0].deptName,
- data: []
- }
- item.map((item1) => {
- if (index == 0) {
- allobj.categories.push(item1.name)
- }
- obj.data.push(item1.avgExecutionRate)
- })
- allobj.series.push(obj)
- })
- }
- // 当选择只有一个时
- else if (this.staff1.value && !this.staff2.value) {
- res.first.map((item, index) => {
- let obj = {
- name: item[0].deptName,
- data: []
- }
- item.map((item1) => {
- if (index == 0) {
- allobj.categories.push(item1.name)
- }
- obj.data.push(item1.avgExecutionRate)
- })
- allobj.series.push(obj)
- })
- // 判断是否显示平均
- // 如果显示对比
- if (this.timepickpickisshow) {
- res.second.map((item, index) => {
- let obj = {
- name: '平均',
- data: []
- }
- item.map((item1) => {
- obj.data.push(item1.avgExecutionRate)
- })
- allobj.series.push(obj)
- })
- }
- } else {
- console.log(311111)
- // 当两个都选择的时候
- res.first.map((item, index) => {
- let obj = {
- name: item[0].deptName,
- data: []
- }
- item.map((item1) => {
- if (index == 0) {
- allobj.categories.push(item1.name)
- }
- obj.data.push(item1.avgExecutionRate)
- })
- allobj.series.push(obj)
- })
- }
- // console.log(allobj)
- this.chartData1 = allobj
- this.$forceUpdate()
- }).catch(e => {
- this.LOADING = false
- })
- },
- // 定义一个公共方法对数据进行处理
- dealData(arr) {
- // 获取最大值
- let num = Math.max.apply(Math, arr.map(function(o) {
- return o.zxl
- })) //结果:3
- // console.log(num)
- if (num > 100) {
- // 获取最大值的下标
- // let idx=arr.findIndex(item=>item.zxl==num)
- // console.log(idx,123)
- arr.map(item => {
- item.zxl1 = Math.floor(item.zxl / num * 100)
- })
- // console.log(arr)
- return arr
- } else {
- arr.map(item => {
- item.zxl1 = item.zxl
- })
- return arr
- }
- },
- }
- };
- </script>
- <style lang="scss" scoped>
- .boxtittab {
- position: sticky;
- top: var(--window-top);
- z-index: 999;
- }
-
- .box {
- width: 100%;
- height: 100%;
- background: #FAFAFA;
- }
- .single{
- margin-top: 20rpx;
- padding-bottom: 20rpx;
- }
-
- // 对比时间切换
- .timepick {
- width: 100%;
- height: 90rpx;
- display: flex;
- align-items: center;
- background: #FFFFFF;
- }
-
- .timepicktime {
- width: 260rpx;
- height: 50rpx;
- margin-left: 30rpx;
- display: flex;
- align-items: center;
- background: #FFFFFF;
- }
-
- .timepickpick {
- width: 110rpx;
- height: 50rpx;
- margin-left: 30rpx;
- display: flex;
- align-items: center;
- }
-
- .Underimg {
- width: 28rpx;
- height: 14rpx;
- margin-left: 12rpx;
- }
-
- .hejisan{
- width: 92%;
- margin: 0 auto;
- display: flex;
- padding-top: 20rpx;
- padding-bottom:20rpx;
- .sanbox1{
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- position: relative;
- &::after{
- position: absolute;
- content: '';
- width: 1rpx;
- height: 86rpx;
- background: #E0E0E0;
- right: 0;
- top: 0;
- }
- &:last-child::after {
- position: absolute;
- content: '';
- width: 1rpx;
- height: 86rpx;
- right: 0;
- top: 0;
- background: #fff;
- }
- }
- .text1-1{
- font-size: 24rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- font-weight: 400;
- color: #333333;
- line-height: 32rpx;
- }
- .text1-2{
- color: #333333;
- font-size: 40rpx;
- line-height: 46rpx;
- font-family: PingFangSC-Regular, PingFang SC;
- margin-bottom: 10rpx;
- }
- }
- </style>
|