Merge branch 'greenUrgent' into allTestUrgent

src/style/style.css

@@ -315,3 +315,28 @@ ul{
   display: flex;
   justify-content: space-between;
 }
+.font-color-style-black{
+  color: #333333;
+}
+.font-color-style-green{
+  color: #009966;
+}
+.font-color-style-gray{
+  color: #888888;
+}
+.font-color-style-yellow{
+  color: #E6A23C;
+}
+.font-color-style-blue{
+  color: #3874F6;
+}
+.font-class-bold{
+  font-weight: bold;
+}
+.mt-5{
+  margin-bottom: 5px;
+}
+.justify-div-position{
+  display: flex;
+  justify-content: left;
+}

src/views/mediaStatistics/modules/boxBorder.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="box-border-style" :style="{height:height}">
+    <div :style="{padding:class1}">
+      <div class="font-color-style-black font-class-bold mt-5">{{$t(title)}}</div>
+      <slot name="content"></slot>
+      <slot name="charts"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "boxBorder",
+  props:{
+    title:String,
+    class1:Object,
+    height:String
+  }
+}
+</script>
+
+<style scoped>
+  .box-border-style{
+    width: 100%;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 6px 1px rgba(0,0,0,0.16);
+    border-radius: 5px 5px 5px 5px;
+  }
+  .box-border-padding{
+    padding: 20px 20px;
+  }
+</style>

