|
- <template>
- <view class="box">
- <view class="boxtittabs">
- <div class="items" @tap="screenShow = true">{{ showTimeText }}<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon></div>
- <div class="items" @tap="showTemplate = true">{{ showBeText }}<u-icon name="arrow-down" size="24" style="padding-left: 12rpx"></u-icon></div>
- </view>
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="Piabodata-box">
- <view class="Piabodata" @click="toTrendAnalysis()">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/qushi.png" mode=""></image>
- </view>
- <view class="Piabodata-text">趋势分析</view>
- </view>
- <view class="Piabodata" @click="toStaffAnalysis()">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/yuangong.png" mode=""></image>
- </view>
- <view class="Piabodata-text">员工分析</view>
- </view>
- <view class="Piabodata" @click="toUserinsightinto()">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/yinghu.png" mode=""></image>
- </view>
- <view class="Piabodata-text">用户洞察</view>
- </view>
- <view class="Piabodata" @click="Theteamcompared()" v-if="Theteamcomparedisshow">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/tuandui.png" mode=""></image>
- </view>
- <view class="Piabodata-text">团队对比</view>
- </view>
- <view class="Piabodata" @click="Groupcontrast()" v-if="Groupcontrastisshow">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/jituan.png" mode=""></image>
- </view>
- <view class="Piabodata-text">集团对比</view>
- </view>
- <view class="Piabodata" @click="towajue()">
- <view class="Piabodata-img">
- <image class="Piabodata-img1" src="../../../static/images/qushi.png" mode=""></image>
- </view>
- <view class="Piabodata-text">需求挖掘分析</view>
- </view>
- </view>
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="boxzonglan" style="min-height: 400rpx;">
- <view class="zonglantit">简报</view>
- <view class="zonglanbox">
- <view class="grid" v-for="(item,index) in numlist" :key="index">
- <view class="audonum">{{item.name}}</view>
- <view class="num">{{item.num}}</view>
- </view>
- </view>
- </view>
-
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title">
- <view class="title1">接待趋势</view>
- </view>
- <view class="swiper-box">
- <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex"
- @change="tapspagek2()" inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj1"
- :is-scroll="true">
- </u-tabs-swiper>
- </view>
- <!-- <view class="hejibox">
- <view class="heji">合计:50</view>
- <view class="heji">均值:25</view>
- </view> -->
- <view class="danwei">{{danwei}} </view>
- <view class="uchaserbox">
- <template v-if="danwei == '单位(%)'">
- <qiun-data-charts type="line" :chartData="lineOptsect" :opts="lineOpts" background="none"
- :ontouch="true" canvasId="wangxiaohuaerlingilingwuyiba1" :canvas2d="true" />
- </template>
- <template v-else>
- <qiun-data-charts type="line" :chartData="lineOptsect" background="none" :ontouch="true"
- canvasId="wangxiaohuaerlingilingwuyiba1" :canvas2d="true" />
- </template>
- </view>
- </view>
-
-
- <view class="" v-if="teamFlag">
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title" @click="staffShow1=true">
- <view class="title1">团队接待趋势</view>
- <view class="title2">
- <view class="title2-che" style="width: 220rpx;display: flex;align-items: center;">
- <text
- style="flex-grow: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{team.label}}</text>
- <image style="flex-shrink: 0;" class="righttochoose"
- src="../../../static/images/righttochoose.png" mode=""></image>
- </view>
-
- </view>
- </view>
- <view class="danwei">单位(%)</view>
- <view class="uchaserbox">
- <qiun-data-charts type="line" :chartData="lineOptsect1" background="none" :ontouch="true"
- canvasId="wangxiaohuaerlineryiliwuyibao" :canvas2d="true" :opts="lineOpts" />
- </view>
- </view>
- </view>
-
- <view class="" v-if="staffFlag">
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title">
- <view class="title1">员工接待趋势</view>
- <view class="title2" @click="staffShow=true">
- <view class="title2-che" style="width: 220rpx;">{{staff.label}}
- <image class="righttochoose" src="../../../static/images/righttochoose.png" mode=""></image>
- </view>
- </view>
- </view>
- <view class="danwei">单位(%)</view>
- <view class="uchaserbox">
- <qiun-data-charts type="line" :chartData="lineOptsect2" background="none" :ontouch="true"
- canvasId="wangxiaohuaerlingeryilingwuyibao" :canvas2d="true" :opts="lineOpts" />
- </view>
- </view>
- </view>
-
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title">
- <view class="title1">场景触达分析</view>
- </view>
- <view style="width: 100%;height: 300rpx;text-align: center;line-height: 300rpx;"
- v-if="newlisttabinfo.length==0">暂无数据</view>
- <view v-else class="jindu" style="margin-top: 20rpx;">
- <scroll-view style="height: 300rpx;" scroll-y="true">
- <view class="jindu-box" v-for="(item,index) in newlisttabinfo" :key="index">
- <view class="jindu-boxche">
- <view class="jindu-name">{{item.name.substring(0, 4)}}</view>
- <view style="width: 440rpx;margin-left: 10rpx;">
- <u-line-progress height="24" :show-percent="false" active-color="#4FC78F"
- :percent="item.zxl"></u-line-progress>
- </view>
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
-
- <view style="width: 100%;height: 20rpx;background: #FAFAFA;"></view>
- <view class="single">
- <view class="title">
- <view class="title1">销讲指标执行率</view>
- </view>
- <view class="swiper-box">
- <u-tabs-swiper ref="tabs" font-size="30" :bold="true" swiper-width="600" :current="bocindex1"
- @change="tapspagek3" inactive-color="#b1b1b1" active-color="#008ef2" :list="newlistoj"
- :is-scroll="true">
- </u-tabs-swiper>
- </view>
- <view style="width: 100%;height: 300rpx;text-align: center;line-height: 300rpx;"
- v-if="newlisttabinfo1.length==0">暂无数据</view>
- <view class="jindu" v-else>
- <scroll-view style="height: 300rpx;" scroll-y="true">
- <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 style="width: 440rpx;margin-left: 10rpx;">
- <u-line-progress height="24" :show-percent="false" active-color="#4FC78F"
- :percent="item.zxl"></u-line-progress>
- </view>
- <view class="jindu-zxl">{{item.zxl==null?0:item.zxl}}%</view>
- </view>
- </view>
- </scroll-view>
- </view>
- </view>
-
- <u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
- <u-select v-model="staffShow" :list="staffList" @confirm="staffSelectCallback($event,0)"
- :default-value='selindex'></u-select>
- <u-select v-model="staffShow1" :list="teamList" @confirm="staffSelectCallback($event,1)"
- :default-value='selindex'></u-select>
-
-
-
- <!-- 更多筛选 -->
- <u-popup v-model="screenShow" mode="bottom" height="368">
- <view class="screen">
- <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天')">近15天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 6 }" @click="tabtimetap(6, '近30天')">近30天</view>
- </view>
- <view class="tabbox">
- <view :class="{ activecllasscet: activeTotal == 3 }" @click="tabtimetap(3, '自定义')">自定义</view>
- </view>
- </view>
- </view>
- </u-popup>
- <!-- 销讲业务 -->
- <u-select :mask-close-able="false" label-name="templateName" value-name="id" v-model="showTemplate"
- mode="single-column" :list="templateList" @cancel="templateCancel" @confirm="templateConfirm"></u-select>
-
- <!-- 加载组件 -->
- <loading v-model="LOADING"></loading>
- </view>
- </template>
-
- <script>
- var app = getApp();
- var config = require("../../../config");
- import loading from "@/components/loading/index.vue"
- export default {
- components: {
- loading
- },
- data() {
- return {
- activeTotal: 4,
- activeTotal2: 0,
- houseId: '',
- timeobj: {
- statDateStart: '',
- statDateEnd: ''
- },
- // 员工列表
- staffList: [],
- // 团队列表
- teamList: [],
- staffShow: false,
- staff: {
- value: '',
- label: ''
- },
- team: {
- value: '',
- label: ''
- },
- teamFlag: true,
- bocindex1: 0,
- staffFlag: true,
- staffShow1: false,
- lastStartDate: '',
- lastEndDate: '',
- allnum: '',
- allavg: '',
- allnum1: '',
- allavg1: '',
- danwei: '单位(次)',
- totalTimeShow: false,
- activeTab: 0,
-
- numlist: [{
- name: '接待量',
- num: '',
- setName: 'sumCustomer'
- }, {
- name: '有效接待',
- num: '',
- setName: 'receptionCount'
- },
- {
- name: '平均执行率',
- num: '',
- setName: 'fraction'
- },
- {
- name: '平均接待时长',
- num: '',
- setName: 'sumDuration'
- },
- ],
-
- lineOptsect: {
- "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
- "series": [{
- "name": "成交量",
- "data": [35, 8, 25, 37, 4, 20]
- }]
- },
- lineOptsect1: {
- "categories": [],
- "series": []
- },
- lineOptsect2: {
- "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
- "series": [{
- "name": "成交量",
- "data": [35, 8, 25, 37, 4, 20]
- }]
- },
- newlistoj: [],
-
- newlistoj1: [{
- name: "接待量",
- id: 3,
- title: '单位(个)',
- setName: 'sumCustomer'
- },
- {
- name: "有效接待",
- id: 1,
- title: '单位(次)',
- setName: 'receptionCount'
- },
- {
- name: "平均执行率",
- id: 2,
- title: '单位(%)',
- setName: 'fraction'
- },
- {
- name: "平均接待时长",
- id: 5,
- title: '单位(min)',
- setName: 'sumDuration'
- },
- ],
- bocindex: 0,
- newlisttabinfo: [{
- name: '接待量',
- zxl: '10'
- },
- {
- name: '平均执行率',
- zxl: '50'
- },
- {
- name: '接待客户',
- zxl: '80'
- },
- ],
- newlisttabinfo1: [],
- Theteamcomparedisshow: false,
- Groupcontrastisshow: false,
- allechar: [],
- allList: [],
- lineOpts: {
- yAxis: {
- data: [{
- max: 100,
- min: 0,
- }]
- }
- },
-
-
-
- screenShow: false, // 时间筛选弹窗
- showTimeText: '近七天', // 展示文字
- showBeText: '全部业务', //
- templateList: [], // 销讲业务
- showTemplate: false, // 展示选择销讲业务弹窗
- marketingBusiness: '', // 选择的业务id
- };
- },
- onShow() {
- this.LOADING = true
- // 获取项目id
- this.houseId = uni.getStorageSync('buildingID').id;
- // 获取数据看板
- this.getMarketingBusiness()
- // 获取员工
- this.getStaffList()
- // 获取团队
- this.getSectionList()
- // 获取团队是否显示权限
-
- this.queryHaveDept()
- // 获取简报
- this.getReport()
- // 获取接待趋势
- this.getRtrent()
- // 获取维度
- this.getindexZxl()
- },
- onPullDownRefresh() {
- this.getMarketingBusiness()
- // 获取员工
- this.getStaffList()
- // 获取团队
- this.getSectionList()
- // 获取团队是否显示权限
-
- // 获取简报
- this.getReport()
- // 获取接待趋势
- this.getRtrent()
- // 获取维度
- this.getindexZxl()
- setTimeout(function() {
- uni.stopPullDownRefresh();
- }, 1000);
- },
- methods: {
- // 销讲业务方法
- templateCancel() {
- this.showTemplate = false;
- },
-
- // 确认选择销讲业务
- templateConfirm(e) {
- this.showTemplate = false;
- this.marketingBusiness = e[0].value
- this.showBeText = e[0].label
- this.getdata()
- },
-
-
- // 获取销讲业务
- getMarketingBusiness() {
- this.$u.get('/customer/marketingBusiness', {
- houseId: uni.getStorageSync('buildingID').id,
- }).then(res => {
- this.templateList = res
- this.templateList.unshift({
- templateName: '全部业务',
- id: ''
- })
- })
- },
-
- towajue() {
- uni.navigateTo({
- url: "/pages/center/Piabodata/requireminingAnalysis"
- })
- },
- queryHaveDept() {
- return new Promise((resolve, reject) => {
- this.$u.get("/user/queryHaveDept?houseId=" + this.houseId).then(res => {
- this.permissions(res)
- })
- })
- },
- permissions(res) {
- if (res == 1) {
- this.Theteamcomparedisshow = false;
- this.Groupcontrastisshow = false;
- return
- }
-
- let totle = uni.getStorageSync('weapp_session_userInfo_data').total;
- if (totle == 1) {
- this.Theteamcomparedisshow = true;
- this.Groupcontrastisshow = false;
- } else {
- this.Theteamcomparedisshow = true;
- this.Groupcontrastisshow = true;
- }
- },
- // 获取员工列表
- getStaffList() {
- this.$u.post('/cusLvStatistics/selectAllAccountIdByHouseId', {
- houseId: this.houseId
- })
- .then(res => {
- // console.log(res,'123')
- this.staffList = []
- res.map(item => {
- let obj = {}
- obj.value = item.accountId
- obj.label = item.name
- this.staffList.push(obj)
- })
- this.staff = this.staffList[0]
- this.getAward()
- })
- },
- // 获取接待趋势
- getRtrent() {
- this.$u.post('/cusLvStatistics/receptionTrend', {
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal,
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate,
- marketingBusiness: this.marketingBusiness,
- })
- .then(res => {
- // console.log(res)
- this.allechar = res
- this.tapspagek2(this.bocindex)
-
- })
- },
- // 销奖维度
- getindexZxl() {
- this.$u.post('/cusLvStatistics/indexZxl', {
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal,
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate,
- marketingBusiness: this.marketingBusiness,
- })
- .then(res => {
- this.LOADING = false
- // console.log(res)
- // 处理销奖维度执行率
- // this.newlisttabinfo
- let arr = []
- this.newlistoj = []
- res.list.map((item, index) => {
- arr.push({
- name: item.name,
- zxl: item.zxl
- })
- this.newlistoj.push({
- name: item.name,
- id: index
- })
- })
- this.newlisttabinfo = arr
- this.allList = res.list
- this.tapspagek3(this.bocindex1)
- }).catch(e => {
- this.LOADING = false
- })
- },
- // 获取简报
- getReport() {
- this.$u.post('/cusLvStatistics/xiaojiangAnalysis', {
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal,
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate,
- marketingBusiness: this.marketingBusiness,
- })
- .then(res => {
- res.sumDuration = Math.floor(res.sumDuration / 60) || 0
- res.fraction = (res.fraction > 100 ? 100 : (res.fraction || 0)) + '%'
- this.numlist.map(item => {
- item.num = res[item.setName]
- })
- })
- },
- // 获取团队列表
- getSectionList() {
- this.$u.post('/cusLvStatistics/findAllDeptIdByHouseId', {
- houseId: this.houseId
- })
- .then(res => {
- this.teamList = []
- res.map(item => {
- let obj = {}
- obj.value = item.deptId
- obj.label = item.deptName
- this.teamList.push(obj)
- })
- this.team = this.teamList[0]
- this.receptionCountList()
- })
- },
- // 员工销奖趋势
- getAward() {
- if (this.staffList.length == 0) {
- this.staffFlag = false
- this.$forceUpdate()
- return
- }
- this.$u.post('/cusLvStatistics/employeeAnalysisExacutiveRate', {
- userA: this.staff.value,
- userB: '',
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal + '',
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate,
- marketingBusiness: this.marketingBusiness,
- })
- .then(res => {
- this.allnum1 = res.avg[0]
- this.allavg1 = res.avg[1]
- // console.log(res)
- let first = res.first
- let second = res.second
- this.lineOptsect2.categories = []
- this.lineOptsect2.series = [{
- name: first[0].accountName,
- data: []
- }]
- first.map(item => {
- this.lineOptsect2.categories.push(item.statDate.slice(5, 10))
- this.lineOptsect2.series[0].data.push(item.sumFraction)
- })
- })
- },
- // 团队接待趋势
- receptionCountList() {
- if (this.teamList.length == 0) {
- this.teamFlag = false
- this.$forceUpdate()
- return
- }
- this.$u.post('/cusLvStatistics/teamAnalysisExecutionRate', {
- deptIds: this.team.value,
- showRank: 1,
- houseId: this.houseId,
- timeType: this.lastEndDate ? null : this.activeTotal + '',
- lastEndDate: this.lastEndDate,
- lastStartDate: this.lastStartDate,
- marketingBusiness: this.marketingBusiness,
- })
- .then(res => {
- // console.log(res)
- let result = res.result
- this.allnum = res.avg[0]
- this.allavg = res.avg[1]
- // 当选择趋势时
- this.lineOptsect1 = {}
- let allobj = {
- categories: [],
- series: []
- }
- // 先处理时间
- // 当选择全部时
- // 当选择只有一个时
- 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)
- this.lineOptsect1 = allobj
-
- })
- },
- //时间切换
- tabtimetap(index, text) {
- if (index == 3) {
- this.totalTimeShow = true;
- this.screenShow = false
- } else {
- this.screenShow = false
- this.showTimeText = text
- this.activeTotal = index;
- this.lastEndDate = ''
- this.lastStartDate = ''
- this.getdata()
- }
- },
- // 获取数据
- getdata() {
- this.receptionCountList()
- this.getReport()
- this.getRtrent()
- this.getindexZxl()
- this.getAward()
- },
- staffSelectCallback(e, idx) {
- if (idx == 0) {
- this.staff = e[0]
- this.getAward()
- } else {
- this.team = e[0]
- this.receptionCountList()
- }
- // console.log(e,idx)
- },
- //自定义时间
- totalTimeChange(e) {
- console.log(e.startDate, e.endDate)
- this.screenShow = false
- this.showTimeText = `${e.startDate}-${e.endDate}`
- this.activeTotal = 3;
- this.lastEndDate = e.endDate
- this.lastStartDate = e.startDate
- this.getdata()
- },
- //指标执行率分析tab
- tapspagek2(index) {
- console.log(index)
- // 对数据进行分析和处理
- // 先处理日期
- let allobj = {
- "categories": [],
- "series": [{
- name: '接待量',
- data: []
- }]
- }
-
- this.danwei = this.newlistoj1[index].title
- allobj.series[0].name = this.newlistoj1[index].name
- this.allechar.map(item => {
- allobj.categories.push(item.statDate.slice(5, 10))
- allobj.series[0].data.push(item[this.newlistoj1[index].setName])
- })
-
- this.bocindex = index;
- this.lineOptsect = allobj
- this.$forceUpdate()
- },
- tapspagek3(index) {
- let arr = []
- // return
- // console.log(index,this.allList[index])
- this.allList[index].children.map(item => {
- arr.push({
- name: item.name,
- zxl: item.zxl > 100 ? 100 : item.zxl
- })
- })
- this.newlisttabinfo1 = arr
- this.bocindex1 = index;
- },
- //集团对比
- Groupcontrast() {
- uni.navigateTo({
- url: '/pages/center/Piabodata/Groupcontrast'
- });
- },
- //团队对比
- Theteamcompared() {
- if (this.teamList.length == 0) {
- uni.showToast({
- title: '没有团队呢',
- icon: 'none'
- })
- return
- }
- uni.navigateTo({
- url: '/pages/center/Piabodata/Theteamcompared'
- });
- },
- //用户洞察
- toUserinsightinto() {
- uni.navigateTo({
- url: '/pages/center/Piabodata/Userinsightinto'
- });
- },
- //趋势分析
- toTrendAnalysis() {
- uni.navigateTo({
- url: '/pages/center/Piabodata/TrendAnalysis'
- });
- },
- //员工分析
- toStaffAnalysis() {
- if (this.staffList.length == 0) {
- uni.showToast({
- title: '没有团队呢',
- icon: 'none'
- })
- return
- }
- uni.navigateTo({
- url: '/pages/center/Piabodata/StaffAnalysis'
- });
- }
- }
- };
- </script>
- <style lang="scss" scoped>
- .boxtittabs {
- width: 100%;
- height: 92rpx;
- background: #FFFFFF;
- display: flex;
- align-items: center;
-
- .items {
- padding: 0 24rpx;
- width: 50%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- }
- }
-
- .screen {
- width: 100%;
-
- .boxtittab {
- width: 100%;
- flex-direction: column;
- border: none;
-
- .tabbox {
- width: 100%;
- }
- }
- }
-
-
- .box {
- width: 100%;
- height: 100%;
- background: #FAFAFA;
- padding-bottom: 60rpx;
- }
-
- .Piabodata-box {
- width: 100%;
- background: #FFFFFF;
- display: flex;
- flex-wrap: wrap;
- padding-bottom: 30rpx;
-
- .Piabodata {
- width: 33.3%;
-
- .Piabodata-img {
- width: 100%;
- text-align: center;
-
- .Piabodata-img1 {
- width: 134rpx;
- height: 134rpx;
- }
- }
-
- .Piabodata-text {
- width: 100%;
- text-align: center;
- font-size: 24rpx;
- font-weight: 400;
- color: #333333;
- margin-top: -10rpx;
- }
- }
- }
-
- .grid:nth-child(1) {
- border-right: none;
- border-bottom: none;
- }
-
- .grid:nth-child(2) {
- border-bottom: none;
- }
-
- .grid:nth-child(3) {
- border-right: none;
- }
- </style>
|