|
|
@@ -4,20 +4,28 @@
|
|
|
<template slot="content">
|
|
|
<div style="display: flex;justify-content: space-between">
|
|
|
<div>
|
|
|
- <el-checkbox v-model="param.content.where.unfinish">包含失败、结案项目</el-checkbox>
|
|
|
+ <el-checkbox v-model="param.content.where.unfinish" true-label="0" false-label="1" @change="listData">包含失败、结案项目</el-checkbox>
|
|
|
</div>
|
|
|
- <div>
|
|
|
- <el-select v-model="param.content.dateType" class="inline-16" size="small" @change="listData" :popper-append-to-body="false">
|
|
|
- <el-option :label="$t('全部')" value="全部"></el-option>
|
|
|
- <el-option :label="$t('本年')" value="本年"></el-option>
|
|
|
- <el-option :label="$t('本季')" value="本季"></el-option>
|
|
|
- <el-option :label="$t('本月')" value="本月"></el-option>
|
|
|
- <el-option :label="$t('去年')" value="去年"></el-option>
|
|
|
+ <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">
|
|
|
+ <el-option :label="$t('全部')" value="99"></el-option>
|
|
|
+ <el-option :label="$t('近一年')" value="1"></el-option>
|
|
|
+ <el-option :label="$t('近九个月')" value="2"></el-option>
|
|
|
+ <el-option :label="$t('近六个月')" value="3"></el-option>
|
|
|
+ <el-option :label="$t('近三个月')" value="4"></el-option>
|
|
|
</el-select>
|
|
|
+ <div class="line-style inline-16"></div>
|
|
|
+ <div class="inline-16">
|
|
|
+ <datePicker ref="startRef" type="date" @selectTime="begDateChange" format="yyyy-MM-dd" value_format="yyyy-MM-dd"></datePicker>
|
|
|
+ </div>
|
|
|
+ <div class="title-span-font inline-16">至</div>
|
|
|
+ <div>
|
|
|
+ <datePicker ref="endRef" type="date" @selectTime="endDateChange" format="yyyy-MM-dd" value_format="yyyy-MM-dd"></datePicker>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <funnelBox style="margin-top: 0.625vw;" v-for="(item,index) in colorSet" :key="item.index" :width="width - (index * 1.042)" :background="item"></funnelBox>
|
|
|
+ <funnelBox style="margin-top: 0.625vw;" v-for="(item,index) in list" :key="item.index" :width="width - (index * 1.042)" :data="item"></funnelBox>
|
|
|
</div>
|
|
|
</template>
|
|
|
</borderTemplate>
|
|
|
@@ -27,20 +35,23 @@
|
|
|
<script>
|
|
|
import borderTemplate from '../components/borderTemplate'
|
|
|
import funnelBox from "../components/funnelBox";
|
|
|
+import datePicker from "../components/datePicker";
|
|
|
export default {
|
|
|
name: "salesFunnel",
|
|
|
- components:{borderTemplate,funnelBox},
|
|
|
+ components:{borderTemplate,funnelBox,datePicker},
|
|
|
data(){
|
|
|
return {
|
|
|
param:{
|
|
|
id:20230630151504,
|
|
|
content:{
|
|
|
dataid:'',
|
|
|
- dateType:'',
|
|
|
+ dateType:'99',
|
|
|
type:"",
|
|
|
where:{
|
|
|
isleave:'1',
|
|
|
- unfinish:''
|
|
|
+ unfinish:'1',
|
|
|
+ begdate:"",
|
|
|
+ enddate:"",
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -50,14 +61,119 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
- async listData(){
|
|
|
+ async listData(val){
|
|
|
const res = await this.$api.requested(this.param)
|
|
|
- this.list = res.data
|
|
|
+ this.list = []
|
|
|
+ this.list = res.data.map((item,index)=>{
|
|
|
+ return{
|
|
|
+ "stagename":item.stagename,
|
|
|
+ "color":this.colorSet[index],
|
|
|
+ "dealamount":item.dealamount,
|
|
|
+ "signamount_due":item.signamount_due,
|
|
|
+ "projectqty":item.projectqty,
|
|
|
+ "sequence1":item.sequence1,
|
|
|
+ "zhl":item.zhl? Math.round((item.zhl * 100)*100)/100 + '%':'--'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.list.pop()
|
|
|
+ if (val) {
|
|
|
+ this.dataChange(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dataChange(val){
|
|
|
+ if (val == '1'){
|
|
|
+ let currentDate = new Date(); // 获取当前日期
|
|
|
+ let startDate = new Date(currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate() + 1); // 计算起始日期
|
|
|
+ let endDate = currentDate; // 结束日期为当前日期
|
|
|
+ // this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
|
|
|
+ this.$refs.startRef.value = startDate.toISOString().split('T')[0]
|
|
|
+ this.$refs.endRef.value = endDate.toISOString().split('T')[0]
|
|
|
+ }else if (val == '2'){
|
|
|
+ let currentDate = new Date(); // 获取当前日期
|
|
|
+ let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 9, currentDate.getDate() + 1); // 计算起始日期
|
|
|
+ let endDate = currentDate; // 结束日期为当前日期
|
|
|
+ // this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
|
|
|
+ this.$refs.startRef.value = startDate.toISOString().split('T')[0]
|
|
|
+ this.$refs.endRef.value = endDate.toISOString().split('T')[0]
|
|
|
+ }else if (val == '3'){
|
|
|
+ let currentDate = new Date(); // 获取当前日期
|
|
|
+ let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 6, currentDate.getDate() + 1); // 计算起始日期
|
|
|
+ let endDate = currentDate; // 结束日期为当前日期
|
|
|
+ // this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
|
|
|
+ this.$refs.startRef.value = startDate.toISOString().split('T')[0]
|
|
|
+ this.$refs.endRef.value = endDate.toISOString().split('T')[0]
|
|
|
+ }else if (val == '4'){
|
|
|
+ let currentDate = new Date(); // 获取当前日期
|
|
|
+ let startDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 3, currentDate.getDate() + 1); // 计算起始日期
|
|
|
+ let endDate = currentDate; // 结束日期为当前日期
|
|
|
+ // this.dateSelect = [startDate.toISOString().split('T')[0],endDate.toISOString().split('T')[0]]
|
|
|
+ this.$refs.startRef.value = startDate.toISOString().split('T')[0]
|
|
|
+ this.$refs.endRef.value = endDate.toISOString().split('T')[0]
|
|
|
+ }else if (val == '99'){
|
|
|
+ // this.dateSelect = []
|
|
|
+ this.$refs.startRef.value = ''
|
|
|
+ this.$refs.endRef.value = ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ begDateChange(val){
|
|
|
+ this.param.content.dateType = ''
|
|
|
+ this.param.content.where.begdate = val
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ endDateChange(val){
|
|
|
+ this.param.content.dateType = ''
|
|
|
+ this.param.content.where.enddate = val
|
|
|
+ this.listData()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+.line-style{
|
|
|
+ width: 0.000vw;
|
|
|
+ height: 0.625vw;
|
|
|
+ border: 0.052vw solid #CFDCE5;
|
|
|
+ line-height: 0.625vw;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+.title-span-font{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 0.625vw;
|
|
|
+ color: #E6F4FF;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+/deep/ .el-checkbox__label {
|
|
|
+ display: inline-block;
|
|
|
+ padding-left: 0.521vw;
|
|
|
+ line-height: 0.990vw;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 0.729vw;
|
|
|
+ color: #E6F4FF;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+}
|
|
|
+/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
|
|
+ color: #E6F4FF;
|
|
|
+}
|
|
|
+/*/deep/ .el-checkbox__inner {*/
|
|
|
+/* display: inline-block;*/
|
|
|
+/* position: relative;*/
|
|
|
+/* border: 1px solid #dcdfe6;*/
|
|
|
+/* border-radius: 2px;*/
|
|
|
+/* box-sizing: border-box;*/
|
|
|
+/* width: 24px;*/
|
|
|
+/* height: 24px;*/
|
|
|
+/* background-color: #fff;*/
|
|
|
+/* z-index: 1;*/
|
|
|
+/* transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);*/
|
|
|
+/*}*/
|
|
|
|
|
|
</style>
|
qymljy