src/views/mediaStatistics/modules/futureTwelveMonths.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <boxBorder title="未来12月项目预计签约金额/预计成交金额分析" class1="20px 20px" height="282px">
+      <template slot="charts">
+        <el-tooltip effect="dark" placement="top-start" style="margin-top: 3px;margin-left:240px;position: relative;z-index: 50">
+          <div slot="content">
+            {{
+              $t(
+                  '预计签约金额 × 项目成交率'
+              )
+            }}
+          </div>
+          <!--        <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
+          <img
+              width="14px"
+              height="14px"
+              src="../../../assets/icons/prompt_icon.svg"
+          />
+        </el-tooltip>
+        <div ref="chartRef" style="height: 220px;margin-top: -25px;position: relative;z-index: 20">
+        </div>
+      </template>
+    </boxBorder>
+  </div>
+</template>
+
+<script>
+import boxBorder from './boxBorder'
+import {Column} from "@antv/g2plot";
+export default {
+  name: "futureTwelveMonths",
+  components:{
+    boxBorder
+  },
+  data(){
+    return {
+      chartMap:[],
+      chartMapData:[],
+    }
+  },
+  methods:{
+    chartData(init,data){
+      let index = 0
+      let indexNew = 0
+      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('预计签约金额')
+          }
+          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('预计成交金额')
+          }
+          indexNew = indexNew + 1
+          index = index + 1
+        }
+      })
+      console.log(this.chartMapData,'chartMapData')
+      if (init){
+        this.chartMap = new Column(this.$refs.chartRef,{
+          color:['#3874F6','#F29C37'],
+          data:this.chartMapData,
+          isGroup: true,
+          xField: 'signdate_due',
+          yField: 'value',
+          seriesField: 'name',
+          /** 设置颜色 */
+          //color: ['#1ca9e6', '#f88c24'],
+          /** 设置间距 */
+          // marginRatio: 0.1,
+          label: {
+            // 可手动配置 label 数据标签位置
+            position: 'top', // 'top', 'middle', 'bottom'
+            offsetY:12,
+            // 可配置附加的布局方法
+            layout: [
+              // 数据标签防遮挡
+              { type: 'interval-hide-overlap' },
+            ],
+            style: {
+              fill: '#444444',
+              opacity: 0.9,
+              fontSize:12
+            },
+            formatter: (datum) =>{
+              return '¥' + this.tool.formatAmount(datum.value,2)
+            }
+          },
+          tooltip: {
+            formatter: (datum) => {
+              return {
+                name:datum.name,
+                value:'¥' + this.tool.formatAmount(datum.value,2)
+              }
+            }
+          }
+        });
+        this.chartMap.render()
+      }else {
+        this.chartMap.changeData(this.chartMapData)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/mediaStatistics/modules/previousTwelveMonths.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <boxBorder title="前12个月成交项目指标" class1="10px 20px" height="260px">
+      <template slot="content">
+        <div class="previous-border-class" v-for="item in data" :key="item.index">
+          <div class="previous-style-padding">
+            <div class="justify-div-position">
+              <div class="previous-style-circle" :style="{borderColor:item.color}"></div>
+              <div class="previous-style-font1">{{$t(item.title)}}</div>
+              <el-tooltip effect="dark" placement="top-start" style="margin-top: 3px">
+                <div slot="content">
+                  {{
+                    $t(
+                        item.description
+                    )
+                  }}
+                </div>
+                <!--        <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
+                <img
+                    width="14px"
+                    height="14px"
+                    src="../../../assets/icons/prompt_icon.svg"
+                />
+              </el-tooltip>
+            </div>
+            <div class="previous-style-font2">
+              <div v-if="item.title1">
+                <span class="font-color-style-gray previous-style-font4 previous-right-5">{{$t(item.title1)}}</span>
+                <span class="font-color-style-green previous-style-font3 font-class-bold">{{item.value1}}</span>
+                <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit1)}}</span>
+                <span class="font-color-style-gray previous-style-font4 previous-left-26 previous-right-5">{{$t(item.title2)}}</span>
+                <span class="font-color-style-green previous-style-font3 font-class-bold">{{item.value2}}</span>
+                <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit2)}}</span>
+              </div>
+              <div v-else>
+                <span class="font-color-style-green previous-style-font3 font-class-bold">{{$t(item.value)}}</span>
+                <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit)}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </boxBorder>
+  </div>
+</template>
+
+<script>
+import boxBorder from "./boxBorder";
+export default {
+  name: "previousTwelveMonths",
+  props:{
+    data:Array
+  },
+  data(){
+    return {
+    }
+  },
+  components:{boxBorder}
+}
+</script>
+
+<style scoped>
+ .previous-border-class{
+   width: 30%;
+   height: 68px;
+   float: left;
+   margin-right: 40px;
+ }
+ .previous-style-padding{
+   padding: 10px 20px;
+ }
+ .previous-style-circle{
+   width: 5px;
+   height: 5px;
+   background: #FFFFFF;
+   border: 2px solid;
+   line-height: 19px;
+   border-radius: 8px;
+   margin-top: 5px;
+   margin-right: 5px;
+ }
+ .previous-style-font1{
+   font-family: Microsoft YaHei, Microsoft YaHei;
+   font-weight: 400;
+   font-size: 14px;
+   color: #888888;
+   line-height: 19px;
+   text-align: left;
+   font-style: normal;
+   text-transform: none;
+   margin-right: 5px;
+ }
+ .previous-style-font2{
+   margin-top: 5px;
+   margin-left: 15px;
+ }
+ .previous-style-font3{
+   font-size: 18px;
+ }
+ .previous-style-font4{
+   font-size: 14px;
+ }
+ .previous-right-5{
+   margin-right: 5px;
+ }
+ .previous-left-26{
+   margin-left: 26px;
+ }
+</style>

src/views/mediaStatistics/modules/salesfunnel.vue

@@ -89,153 +89,9 @@
       </el-row>
     </div>
     <div v-if="siteid == 'HY' || siteid == 'YOSTEST1'">
