销售漏斗新增，预计签约金额合计、预计成交金额合计

src/views/mediaStatistics/modules/futureTwelveMonths.vue

@@ -14,10 +14,50 @@
           </el-select>
         </div>
       </template>
-      <template slot="charts">
+      <template slot="content">
+        <div class="previous-border-class" v-for="item in dataBoxData" :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" style="white-space: pre">
+                  {{
+                    $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">{{item.value}}</span>
+                <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit)}}</span>
+              </div>
+            </div>
+          </div>
+        </div>
         <div ref="chartRef" style="height: 220px;">
         </div>
       </template>
+      <template slot="charts">
+
+      </template>
     </boxBorder>
   </div>
 </template>
@@ -27,6 +67,7 @@ import boxBorder from './boxBorder'
 import {Column} from "@antv/g2plot";
 export default {
   name: "futureTwelveMonths",
+  props:['dataBoxData'],
   components:{
     boxBorder
   },
@@ -63,7 +104,7 @@ export default {
       })
       console.log(this.chartMapData,'chartMapData')
       console.log(this.$refs.selectRef.$el.clientHeight,'高度&&&&&&&高度')
-      this.height = 282
+      this.height = 352
       this.height = this.height + (this.$refs.selectRef.$el.clientHeight -32)
       if (init){
         this.chartMap = new Column(this.$refs.chartRef,{
@@ -137,5 +178,50 @@ export default {
 </script>
 
 <style scoped>
-
+.previous-border-class{
+  width: 28%;
+  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

@@ -91,7 +91,7 @@
     <div v-if="siteid == 'HY' || siteid == 'YOSTEST1'">
       <p class="title">{{$t(`项目预计成交分析`)}}</p>
       <previousTwelveMonths :data="previousData"></previousTwelveMonths>
-      <futureTwelveMonths ref="futureTwelveMonthsRef" style="margin-top: 15px" @selectStage="selectStage"></futureTwelveMonths>
+      <futureTwelveMonths ref="futureTwelveMonthsRef" style="margin-top: 15px" @selectStage="selectStage" :dataBoxData="dataBoxData"></futureTwelveMonths>
     </div>
     <div style="margin-top: 40px">
       <p class="title">{{projectTile}}</p>
@@ -263,7 +263,8 @@ export default {
             "isleave":""
           }
         }
-      }
+      },
+      dataBoxData:[]
     }
   },
   methods:{
@@ -921,6 +922,22 @@ export default {
             color:'#E6A23C'
           },
         ]
+        this.dataBoxData = [
+          {
+            title:'预计签约金额合计',
+            value:this.tool.formatAmount(this.tool.unitConversion(res.data.sumsignamount_due,10000),2),
+            unit:'万元',
+            description:'合计未来12个月的项目预计签约金额',
+            color: '#3874F6'
+          },
+          {
+            title:'预计成交金额合计',
+            value:this.tool.formatAmount(this.tool.unitConversion(res.data.sumdealamount_due,10000),2),
+            unit:'万元',
+            description:'合计未来12个月的项目预计成交金额',
+            color: '#E6A23C'
+          },
+        ]
         this.futreData = res.data.array
         this.$refs.futureTwelveMonthsRef.chartData(init,this.futreData)
       }