|
|
@@ -4,7 +4,7 @@
|
|
|
<template slot="content">
|
|
|
<div style="display: flex;justify-content: space-between;margin-top: 1.256vw">
|
|
|
<div>
|
|
|
- <el-checkbox v-model="param.content.where.unfinish" true-label="0" false-label="1" @change="listData(null)">{{$t(`包含失败、结案项目`)}}</el-checkbox>
|
|
|
+ <el-checkbox v-model="param.content.where.unfinish" true-label="0" false-label="1" @change="listData(null,'查询')">{{$t(`包含失败、结案项目`)}}</el-checkbox>
|
|
|
</div>
|
|
|
<div style="display: flex;justify-content: left">
|
|
|
<el-select v-model="param.content.dateType" class="inline-16" size="small" @change="listData(param.content.dateType)" :popper-append-to-body="false">
|
|
|
@@ -25,9 +25,104 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="height: 0.256vw"></div>
|
|
|
- <div>
|
|
|
+ <div class="scroll-container">
|
|
|
<funnelBox style="margin-top: 1.256vw;" v-for="(item,index) in list" :key="item.index" :width="width - (index * 1.042)" :data="item"></funnelBox>
|
|
|
</div>
|
|
|
+ <div class="justify-style-left" style="margin-top: 1.026vw;color: #e13333">
|
|
|
+ <div class="icon"></div>
|
|
|
+ <div class="title inline-left">
|
|
|
+ {{$t(`未来12月项目预计签约金额/预计成交金额分析`)}}
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5px;margin-top: 2px">
|
|
|
+ <el-popover
|
|
|
+ :append-to-body="false"
|
|
|
+ placement="top-start"
|
|
|
+ width="200"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <template slot="default">
|
|
|
+ <span>
|
|
|
+ {{$t('预计成交金额 = 预计签约金额 × 项目成交率')}}<br/>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <div slot="reference">
|
|
|
+ <img
|
|
|
+ width="14px"
|
|
|
+ height="14px"
|
|
|
+ src="../../../assets/icons/prompt_icon.svg"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="justify-style-left" style="margin-top: 0.325vw">
|
|
|
+ <div>
|
|
|
+ <div style="color: #3874F6" class="justify-style-left">
|
|
|
+ <div>
|
|
|
+ <span style="font-size: 1.250vw">{{sumsignamount_due}}</span>
|
|
|
+ <span style="font-size: 0.625vw">{{$t(`万元`)}}</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.625vw">
|
|
|
+ <el-popover
|
|
|
+ :append-to-body="false"
|
|
|
+ placement="top-start"
|
|
|
+ width="200"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <template slot="default">
|
|
|
+ <span>
|
|
|
+ {{$t('合计未来12个月的项目预计签约金额')}}<br/>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <div slot="reference">
|
|
|
+ <img
|
|
|
+ width="14px"
|
|
|
+ height="14px"
|
|
|
+ src="../../../assets/icons/prompt_icon.svg"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color: #CFDCE5;font-size: 0.625vw">{{$t(`预计签约金额合计`)}}</div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 5.250vw">
|
|
|
+ <div>
|
|
|
+ <div style="color: #3874F6" class="justify-style-left">
|
|
|
+ <div>
|
|
|
+ <span style="font-size: 1.250vw">{{sumdealamount_due}}</span>
|
|
|
+ <span style="font-size: 0.625vw">{{$t(`万元`)}}</span>
|
|
|
+ </div>
|
|
|
+ <div style="margin-left: 0.625vw">
|
|
|
+ <el-popover
|
|
|
+ :append-to-body="false"
|
|
|
+ placement="top-start"
|
|
|
+ width="200"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <template slot="default">
|
|
|
+ <span>
|
|
|
+ {{$t('合计未来12个月的项目预计成交金额')}}<br/>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <div slot="reference">
|
|
|
+ <img
|
|
|
+ width="14px"
|
|
|
+ height="14px"
|
|
|
+ src="../../../assets/icons/prompt_icon.svg"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="color: #CFDCE5;font-size: 0.625vw">{{$t(`预计成交金额合计`)}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="clear: both;margin-top: 0.625vw">
|
|
|
+ <div ref="chartRef" style="height: 7.856vw;">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</borderTemplate>
|
|
|
</div>
|
|
|
@@ -37,6 +132,7 @@
|
|
|
import borderTemplate from '../components/borderTemplate'
|
|
|
import funnelBox from "../components/funnelBox";
|
|
|
import datePicker from "../components/datePicker";
|
|
|
+import {Column} from "@antv/g2plot";
|
|
|
export default {
|
|
|
name: "salesFunnel",
|
|
|
components:{borderTemplate,funnelBox,datePicker},
|
|
|
@@ -58,11 +154,36 @@ export default {
|
|
|
},
|
|
|
list:[],
|
|
|
width:'23.958',
|
|
|
- colorSet:['#40DCF2','#3685FC','#7367F2','#6CD2A1','#ECB937','#EC6D37']
|
|
|
+ colorSet:['#40DCF2','#3685FC','#7367F2','#6CD2A1','#ECB937','#EC6D37'],
|
|
|
+ transactionParam:{
|
|
|
+ "id": 20241028162104,
|
|
|
+ "content": {
|
|
|
+ "type": "0",
|
|
|
+ "dataid": "0",
|
|
|
+ "stagename":[],
|
|
|
+ "signdate_due":'',
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 20,
|
|
|
+ "where": {
|
|
|
+ "tradefield": "",
|
|
|
+ "isleave":"",
|
|
|
+ "unfinish":'1'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ sumsignamount_due:"",
|
|
|
+ sumdealamount_due:"",
|
|
|
+ futreData:'',
|
|
|
+ chartMap:[],
|
|
|
+ chartMapData:[],
|
|
|
+ stagename:[],
|
|
|
+ stagenameList:[],
|
|
|
+ selectHeight:null,
|
|
|
+ height:282,
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
- async listData(val){
|
|
|
+ async listData(val,type){
|
|
|
const res = await this.$api.requested(this.param)
|
|
|
this.list = []
|
|
|
this.list = res.data.map((item,index)=>{
|
|
|
@@ -80,6 +201,118 @@ export default {
|
|
|
if (val) {
|
|
|
this.dataChange(val)
|
|
|
}
|
|
|
+ this.$nextTick(async()=>{
|
|
|
+ this.transactionParam.content.dataid = this.param.content.dataid
|
|
|
+ this.transactionParam.content.type = this.param.content.type
|
|
|
+ this.transactionParam.content.where.isleave = this.param.content.where.isleave
|
|
|
+ this.transactionParam.content.where.unfinish = this.param.content.where.unfinish
|
|
|
+ const res2 = await this.$api.requested(this.transactionParam)
|
|
|
+ if (res2.code == 0){
|
|
|
+ this.tool.showMessage(res2,()=>{})
|
|
|
+ }else {
|
|
|
+ this.sumsignamount_due = this.tool.formatAmount(this.tool.unitConversion(res2.data?res2.data[0].extradata.sumsignamount_due:"",10000),2)
|
|
|
+ this.sumdealamount_due = this.tool.formatAmount(this.tool.unitConversion(res2.data?res2.data[0].extradata.sumdealamount_due:"",10000),2)
|
|
|
+ this.futreData = res2.data?res2.data[0].extradata.array:""
|
|
|
+ this.chartData(type?false:true,this.futreData)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ chartData(init,data){
|
|
|
+ let index = 0
|
|
|
+ let indexNew = 0
|
|
|
+ if (data){
|
|
|
+ data.forEach((item,num) =>{
|
|
|
+ if (num == index){
|
|
|
+ this.chartMapData[indexNew] = {
|
|
|
+ "signdate_due":item.signdate_due,
|
|
|
+ "value":Math.round(this.tool.unitConversion(item.signamount_due,10000)*100)/100,
|
|
|
+ "name":this.$t('预计签约金额')+ this.$t('(万)')
|
|
|
+ }
|
|
|
+ indexNew = indexNew + 1
|
|
|
+ this.chartMapData[indexNew] = {
|
|
|
+ "signdate_due":item.signdate_due,
|
|
|
+ "value":Math.round(this.tool.unitConversion(item.dealamount_due,10000)*100)/100,
|
|
|
+ "name":this.$t('预计成交金额') + this.$t('(万)')
|
|
|
+ }
|
|
|
+ indexNew = indexNew + 1
|
|
|
+ index = index + 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(this.chartMapData,'chartMapData')
|
|
|
+ if (init){
|
|
|
+ this.chartMap = new Column(this.$refs.chartRef,{
|
|
|
+ color:['#3685FC','#6CD2A1'],
|
|
|
+ data:this.chartMapData,
|
|
|
+ isGroup: true,
|
|
|
+ xField: 'signdate_due',
|
|
|
+ yField: 'value',
|
|
|
+ xAxis:{
|
|
|
+ label:{
|
|
|
+ style:{
|
|
|
+ fill:'#CFDCE5'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis:{
|
|
|
+ value:{
|
|
|
+ label:{
|
|
|
+ style:{
|
|
|
+ fill:'#CFDCE5'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ seriesField: 'name',
|
|
|
+ /** 设置颜色 */
|
|
|
+ //color: ['#1ca9e6', '#f88c24'],
|
|
|
+ /** 设置间距 */
|
|
|
+ // marginRatio: 0.1,
|
|
|
+ label: {
|
|
|
+ // 可手动配置 label 数据标签位置
|
|
|
+ position: 'top', // 'top', 'middle', 'bottom'
|
|
|
+ offsetY:12,
|
|
|
+ // 可配置附加的布局方法
|
|
|
+ layout: [
|
|
|
+ // 数据标签防遮挡
|
|
|
+ { type: 'interval-hide-overlap' },
|
|
|
+ ],
|
|
|
+ style: {
|
|
|
+ fill: '#CFDCE5',
|
|
|
+ opacity: 0.9,
|
|
|
+ fontSize:12
|
|
|
+ },
|
|
|
+ formatter: (datum) =>{
|
|
|
+ console.log(datum.value)
|
|
|
+ return '¥' + this.tool.formatAmount(datum.value,2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ formatter: (datum) => {
|
|
|
+ console.log(datum.value)
|
|
|
+ return {
|
|
|
+ name:datum.name,
|
|
|
+ value:'¥' + this.tool.formatAmount(datum.value,2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend:{
|
|
|
+ itemName:{
|
|
|
+ style:{
|
|
|
+ fill:'#CFDCE5'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ interactions: [{ type: 'element-highlight-by-x' }],
|
|
|
+ });
|
|
|
+ this.chartMap.on('element:click',(evt) => {
|
|
|
+ this.$emit('clickChart',evt.data.data.signdate_due)
|
|
|
+ })
|
|
|
+ this.chartMap.render()
|
|
|
+ }else {
|
|
|
+ this.chartMap.changeData(this.chartMapData)
|
|
|
+ }
|
|
|
},
|
|
|
dataChange(val){
|
|
|
if (val == '1'){
|
|
|
@@ -149,6 +382,30 @@ export default {
|
|
|
text-transform: none;
|
|
|
margin: auto;
|
|
|
}
|
|
|
+.justify-style-left{
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+}
|
|
|
+.icon {
|
|
|
+ width: 0.313vw;
|
|
|
+ height: 0.938vw;
|
|
|
+ background: #E6F4FF;
|
|
|
+ border-radius: 0.104vw 0.104vw 0.104vw 0.104vw;
|
|
|
+}
|
|
|
+.title{
|
|
|
+ /*width: 7.350vw;*/
|
|
|
+ height: 1.615vw;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 1.250vw;
|
|
|
+ color: #E6F4FF;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 0.9vw;
|
|
|
+ vertical-align: middle;
|
|
|
+}
|
|
|
+.inline-left{
|
|
|
+ margin-left: 1.042vw;
|
|
|
+}
|
|
|
/deep/ .el-checkbox__label {
|
|
|
display: inline-block;
|
|
|
padding-left: 0.521vw;
|
|
|
@@ -167,5 +424,21 @@ export default {
|
|
|
/deep/ .panel .el-checkbox__input.is-checked+.el-checkbox__label{
|
|
|
color: #E6F4FF !important;
|
|
|
}
|
|
|
+.scroll-container {
|
|
|
+ max-height: 28.345vw;
|
|
|
+ min-height:28.345vw;
|
|
|
+ overflow: auto
|
|
|
+}
|
|
|
+::v-deep .scroll-container::-webkit-scrollbar {
|
|
|
+ width: 10px; /* 定义滚动条宽度 */
|
|
|
+}
|
|
|
+::v-deep .scroll-container::-webkit-scrollbar-track {
|
|
|
+ background: #021c3b;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
|
|
|
+::v-deep .scroll-container::-webkit-scrollbar-thumb {
|
|
|
+ background: #efefef;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
</style>
|