-      <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个月成交项目数据`)}}
-              <el-tooltip effect="dark" placement="top-start">
-                <div slot="content">
-                  {{
-                    $t(
-                        "统计当前月份之前（不包含当前月份）的12个月的（已成交、结案状态）的项目预计成交准确率、偏差金额"
-                    )
-                  }}
-                </div>
-                <!--        <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
-                <img
-                    width="14px"
-                    height="14px"
-                    src="../../../assets/icons/prompt_icon.svg"
-                />
-              </el-tooltip>
-            </div>
-            <div class="justify-between-flex-style">
-              <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>
-
-        <div class="statistics-box">
-          <div style="margin: 10px 20px 10px 20px">
-            <div class="statistics-box-title">
-              {{$t(`前12个月项目总数据`)}}
-              <el-tooltip effect="dark" placement="top-start">
-                <div slot="content">
-                  {{
-                    $t(
-                        "统计当前月份之前（不包含当前月份）的12个月的（已成交、结案状态）的项目预计成交准确率、偏差金额"
-                    )
-                  }}
-                </div>
-                <!--        <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
-                <img
-                    width="14px"
-                    height="14px"
-                    src="../../../assets/icons/prompt_icon.svg"
-                />
-              </el-tooltip>
-            </div>
-            <div class="justify-between-flex-style">
-              <div class="title-margin-15">
-                <div class="title-font-style1">
-                  {{$t(`准确率`)}}
-                </div>
-                <div class="title-margin-5 title-font-style2">
-                  {{Math.round((previousYearAllData.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(previousYearAllData.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(previousYearAllData.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(previousYearAllData.totalsignamount_due,10000),2)}}
-                  <span>{{$t(`万元`)}}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="screen-box">
-        <div style="margin: 20px">
-          <div class="title-font-style5">
-            {{$t(`未来12月项目预计签约金额统计（单位：万）`)}}
-            <el-tooltip effect="dark" placement="top-start">
-              <div slot="content">
-                {{
-                  $t(
-                      "统计当前月份往后（包含当前月份）的12个月的每个月份的（跟进中状态）的项目预计签约金额"
-                  )
-                }}
-              </div>
-              <!--        <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
-              <img
-                  width="14px"
-                  height="14px"
-                  src="../../../assets/icons/prompt_icon.svg"
-              />
-            </el-tooltip>
-          </div>
-          <div style="margin-top: 10px">
-            <chartTemplate ref="chartColumn" chartRef="signChart" :param="paramChart" height-chart="232px" width-chart="100%"></chartTemplate>
-          </div>
-        </div>
-      </div>
+      <p class="title">{{$t(`项目预计成交分析`)}}</p>
+      <previousTwelveMonths :data="previousData"></previousTwelveMonths>
+      <futureTwelveMonths ref="futureTwelveMonthsRef" style="margin-top: 15px"></futureTwelveMonths>
     </div>
     <div style="margin-top: 40px">
       <p class="title">{{projectTile}}</p>
@@ -317,8 +173,10 @@ import tableNewTemp from '@/components/table/index10'
 import { Funnel,G2 } from '@antv/g2plot';
 const G = G2.getEngine('canvas');
 import chartTemplate from '@/template/chartG2Template/Column'
+import previousTwelveMonths from './previousTwelveMonths'
+import futureTwelveMonths from './futureTwelveMonths'
 export default {
-  components:{tableTemp,tableNewTemp,chartTemplate},
+  components:{tableTemp,tableNewTemp,chartTemplate,previousTwelveMonths,futureTwelveMonths},
   data () {
     return {
       chartPie:null,
@@ -392,20 +250,9 @@ export default {
       isleave:'1',
       tradefields:[],
       unfinish:'1',
-      previousYearData:{},
-      previousYearAllData:{},
-      paramChart:{
-        "id": 20241028162004,
-        "content": {
-          "type": "0",
-          "dataid": "0",
-          "where": {
-            "tradefield": "",
-            "isleave":""
-          }
-        }
-      },
-      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid
+      siteid:JSON.parse(sessionStorage.getItem('active_account')).siteid,
+      previousData:[],
+      futreData:[]
     }
   },
   methods:{
@@ -421,12 +268,7 @@ export default {
       this.tableData = res.data
       sessionStorage.setItem('flagIndex',res.data.length)
       if (this.siteid == 'HY' || this.siteid == 'YOSTEST1'){
-        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.expectedTransaction(true)
       }
       this.renderPie()
 
@@ -963,21 +805,15 @@ export default {
       this.flagIndex = dataList.length
       this.chartPie.changeData(res.data)
       dataList.splice(dataList.length-1)
+      if (this.siteid == 'HY' || this.siteid == 'YOSTEST1'){
+        this.expectedTransaction(false)
+      }
     },
     async getProjectList(){
       this.projectParam.content.type = this.dataParam.content.type
       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.siteid == 'YOSTEST1'){
-        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()
-        this.previousAllYear()
-      }
       const res = await this.$api.requested(this.projectParam)
       this.projectList = res.data
       this.total = res.total
@@ -997,8 +833,8 @@ export default {
       const res = await this.$store.dispatch('optiontypeselect','tradefield')
       this.tradefields = res.data
     },
-    /*前12个月项目成交数据*/
-    async previousYear(){
+    /*项目成交数据*/
+    async expectedTransaction(init){
       let param = {
         "id": 20241028162104,
         "content": {
@@ -1015,28 +851,76 @@ export default {
       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
+      console.log(res.data,'数据项目成交')
+      this.previousData = [
+        {
+          title:'成交项目数',
+          value:res.data.dealTotalCount,
+          unit:'个',
+          description:'当前状态为已成交，并且项目成交时间在前12个月（不含当前月）的项目数量',
+          color:'#3874F6'
+        },
+        {
+          title:'预计成交正偏差',
+          title1:'项目',
+          value1:res.data.positiveCount,
+          unit1:'个',
+          title2:'金额',
+          value2:this.tool.formatAmount(this.tool.unitConversion(res.data.positiveOffsetAmount,10000),2),
+          unit2:'万元',
+          description:'依据：每个项目的偏差金额 = 项目成交金额 - 预计签约金额',
+          color:'#E6A23C'
+        },
+        {
+          title:'项目成交金额合计',
+          value:this.tool.formatAmount(this.tool.unitConversion(res.data.dealAmount,10000),2),
+          unit:'万元',
+          description:'合计所有项目成交金额',
+          color: '#009966'
+        },
+        {
+          title:'失败项目数',
+          value:res.data.failTotalCount,
+          unit:'个',
+          description:'当前状态为已失败，并且失败操作时间在前12个月（不含当前月）的项目数量',
+          color:'#3874F6'
+        },
+        {
+          title:'预计成交负偏差',
+          title1:'项目',
+          value1:res.data.negativeCount,
+          unit1:'个',
+          title2:'金额',
+          value2:this.tool.formatAmount(this.tool.unitConversion(res.data.negativeOffsetAmount,10000),2),
+          unit2:'万元',
+          description:'依据：每个项目的偏差金额 = 项目成交金额 - 预计签约金额',
+          color:'#E6A23C'
+        },
+        {
+          title:'预计签约金额合计',
+          value:this.tool.formatAmount(this.tool.unitConversion(res.data.signAmount,10000),2),
+          unit:'万元',
+          description:'合计前12个月（不含当前月）的成交项目的预计签约金额',
+          color: '#009966'
+        },
+        {
+          title:'项目成交率',
+          value:Math.round((res.data.dealRate * 100)*100)/100,
+          unit:'%',
+          description:'成交项目数 ÷ （成交项目数 + 失败项目数）×100%',
+          color:'#3874F6'
+        },
+        {
+          title:'预计成交准确率',
+          value:Math.round((res.data.rightRate * 100)*100)/100,
+          unit:'%',
+          description:'预计成交准确项目数 ÷ 成交项目数 ×100%',
+          color:'#E6A23C'
+        },
+      ]
+      this.futreData = res.data.array
+      this.$refs.futureTwelveMonthsRef.chartData(init,this.futreData)
     },
-    /*前12个月项目总数据*/
-    async previousAllYear(){
-      let param = {
-        "id": 2024112813172602,
-        "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.previousYearAllData = res.data
-    }
   },
   mounted () {
    /* this.renderPie()*/