联系人数据新增近12月联系人新增分析、近12月联系人跟进分析

src/HDrpManagement/contactData/components/contactsAddAnalysis.vue

@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <dataTemPlate ref="dataTemPlateRef" :isTitle="true" title="近12月联系人新增分析" @list="listData" id="contactsAddAnalysisFull">
+      <template slot="operation">
+        <div class="mt-10 inline-15">
+          <span class="search__label inline-16">{{$t('分析日期')}}:</span>
+          <el-date-picker
+              v-model="enddate"
+              :append-to-body="!isFull"
+              type="date"
+              :clearable="false"
+              @change="changeDate"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              size="small"
+              :range-separator="$t('至')"
+              :start-placeholder="$t('开始月份')"
+              :end-placeholder="$t('结束月份')">
+          </el-date-picker>
+        </div>
+        <fullScreen class="inline-16"  domId="contactsAddAnalysisFull" @onFull="onFull" @backFull="backFull"  ></fullScreen>
+      </template>
+      <template slot="content">
+        <div :style="{height:heightDiv}">
+          <div ref="contactsAddAnalysisChart" :style="{height: heightChart}"></div>
+        </div>
+      </template>
+    </dataTemPlate>
+  </div>
+</template>
+
+<script>
+import dataTemPlate from '@/components/dataTemplate/index'
+import depStatus from './depStatus'
+import {DualAxes} from "@antv/g2plot";
+import fullScreen from "@/views/salesData/components/fullScreen";
+export default {
+  name: "contactsAddAnalysis",
+  components:{dataTemPlate,depStatus,fullScreen},
+  data(){
+    return {
+      param:{
+        "id": 2025072510194302,
+        "content": {
+          "type": 1,
+          "dataid": 58,
+          "enddate": "",
+          "where": {
+            "isleave": ""
+          }
+        },
+      },
+      list:[],
+      heightChart:'100%',
+      uvBillData:[],
+      dualAxes:null,
+      enddate:new Date().getFullYear() + '-' +  (new Date().getMonth() + 1) + '-' + new Date().getDate(),
+      isFull:false,
+      heightDiv:'360px'
+    }
+  },
+  methods:{
+    async listData(type,id,isleave,state,init){
+      this.param.content.type = type
+      this.param.content.dataid = id
+      this.param.content.where.isleave = isleave
+      const res = await this.$api.requested(this.param)
+      let lastYear = []
+      let nowYear = []
+      let k=0
+      for (var i=0;i<res.data.histogram.length;i++){
+        if (res.data.histogram[i].type === '去年同期新增'){
+          lastYear[k]=res.data.histogram[i]
+          k++
+        }
+      }
+      let x=0
+      for (var i=0;i<res.data.histogram.length;i++){
+        if (res.data.histogram[i].type === '本期新增'){
+          nowYear[x]=res.data.histogram[i]
+          x++
+        }
+      }
+      this.uvBillData = lastYear.concat(nowYear)
+      this.uvBillData = this.uvBillData.map(item=>{
+        return {
+          date: item.date,
+          type:this.$t(item.type),
+          value: item.value
+        }
+      })
+      /*res.data.lineChart.forEach(item => item[`同比增长率`] = item.value)*/
+      this.transformData = res.data.lineChart
+      this.transformData = this.transformData.map(item=>{
+        return {
+          date: item.date,
+          type:this.$t(item.type),
+          value: item.value
+        }
+      })
+      if (init) {
+        this.dualAxes = new DualAxes(this.$refs.contactsAddAnalysisChart, {
+          data: [this.uvBillData,this.transformData],
+          xField: 'date',
+          yField: ['value', 'value'],
+          geometryOptions: [
+            {
+              geometry: 'column',
+              isGroup: true,
+              seriesField: 'type',
+              color:['#62daab','#6395fa'],
+              label:{
+                position:top
+              }
+            },
+            {
+              geometry: 'line',
+              lineStyle: {
+                lineWidth: 2,
+              },
+              seriesField: 'type',
+              color: '#F6903D',
+              smooth: true,
+              label:{
+                formatter: (datum) =>{
+                  return  datum.value + '%'
+                }
+              }
+            },
+          ],
+          tooltip: {
+            formatter: (datum) => {
+              return { name: datum.type, value: datum.type == this.$t('同比增长率')? datum.value + '%' : datum.value };
+            },
+          },
+        });
+        this.dualAxes.render()
+      } else {
+        this.dualAxes.changeData([this.uvBillData,this.transformData])
+      }
+    },
+    changeDate(){
+      this.param.content.enddate = this.enddate
+      this.listData(this.param.content.type,this.param.content.dataid,this.param.content.where.isleave)
+    },
+    /*全屏*/
+    onFull(){
+      this.heightChart = this.windowWidth > 1136 ? 'calc(100vh - 70px)':'calc(100vh - 123px)'
+      this.heightDiv = this.windowWidth > 1136 ? 'calc(100vh - 70px)':'calc(100vh - 123px)'
+      this.isFull = true
+    },
+    /*退出全屏*/
+    backFull(val){
+      this.heightChart = '100%'
+      this.heightDiv = '360px'
+      this.isFull = false
+      this.$emit('backFull',val)
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/HDrpManagement/contactData/components/contactsFollowAnalysis.vue

@@ -0,0 +1,165 @@
+<template>
+  <div>
+    <dataTemPlate ref="dataTemPlateRef" :isTitle="true" title="近12月联系人跟进分析" @list="listData" id="contactsFollowAnalysisFull">
+      <template slot="operation">
+        <div class="mt-10 inline-15">
+          <span class="search__label inline-16">{{$t('分析日期')}}:</span>
+          <el-date-picker
+              v-model="enddate"
+              :append-to-body="!isFull"
+              type="date"
+              :clearable="false"
+              @change="changeDate"
+              format="yyyy-MM-dd"
+              value-format="yyyy-MM-dd"
+              size="small"
+              :range-separator="$t('至')"
+              :start-placeholder="$t('开始月份')"
+              :end-placeholder="$t('结束月份')">
+          </el-date-picker>
+        </div>
+        <fullScreen class="inline-16"  domId="contactsFollowAnalysisFull" @onFull="onFull" @backFull="backFull"  ></fullScreen>
+      </template>
+      <template slot="content">
+        <div :style="{height:heightDiv}">
+          <div ref="contactsFollowAnalysisChart" :style="{height: heightChart}"></div>
+        </div>
+      </template>
+    </dataTemPlate>
+  </div>
+</template>
+
+<script>
+import dataTemPlate from '@/components/dataTemplate/index'
+import depStatus from './depStatus'
+import {DualAxes} from "@antv/g2plot";
+import fullScreen from "@/views/salesData/components/fullScreen";
+export default {
+  name: "contactsFollowAnalysis",
+  components:{dataTemPlate,depStatus,fullScreen},
+  data(){
+    return {
+      param:{
+        "id": 2025072510195202,
+        "content": {
+          "type": 1,
+          "dataid": 58,
+          "enddate": "",
+          "where": {
+            "isleave": ""
+          }
+        },
+      },
+      list:[],
+      heightChart:'100%',
+      uvBillData:[],
+      dualAxes:null,
+      enddate:new Date().getFullYear() + '-' +  (new Date().getMonth() + 1) + '-' + new Date().getDate(),
+      isFull:false,
+      heightDiv:'360px'
+    }
+  },
+  methods:{
+    async listData(type,id,isleave,state,init){
+      this.param.content.type = type
+      this.param.content.dataid = id
+      this.param.content.where.isleave = isleave
+      const res = await this.$api.requested(this.param)
+      let lastYear = []
+      let nowYear = []
+      let k=0
+      for (var i=0;i<res.data.histogram.length;i++){
+        if (res.data.histogram[i].key === '去年同期跟进'){
+          lastYear[k]=res.data.histogram[i]
+          k++
+        }
+      }
+      let x=0
+      for (var i=0;i<res.data.histogram.length;i++){
+        if (res.data.histogram[i].key === '本期跟进'){
+          nowYear[x]=res.data.histogram[i]
+          x++
+        }
+      }
+      this.uvBillData = lastYear.concat(nowYear)
+      this.uvBillData = this.uvBillData.map(item=>{
+        return {
+          date: item.date,
+          key:this.$t(item.key),
+          value: item.value
+        }
+      })
+      /*res.data.lineChart.forEach(item => item[`同比增长率`] = item.value)*/
+      this.transformData = res.data.lineChart
+      this.transformData = this.transformData.map(item=>{
+        return {
+          date: item.date,
+          key:this.$t(item.key),
+          value: item.value
+        }
+      })
+      if (init) {
+        this.dualAxes = new DualAxes(this.$refs.contactsFollowAnalysisChart, {
+          data: [this.uvBillData,this.transformData],
+          xField: 'date',
+          yField: ['value', 'value'],
+          geometryOptions: [
+            {
+              geometry: 'column',
+              isGroup: true,
+              seriesField: 'key',
+              color:['#62daab','#6395fa'],
+              label:{
+                position:top
+              }
+            },
+            {
+              geometry: 'line',
+              lineStyle: {
+                lineWidth: 2,
+              },
+              seriesField: 'key',
+              color: '#F6903D',
+              smooth: true,
+              label:{
+                formatter: (datum) =>{
+                  return  datum.value + '%'
+                }
+              }
+            },
+          ],
+          tooltip: {
+            formatter: (datum) => {
+              return { name: datum.key, value: datum.key == this.$t('同比增长率')? datum.value + '%' : datum.value };
+            },
+          },
+        });
+        this.dualAxes.render()
+      } else {
+        this.dualAxes.changeData([this.uvBillData,this.transformData])
+      }
+    },
+    changeDate(){
+      this.param.content.enddate = this.enddate
+      this.listData(this.param.content.type,this.param.content.dataid,this.param.content.where.isleave)
+    },
+    /*全屏*/
+    onFull(){
+      this.heightChart = this.windowWidth > 1136 ? 'calc(100vh - 70px)':'calc(100vh - 123px)'
+      this.heightDiv = this.windowWidth > 1136 ? 'calc(100vh - 70px)':'calc(100vh - 123px)'
+      this.isFull = true
+    },
+    /*退出全屏*/
+    backFull(val){
+      this.heightChart = '100%'
+      this.heightDiv = '360px'
+      this.isFull = false
+      this.$emit('backFull',val)
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

src/HDrpManagement/contactData/components/salesContribution.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <dataTemPlate >
+    <dataTemPlate>
       <template slot="content">
         <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane :label="$t(`联系人关联客户销售TOP10`)" name="关联客户">

src/HDrpManagement/contactData/index.vue

@@ -161,6 +161,8 @@
             </template>
           </dataDetail>
           <salesContribution class="mt-10" ref="salesContributionRef"></salesContribution>
+          <contactsAddAnalysis class="mt-10" ref="contactsAddAnalysisRef"></contactsAddAnalysis>
+          <contactsFollowAnalysis class="mt-10" ref="contactsFollowAnalysisRef"></contactsFollowAnalysis>
         </div>
       </template>
     </normal-layout>
@@ -174,9 +176,11 @@ import dataBoard from '@/components/dataBoard/index'
 import dataDetail from '@/template/dataDetail/index'
 import salesContribution from './components/salesContribution'
 import depStatus from './components/depStatus'
+import contactsAddAnalysis from './components/contactsAddAnalysis'
+import contactsFollowAnalysis from './components/contactsFollowAnalysis'
 export default {
   name: "index",
-  components:{normalLayout,btnSelect,dataBoard,dataDetail,salesContribution,depStatus},
+  components:{normalLayout,btnSelect,dataBoard,dataDetail,salesContribution,depStatus,contactsAddAnalysis,contactsFollowAnalysis},
   data(){
     return {
       scrollData:'',
@@ -327,21 +331,29 @@ export default {
       this.$refs.allDepRef.deplist = this.deplist
       this.$refs.salesContributionRef.$refs.depStatusCusRef.deplist = this.deplist
       this.$refs.salesContributionRef.$refs.depStatusProRef.deplist = this.deplist
+      this.$refs.contactsAddAnalysisRef.$refs.dataTemPlateRef.$refs.depStatusRef.deplist = this.deplist
+      this.$refs.contactsFollowAnalysisRef.$refs.dataTemPlateRef.$refs.depStatusRef.deplist = this.deplist
 
       this.personnelList = res.data.hr
       this.$refs.allDepRef.personnelList = this.personnelList
       this.$refs.salesContributionRef.$refs.depStatusCusRef.personnelList = this.personnelList
       this.$refs.salesContributionRef.$refs.depStatusProRef.personnelList = this.personnelList
+      this.$refs.contactsAddAnalysisRef.$refs.dataTemPlateRef.$refs.depStatusRef.personnelList = this.personnelList
+      this.$refs.contactsFollowAnalysisRef.$refs.dataTemPlateRef.$refs.depStatusRef.personnelList = this.personnelList
 
       this.depment = ''
       this.$refs.allDepRef.depment = this.depment
       this.$refs.salesContributionRef.$refs.depStatusCusRef.depment = this.depment
       this.$refs.salesContributionRef.$refs.depStatusProRef.depment = this.depment
+      this.$refs.contactsAddAnalysisRef.$refs.dataTemPlateRef.$refs.depStatusRef.depment = this.depment
+      this.$refs.contactsFollowAnalysisRef.$refs.dataTemPlateRef.$refs.depStatusRef.depment = this.depment
 
       this.person = JSON.parse(window.sessionStorage.getItem('active_account')).name
       this.$refs.allDepRef.person = this.person
       this.$refs.salesContributionRef.$refs.depStatusCusRef.person = this.person
       this.$refs.salesContributionRef.$refs.depStatusProRef.person = this.person
+      this.$refs.contactsAddAnalysisRef.$refs.dataTemPlateRef.$refs.depStatusRef.person = this.person
+      this.$refs.contactsFollowAnalysisRef.$refs.dataTemPlateRef.$refs.depStatusRef.person = this.person
 
       const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
       this.otherMethod(userid)
@@ -455,6 +467,8 @@ export default {
       this.$refs.salesContributionRef.paramCus.content.dateType = '本年'
       this.$refs.salesContributionRef.paramPro.content.dateType = '本年'
       this.$refs.salesContributionRef.listData(dataid,0,1)
+      this.$refs.contactsAddAnalysisRef.listData(0,dataid,1,null,true)
+      this.$refs.contactsFollowAnalysisRef.listData(0,dataid,1,null,true)
     },
     /*其他页面再次调用*/
     otherModel(dataid,type,isleave,state){
@@ -469,6 +483,8 @@ export default {
       this.$refs.salesContributionRef.$refs.depStatusProRef.isleave = isleave
       this.$refs.salesContributionRef.$refs.depStatusCusRef.isleave = isleave
       this.$refs.salesContributionRef.listData(dataid,type,isleave,state)
+      this.$refs.contactsAddAnalysisRef.listData(0,dataid,1,state,null)
+      this.$refs.contactsFollowAnalysisRef.listData(0,dataid,1,state,null)
     },
     /*联系人数据概况*/
     async queryMainData(dataid,dateType){

src/components/dataBoard/index.vue

@@ -2,7 +2,10 @@
   <div>
     <div class="div-box-new-margin">
       <div class="div-box-new" :style="{height:heightNew}">
-        <div style="font-size: 16px;color: #333333;margin-bottom: 20px">{{$t(title)}}</div>
+        <div style="font-size: 16px;color: #333333;margin-bottom: 20px">
+<!--          <div class="div-line div-line-right"></div>-->
+          {{$t(title)}}
+        </div>
         <div class="div-border-new" :style="{height:heightNew}">
           <div class="item div-click" v-for="item in mainData" @click="detailClick(item.label)">
             <p class="title">{{item.value}}</p>

src/components/dataTemplate/depStatus.vue

@@ -0,0 +1,159 @@
+<template>
+  <div>
+    <div class="inline-16">
+      <label  class="search__label" >{{$t('部门')}}:</label>
+      <el-cascader class="inline-16" placement="bottom" ref="selectdep" size="small" v-model="depment" :options="deplist" :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}"  @change="selectDep" clearable></el-cascader>
+    </div>
+    <div class="inline-16">
+      <label  class="search__label" >{{$t('业务员')}}:</label>
+      <el-select v-model="person" filterable :placeholder="$t('请选择')" size="small" clearable @change="selectPerson">
+        <el-option
+            v-for="item in personnelList"
+            :key="item.index"
+            :label="$t(item.name)"
+            :value="item.userid">
+        </el-option>
+      </el-select>
+    </div>
+    <div class="mt-10 inline-16" v-if="isLeaveShow != false">
+      <p class="search__label">{{$t('状态')}}:</p>
+      <el-select v-model="isleave" clearable style="margin-right:10px" size="small" :placeholder="$t('请选择状态')" @change="leaveChange" >
+        <el-option :label="$t('在职')" value="1"></el-option>
+        <el-option :label="$t('离职')" value="2"></el-option>
+      </el-select>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "depStatus",
+  props:['isLeaveShow'],
+  data(){
+    return {
+      depment:'',
+      person:'',
+      isleave:'1',
+      deplist:[],
+      personnelList:[],
+      depmentParam:{
+        "id": 20230620102004,
+        "content": {
+          "isleave":1
+        }
+      },
+    }
+  },
+  methods:{
+    /*部门人员列表*/
+    async departmentrtment() {
+      const res = await this.$api.requested(this.depmentParam)
+      this.deplist = this.createMenu(res.data.dep)
+      this.personnelList = res.data.hr
+      this.depment = ''
+      this.person = JSON.parse(window.sessionStorage.getItem('active_account')).name
+      const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
+    },
+    /*部门结构处理*/
+    createMenu (array) {
+      var that = this
+      let arr = []
+      function convertToElementTree(node) {
+        // 新节点
+        if (node.subdep.length === 0){
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+            disabled:that.pageOnlyRead,
+          }
+        }else {
+          var elNode = {
+            label: node["depname"],
+            parentid:node['parentid'],
+            parentname:node['parentname'],
+            departmentid:node["departmentid"],
+            value:node["departmentid"],
+            remarks:node["remarks"],
+            isused:node["isused"],
+            changedate:node['changedate'],
+            changeby:node['changeby'],
+            createdate:node['createdate'],
+            createby:node['createby'],
+            depno:node['depno'],
+            disabled:that.pageOnlyRead,
+            children: []
+          }
+        }
+        if (node.subdep && node.subdep.length > 0) {
+          // 如果存在子节点
+          for (var index = 0; index < node.subdep.length; index++) {
+            // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
+            elNode.children.push(convertToElementTree(node.subdep[index]));
+          }
+        }
+        return elNode;
+      }
+      array.forEach((element) => {
+        arr.push(convertToElementTree(element))
+      });
+      return arr
+    },
+    /*选择部门*/
+    selectDep(val) {
+      console.log(val,'val2222')
+      if (val.length === 0){
+        const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
+        console.log(JSON.parse(sessionStorage.getItem('active_account')).userid)
+        this.person = JSON.parse(window.sessionStorage.getItem('active_account')).name
+        this.$emit(`depData`,userid,'0')
+      }else {
+        this.person = ''
+        this.departmentid = val[val.length -1]
+        this.$emit(`depData`,this.departmentid,'1',this.isleave)
+      }
+    },
+    /*选择人员*/
+    selectPerson(val){
+      this.depment = ''
+      this.departmentid = ''
+      this.dataid = val
+      this.$emit(`personData`,val,'0',this.isleave)
+    },
+    /*选择在职状态*/
+    leaveChange(){
+      this.person = ''
+      const type = this.depment?'1':'0'
+      const dataid = type == 0?-1:this.departmentid
+      this.$emit(`leaveData`,dataid,type,this.isleave,'状态')
+      this.personData()
+    },
+    /*获取新的业务员列表*/
+    async personData(){
+      let param = {
+        id: 20230620102004,
+        content: {
+          isleave:this.isleave
+        },
+      }
+      const res = await this.$api.requested(param)
+      this.personnelList = res.data.hr
+    },
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/dataTemplate/index.vue

@@ -2,7 +2,16 @@
   <div>
     <div class="div-box-new-margin">
       <div class="div-box-new" :style="{height:heightNew}">
-        <div style="font-size: 16px;color: #333333;margin-bottom: 20px" v-if="isTitle">{{$t(title)}}</div>
+        <div style="display: flex;justify-content: space-between" v-if="isTitle">
+          <div style="font-size: 16px;color: #333333;margin-bottom: 20px;width: 200px">
+            <div class="div-line div-line-right"></div>
+            <div style="padding-top: -10px">{{$t(title)}}</div>
+          </div>
+          <div>
+            <depStatus class="inline-16" ref="depStatusRef" @depData="listData" @personData="listData" @leaveData="listData"></depStatus>
+            <slot name="operation"></slot>
+          </div>
+        </div>
         <div>
           <slot name="content"></slot>
         </div>
@@ -12,9 +21,16 @@
 </template>
 
 <script>
+import depStatus from './depStatus'
 export default {
   name: "index",
-  props:['heightNew','title','isTitle']
+  props:['heightNew','title','isTitle','titleWidth'],
+  components:{depStatus},
+  methods:{
+    listData(dataid,type,isleave,state){
+      this.$emit('list',type,dataid,isleave,state)
+    }
+  }
 }
 </script>