业务数据大屏调整

src/HManagement/serviceDataScreen/components/funnelBox.vue

@@ -12,11 +12,17 @@
         </div>
         <div class="box-margin-top">
           <span class="box-funnel-title-span1">{{$t(`预计签约`)}}：</span>
-          <span class="box-funnel-title-span2">{{data.signamount_due}}{{$t(`万元`)}}</span>
+          <span class="box-funnel-title-span2">
+            <span v-if="data.signamount_due > 10000">{{tool.formatAmount((data.signamount_due / 10000),2)}}{{$t(`亿元`)}}</span>
+            <span v-else>{{data.signamount_due}}{{$t(`万元`)}}</span>
+          </span>
         </div>
         <div class="box-margin-top">
           <span class="box-funnel-title-span1">{{$t(`项目成交`)}}：</span>
-          <span class="box-funnel-title-span3">{{data.dealamount}}{{$t(`万元`)}}</span>
+          <span class="box-funnel-title-span3">
+            <span v-if="data.dealamount > 10000">{{tool.formatAmount((data.dealamount / 10000),2)}}{{$t(`亿元`)}}</span>
+            <span v-else>{{data.dealamount}}{{$t(`万元`)}}</span>
+          </span>
         </div>
       </div>
       <div class="box-funnel-style" :style="{'width': width + 'vw','background':data.color}">

src/HManagement/serviceDataScreen/modules/salesFunnel.vue

@@ -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">
@@ -55,14 +55,72 @@
             </el-popover>
           </div>
         </div>
-        <div class="justify-style-left">
+        <div class="justify-style-left" style="margin-top: 0.325vw">
           <div>
-            <div>33333</div>
-            <div>{{$t(`预计签约金额合计`)}}</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>
-            <div>33333</div>
-            <div>{{$t(`预计签约金额合计`)}}</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: 9.856vw;">
           </div>
         </div>
       </template>
@@ -74,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},
@@ -95,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)=>{
@@ -117,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'){