销售漏斗海盐站点新增项目预计成交统计

src/template/chartG2Template/Column.vue

@@ -0,0 +1,60 @@
+<template>
+  <div :ref="chartRef" :style="{'width':widthChart,'height':heightChart}"></div>
+</template>
+
+<script>
+import { Column } from '@antv/g2plot';
+export default {
+  name: "Column", //柱状图
+  props:{
+    chartRef:String,
+    param:Object,
+    widthChart:Number,
+    heightChart:Number
+  },
+  data(){
+    return {
+      chartMap:[],
+      chartMapData:[]
+    }
+  },
+  methods:{
+    async chartData(init){
+      const res = await this.$api.requested(this.param)
+      this.chartMapData = res.data
+      this.chartMapData = res.data.map(item=>{
+        return {
+          "signamount_due":this.tool.unitConversion(item.signamount_due,10000),
+          "signdate_due":item.signdate_due
+        }
+      })
+      if (init) {
+        this.chartMap = new Column(this.$refs[this.chartRef],{
+          data:this.chartMapData,
+          xField: 'signdate_due',
+          yField: 'signamount_due',
+          label:{
+            position: 'top',
+            offsetY:12,
+            style: {
+              fill: '#444444',
+              opacity: 0.9,
+              fontSize:12
+            },
+            formatter: (datum) =>{
+              return '¥' + this.tool.formatAmount(datum.signamount_due,2)
+            }
+          }
+        })
+        this.chartMap.render();
+      }else {
+        this.chartMap.changeData(this.chartMapData)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/mediaStatistics/modules/salesfunnel.vue

@@ -88,14 +88,64 @@
         </el-col>
       </el-row>
     </div>
-<!--    <div>-->
-<!--      <p class="title">{{$t(`项目预计成交统计`)}}</p>-->
-<!--      <div style="display: flex;justify-content: space-between">-->
-<!--        <div></div>-->
-<!--        <div></div>-->
-<!--      </div>-->
-<!--    </div>-->
-    <div>
+    <div v-if="siteid == 'HY'">
+      <p class="title">{{$t(`项目预计成交统计`)}}</p>
+      <div style="display: flex;justify-content: space-between">
+        <div class="statistics-box">
+          <div style="margin: 10px 20px 10px 20px">
+            <div class="statistics-box-title">
+              {{$t(`前12个月总数据`)}}
+            </div>
+            <div class="title-margin-15">
+              <div class="title-font-style1">
+                {{$t(`准确率`)}}
+              </div>
+              <div class="title-margin-5 title-font-style2">
+                {{Math.round((previousYearData.dealaccuracyrate * 100)*100)/100}}%
+              </div>
+            </div>
+            <div class="title-margin-15">
+              <div class="title-font-style1">
+                {{$t(`偏差金额`)}}
+              </div>
+              <div class="title-margin-5 title-font-style2">
+                {{tool.formatAmount(tool.unitConversion(previousYearData.totaldeviationamount,10000),2)}}
+                <span class="title-font-style4">{{$t(``)}}万元</span>
+              </div>
+            </div>
+            <div class="title-margin-15">
+              <div class="title-font-style1">
+                {{$t(`项目成交金额`)}}
+              </div>
+              <div class="title-margin-5 title-font-style3">
+                {{tool.formatAmount(tool.unitConversion(previousYearData.totaldealamount,10000),2)}}
+                <span>{{$t(`万元`)}}</span>
+              </div>
+            </div>
+            <div class="title-margin-15">
+              <div class="title-font-style1">
+                {{$t(`预计签约金额`)}}
+              </div>
+              <div class="title-margin-5 title-font-style3">
+                {{tool.formatAmount(tool.unitConversion(previousYearData.totalsignamount_due,10000),2)}}
+                <span>{{$t(`万元`)}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="screen-box">
+          <div style="margin: 20px">
+            <div class="title-font-style5">
+              {{$t(`未来12月项目预计签约金额统计（单位：万）`)}}
+            </div>
+            <div style="margin-top: 10px">
+              <chartTemplate ref="chartColumn" chartRef="signChart" :param="paramChart" height-chart="232px" width-chart="100%"></chartTemplate>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="margin-top: 20px">
       <p class="title">{{projectTile}}</p>
       <tableTemp :layout="tablecols" :data="projectList" :opwidth="200" :custom="true" :height="tableHieght">
         <template v-slot:customcol="scope">
@@ -173,8 +223,9 @@ import tableTemp from '@/components/table/index8'
 import tableNewTemp from '@/components/table/index10'
 import { Funnel,G2 } from '@antv/g2plot';
 const G = G2.getEngine('canvas');
+import chartTemplate from '@/template/chartG2Template/Column'
 export default {
-  components:{tableTemp,tableNewTemp},
+  components:{tableTemp,tableNewTemp,chartTemplate},
   data () {
     return {
       chartPie:null,
@@ -247,7 +298,20 @@ export default {
       tradefield:'',
       isleave:'1',
       tradefields:[],
-      unfinish:'1'
+      unfinish:'1',
+      previousYearData:{},
+      paramChart:{
+        "id": 20241028162004,
+        "content": {
+          "type": "0",
+          "dataid": "0",
+          "where": {
+            "tradefield": "",
+            "isleave":""
+          }
+        }
+      },
+      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid
     }
   },
   methods:{
@@ -262,7 +326,16 @@ export default {
       const res = await this.$api.requested(this.dataParam)
       this.tableData = res.data
       sessionStorage.setItem('flagIndex',res.data.length)
+      if (this.siteid == 'HY'){
+        this.paramChart.content.type = this.dataParam.content.type
+        this.paramChart.content.dataid = this.dataParam.content.dataid
+        this.paramChart.content.where.tradefield = this.dataParam.content.where.tradefield
+        this.paramChart.content.where.isleave = this.dataParam.content.where.isleave
+        this.$refs.chartColumn.chartData(true)
+        this.previousYear()
+      }
       this.renderPie()
+
     },
     async personData(){
       const res = await this.$api.requested(this.depmentParam)
@@ -802,6 +875,14 @@ export default {
       this.projectParam.content.dataid = this.dataParam.content.dataid
       /*this.projectParam.content.dateType = this.dataParam.content.dateType*/
       this.projectParam.content.sa_projstagemagid = this.sa_projstagemagid
+      if (this.siteid == 'HY'){
+        this.paramChart.content.type = this.dataParam.content.type
+        this.paramChart.content.dataid = this.dataParam.content.dataid
+        this.paramChart.content.where.tradefield = this.dataParam.content.where.tradefield
+        this.paramChart.content.where.isleave = this.dataParam.content.where.isleave
+        this.$refs.chartColumn.chartData(false)
+        this.previousYear()
+      }
       const res = await this.$api.requested(this.projectParam)
       this.projectList = res.data
       this.total = res.total
@@ -820,6 +901,26 @@ export default {
     async queryTradeField(){
       const res = await this.$store.dispatch('optiontypeselect','tradefield')
       this.tradefields = res.data
+    },
+    /*前12个月数据*/
+    async previousYear(){
+      let param = {
+        "id": 20241028162104,
+        "content": {
+          "type": "0",
+          "dataid": "0",
+          "where": {
+            "tradefield": "",
+            "isleave":""
+          }
+        }
+      }
+      param.content.type = this.dataParam.content.type
+      param.content.dataid = this.dataParam.content.dataid
+      param.content.where.tradefield = this.dataParam.content.where.tradefield
+      param.content.where.isleave = this.dataParam.content.where.isleave
+      const res = await this.$api.requested(param)
+      this.previousYearData = res.data
     }
   },
   mounted () {
@@ -852,10 +953,80 @@ export default {
  /* height:calc(100vh)*/
 }
 .statistics-box{
-  width: 12.500vw;
-  height: 14.688vw;
+  width: 20%;
+  height: 302px;
   background: #FFFFFF;
-  box-shadow: 0.000vw 0.052vw 0.313vw 0.052vw rgba(0,0,0,0.16);
-  border-radius: 0.521vw 0.521vw 0.521vw 0.521vw;
+  box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.16);
+  border-radius: 10px 10px 10px 10px;
+  box-sizing: border-box;
+}
+.statistics-box .statistics-box-title{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 16px;
+  color: #333333;
+  line-height: 22px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.screen-box{
+  width: 78%;
+  height: 302px;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.16);
+  border-radius: 5px 5px 5px 5px;
+  box-sizing: border-box;
+}
+.title-margin-15{
+  margin-top: 15px;
+}
+.title-margin-5{
+  margin-top: 5px;
+}
+.title-font-style1{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #888888;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.title-font-style2{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 18px;
+  color: #009966;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.title-font-style3{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #003399;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.title-font-style4{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 12px;
+  color: #009966;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.title-font-style5{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #333333;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
 }
 </style>