业务数据大屏完成业务员账户、作业数据、营销费用、应收账款

package-lock.json

@@ -16,7 +16,6 @@
         "@wangeditor/editor": "^5.1.1",
         "@wangeditor/editor-for-vue": "^1.0.1",
         "ant-design-vue": "^1.7.2",
-        "autofit.js": "^3.1.4",
         "axios": "^0.26.0",
         "core-js": "^3.8.3",
         "countup.js": "^2.0.8",
@@ -4543,11 +4542,6 @@
         "node": ">= 4.5.0"
       }
     },
-    "node_modules/autofit.js": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmmirror.com/autofit.js/-/autofit.js-3.1.4.tgz",
-      "integrity": "sha512-SLKn73fHeWsxJZJ5yisCYLvw0U10OLjrcOEWlPHvSRvIcvQHwuSemFtrcoTM+zccwtVWi3dwfJxT282728j9HQ=="
-    },
     "node_modules/autoprefixer": {
       "version": "10.4.2",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.2.tgz",
@@ -20321,11 +20315,6 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
-    "autofit.js": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmmirror.com/autofit.js/-/autofit.js-3.1.4.tgz",
-      "integrity": "sha512-SLKn73fHeWsxJZJ5yisCYLvw0U10OLjrcOEWlPHvSRvIcvQHwuSemFtrcoTM+zccwtVWi3dwfJxT282728j9HQ=="
-    },
     "autoprefixer": {
       "version": "10.4.2",
       "resolved": "https://registry.npmmirror.com/autoprefixer/-/autoprefixer-10.4.2.tgz",

package.json

@@ -17,7 +17,6 @@
     "@wangeditor/editor": "^5.1.1",
     "@wangeditor/editor-for-vue": "^1.0.1",
     "ant-design-vue": "^1.7.2",
-    "autofit.js": "^3.1.4",
     "axios": "^0.26.0",
     "core-js": "^3.8.3",
     "countup.js": "^2.0.8",

src/HManagement/serviceDataScreen/components/borderTemplate.vue

@@ -6,7 +6,7 @@
         <div class="title inline-left">{{$t(title)}}</div>
         <slot name="operation"></slot>
       </div>
-      <div class="detail-title justify-style-right">
+      <div class="detail-title justify-style-right" @click="detailClick">
         <div>{{$t(detailTitle)}}</div>
         <div style="margin-left: 0.260vw"> > </div>
       </div>
@@ -19,13 +19,12 @@
 export default {
   name: "borderTemplate",
   props:["borderBox","title","detailTitle"],
+  methods:{
+    detailClick(){
+      this.$emit('detailClick')
+    }
+  },
   mounted() {
-    // autofit.init({
-    //   dh: 1135,
-    //   dw: 1920,
-    //   el:"body",
-    //   resize: true
-    // })
   }
 }
 </script>
@@ -37,6 +36,7 @@ export default {
     border-radius: 0.208vw 0.208vw 0.208vw 0.208vw;
     border: 0.104vw solid #3D73BA;
     opacity: 0.8;
+    box-sizing: border-box;
   }
   .justify-style-left{
     display: flex;
@@ -51,7 +51,7 @@ export default {
     justify-content: space-between;
   }
   .inline-left{
-    margin-left: 20px;
+    margin-left: 1.042vw;
   }
   .box-content-style{
     padding: 1.042vw;
@@ -63,7 +63,7 @@ export default {
     border-radius: 0.104vw 0.104vw 0.104vw 0.104vw;
   }
   .box-content-style .title{
-    width: 6.250vw;
+    /*width: 7.350vw;*/
     height: 1.615vw;
     font-family: Microsoft YaHei, Microsoft YaHei;
     font-weight: bold;
@@ -74,7 +74,7 @@ export default {
     vertical-align: middle;
   }
   .box-content-style .detail-title{
-    width: 6.333vw;
+    /*width: 8.333vw;*/
     height: 1.094vw;
     font-family: Microsoft YaHei, Microsoft YaHei;
     font-weight: 400;

src/HManagement/serviceDataScreen/components/boxTemplate.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="box-style-border">
+    <div class="content">
+      <div class="amount">{{tool.formatAmount(data,2)}}</div>
+      <div class="justify-style">
+        <div class="title">{{$t(title)}}</div>
+        <div class="icon">¥</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "boxTemplate",
+  props:['data','title']
+}
+</script>
+
+<style scoped>
+.box-style-border{
+  width: 13.958vw;
+  height: 4.688vw;
+  background: #001E41;
+  box-shadow: 0.000vw 0.156vw 0.313vw 0.052vw rgba(0,0,0,0.16);
+  border-radius: 0.313vw 0.313vw 0.313vw 0.313vw;
+  border: 0.052vw solid #CFDCE5;
+  box-sizing: border-box;
+}
+.box-style-border .content {
+  margin: 0.521vw 1.042vw 0.521vw 1.042vw;
+}
+.box-style-border .content .amount {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 1.250vw;
+  color: #6CD2A1;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.justify-style{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.221vw;
+}
+.justify-style .title {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 0.938vw;
+  color: #CFDCE5;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.justify-style .icon {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 1.042vw;
+  color: #6CD2A1;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+</style>

src/HManagement/serviceDataScreen/components/jobData.vue

@@ -1,15 +0,0 @@
-<template>
-  <borderTemplate borderBox="width: 15.104vw;height: 12.500vw;" title="作业数据" detailTitle="查看详情"></borderTemplate>
-</template>
-
-<script>
-import borderTemplate from '../components/borderTemplate'
-export default {
-  name: "jobData",
-  components:{borderTemplate}
-}
-</script>
-
-<style scoped>
-
-</style>

src/HManagement/serviceDataScreen/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bg-img" id="fullScreen" style="box-sizing: border-box">
-    <div style="padding: 0 20px 0 20px">
+    <div style="padding: 0 1.042vw 0 1.042vw">
       <div class="justify-style">
         <div class="select-style">
           <el-cascader :placeholder="$t('部门')"  class="inline-16" ref="selectdep" size="small" v-model="depment" :options="deplist" :append-to-body="false"  placement="bottom"
@@ -35,21 +35,30 @@
       <div>
         <div class="justify-style">
           <!-- 业务员账户 -->
-          <salesmanAccount></salesmanAccount>
+          <salesmanAccount ref="accountRef"></salesmanAccount>
           <!-- 作业数据 -->
-          <jobData></jobData>
+          <jobData ref="jobRef"></jobData>
         </div>
-        <div>
-          <!-- 作业数据 -->
+        <div class="inline-top-20">
+          <!-- 销售面板 -->
           <salesPanel></salesPanel>
         </div>
       </div>
       <div>
         <!-- 销售漏斗 -->
         <salesFunnel></salesFunnel>
+        <div class="justify-style inline-top-20">
+          <!-- 营销费用 -->
+          <marketingExpenses ref="expensesRef"></marketingExpenses>
+          <!-- 营销费用统计 -->
+          <marketingExpenseStatistics></marketingExpenseStatistics>
+        </div>
       </div>
       <div>
-        <accountsReceivable></accountsReceivable>
+        <!-- 应收账款 -->
+        <accountsReceivable ref="receivableRef"></accountsReceivable>
+        <!-- 数据概况 -->
+        <dataProfile class="inline-top-20"></dataProfile>
       </div>
     </div>
     <fullScreen ref="fullRef" class="inline-16" domId="fullScreen" style="visibility: hidden" @backFull="backFull"></fullScreen>
@@ -58,14 +67,17 @@
 
 <script>
 import fullScreen from "@/views/salesData/components/fullScreen";
-import salesmanAccount from './components/salesmanAccount';
-import jobData from './components/jobData'
-import salesPanel from './components/salesPanel'
-import salesFunnel from './components/salesFunnel'
-import accountsReceivable from './components/accountsReceivable'
+import salesmanAccount from './modules/salesmanAccount';
+import jobData from './modules/jobData'
+import salesPanel from './modules/salesPanel'
+import salesFunnel from './modules/salesFunnel'
+import marketingExpenses from './modules/marketingExpenses'
+import marketingExpenseStatistics from './modules/marketingExpenseStatistics'
+import accountsReceivable from './modules/accountsReceivable'
+import dataProfile from './modules/dataProfile'
 export default {
   name: "index",
-  components:{fullScreen,salesmanAccount,jobData,salesPanel,salesFunnel,accountsReceivable},
+  components:{fullScreen,salesmanAccount,jobData,salesPanel,salesFunnel,marketingExpenses,marketingExpenseStatistics,accountsReceivable,dataProfile},
   data(){
     return {
       timer: "", // 定义一个定时器
@@ -103,12 +115,6 @@ export default {
         that.windowWidth = window.fullHeight
       })()
     };
-    autofit.init({
-      dh: 1135,
-      dw: 1920,
-      el:"body",
-      resize: true
-    })
   },
   watch: {
     windowWidth (val) {
@@ -161,7 +167,6 @@ export default {
       const type = this.depment?'1':'0'
       this.person = ''
       const dataid = type == '0'?-1:this.departmentid
-      this.otherModel(dataid,type,this.isleave,'状态')
       this.personData()
     },
     /*获取新的业务员列表*/
@@ -183,6 +188,7 @@ export default {
       this.depment = ''
       this.departmentid = ''
       const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
+      this.queryAllData(userid)
     },
     createMenu (array) {
       var that = this
@@ -240,20 +246,45 @@ export default {
     selectDep(val) {
       if (val.length === 0){
         const userid = JSON.parse(sessionStorage.getItem('active_account')).userid
-        this.otherModel(userid,'0')
+        this.queryAllData(userid)
       }else {
         this.person = ''
         this.dataid = ''
         this.departmentid = val[val.length -1]
-        this.otherModel(this.departmentid,'1',this.isleave)
+        this.queryAllData(this.departmentid)
       }
     },
     selectPerson(val){
       this.depment = ''
       this.departmentid = ''
       this.dataid = val
-      this.otherModel(val,'0',this.isleave)
+      this.queryAllData(val)
     },
+    queryAllData(id){
+      /*业务员账户*/
+      this.$refs.accountRef.param.content.dataid = id
+      this.$refs.accountRef.param.content.type = this.departmentid !== ''?1:0
+      this.$refs.accountRef.param.content.where.isleave = this.isleave
+      this.$refs.accountRef.listData()
+
+      /*作业数据*/
+      this.$refs.jobRef.param.content.dataid = id
+      this.$refs.jobRef.param.content.type = this.departmentid !== ''?1:0
+      this.$refs.jobRef.param.content.where.isleave = this.isleave
+      this.$refs.jobRef.listData()
+
+      /*营销费用*/
+      this.$refs.expensesRef.param.content.dataid = id
+      this.$refs.expensesRef.param.content.type = this.departmentid !== ''?1:0
+      this.$refs.expensesRef.param.content.where.isleave = this.isleave
+      this.$refs.expensesRef.listData()
+
+      /*应收账款*/
+      this.$refs.receivableRef.param.content.dataid = id
+      this.$refs.receivableRef.param.content.type = this.departmentid !== ''?1:0
+      this.$refs.receivableRef.param.content.where.isleave = this.isleave
+      this.$refs.receivableRef.listData()
+    }
   },
   created() {
     this.getTime()
@@ -267,9 +298,6 @@ export default {
 </script>
 
 <style scoped>
-div{
-  box-sizing: border-box;
-}
 .bg-img {
   background: url("../../assets/icons/bgScreen.jpg") no-repeat;
   background-size: 100% 100%;
@@ -325,7 +353,7 @@ div{
 }
 .content-style{
   margin: 1.804vw 1.042vw 1.042vw 1.042vw;
-  border: 0.052vw solid #5daf34;
+  /*border: 0.052vw solid #5daf34;*/
   height: calc(100vh - 7.458vw);
 }
 .inline-left-20{

src/HManagement/serviceDataScreen/modules/accountsReceivable.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <borderTemplate borderBox="width: 31.250vw;height: 15.104vw;" title="应收账款" detailTitle="查看详情">
+      <template slot="operation">
+        <div style="padding-left: 0.521vw">
+          <el-radio v-model="param.content.querytype" label="2" @input="listData">按业务员</el-radio>
+          <el-radio v-model="param.content.querytype" label="1" @input="listData">按客户</el-radio>
+        </div>
+      </template>
+      <template slot="content">
+        <div class="justify-style">
+          <boxTemplate title="总应收" :data="list.sumallaoverduemount"></boxTemplate>
+          <boxTemplate title="逾期1月以内" :data="list.sumonemonthamount"></boxTemplate>
+        </div>
+        <div class="justify-style">
+          <boxTemplate title="逾期1~3月" :data="list.sumthreemonthamount"></boxTemplate>
+          <boxTemplate title="逾期3月以上" :data="list.sumupthreemonthamount"></boxTemplate>
+        </div>
+      </template>
+    </borderTemplate>
+  </div>
+</template>
+
+<script>
+import borderTemplate from '../components/borderTemplate'
+import boxTemplate from "../components/boxTemplate";
+export default {
+  name: "accountsReceivable",
+  components:{borderTemplate,boxTemplate},
+  data(){
+    return {
+      param:{
+        "id": 20241009101204,
+        "content": {
+          "type": '',
+          "dataid": '',
+          "querytype": '2',
+          "where": {
+            "isleave": ""
+          }
+        }
+      },
+      list:''
+    }
+  },
+  methods:{
+    async listData(){
+      const res = await this.$api.requested(this.param)
+      this.list = res.data
+      console.log(this.list,'应收账款')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.justify-style{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1.042vw;
+}
+/deep/ .el-radio__inner {
+  width: 1.250vw;
+  height: 1.250vw;
+  position: relative;
+  cursor: pointer;
+  display: inline-block;
+  box-sizing: border-box;
+  background: linear-gradient(356deg, #00244D 0%, #001E41 100%);
+  box-shadow: 0.000vw 0.104vw 0.208vw 0.052vw rgba(0,0,0,0.15);
+  border-radius: 0.833vw;
+  border: 0.104vw solid #3D73BA;
+  opacity: 0.8;
+}
+/deep/ .el-radio__label {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 0.729vw;
+  color: #E6F4FF;
+  line-height: 0.000vw;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+  padding-left: 0.521vw;
+}
+/deep/ .el-radio__input.is-checked+.el-radio__label {
+  color: #E6F4FF;
+}
+/deep/ .el-radio__inner::after {
+  width: 0.625vw;
+  height: 0.625vw;
+  border-radius: 100%;
+  background-color: #3685FC;
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform .15s ease-in;
+}
+/deep/ .el-radio__input.is-checked .el-radio__inner {
+  border-color: #3685FC;
+  background: none;
+}
+</style>

src/HManagement/serviceDataScreen/components/accountsReceivable.vue → src/HManagement/serviceDataScreen/modules/dataProfile.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <borderTemplate borderBox="width: 31.250vw;height: 15.104vw;" title="应收账款" detailTitle="查看详情"></borderTemplate>
+    <borderTemplate borderBox="width: 31.250vw;height: 32.813vw;" title="数据概况" detailTitle="查看详情"></borderTemplate>
   </div>
 </template>
 
 <script>
 import borderTemplate from '../components/borderTemplate'
 export default {
-  name: "accountsReceivable",
+  name: "dataProfile",
   components:{borderTemplate}
 }
 </script>

src/HManagement/serviceDataScreen/modules/jobData.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <borderTemplate borderBox="width: 15.208vw;height: 12.500vw;" title="作业数据" detailTitle="查看详情">
+      <template slot="content">
+        <div style="display: flex;justify-content: right">
+          <el-select v-model="dateType"  class="inline-16" size="small"  @change="dateTypeChange" :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-select>
+        </div>
+        <div class="box-style">
+          <div class="justify-content-style-set">
+            <div>
+              <div class="data-font">{{list.xsxz}}</div>
+              <div class="title">{{$t(`新增线索`)}}</div>
+            </div>
+            <div>
+              <div class="data-font">{{list.xmxz}}</div>
+              <div class="title">{{$t(`新增项目`)}}</div>
+            </div>
+            <div>
+              <div class="data-font">{{list.khxz}}</div>
+              <div class="title">{{$t(`新增客户`)}}</div>
+            </div>
+          </div>
+          <div class="justify-content-style-set">
+            <div>
+              <div class="data-font">{{list.khgj}}</div>
+              <div class="title">{{$t(`客户跟进`)}}</div>
+            </div>
+            <div>
+              <div class="data-font">{{list.xsgj}}</div>
+              <div class="title">{{$t(`跟进线索`)}}</div>
+            </div>
+            <div>
+              <div class="data-font">{{list.xmgj}}</div>
+              <div class="title">{{$t(`项目跟进`)}}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </borderTemplate>
+  </div>
+</template>
+
+<script>
+import borderTemplate from '../components/borderTemplate'
+export default {
+  name: "jobData",
+  components:{borderTemplate},
+  data(){
+    return {
+      dateType:'本月',
+      param:{
+        id:20230616131404,
+        content:{
+          dataType:'1',
+          dataid:'',
+          type:'',
+          where:{
+            isleave:''
+          }
+        }
+      },
+      list:{
+        khgj:'',
+        khxz:'',
+        xmgj:'',
+        xmxz:'',
+        xsgj:'',
+        xsxz:'5'
+      },
+      listNew:""
+    }
+  },
+  methods:{
+    async listData(){
+      const res = await this.$api.requested(this.param)
+      this.listNew = res.data
+      this.dateTypeChange()
+    },
+    dateTypeChange(){
+      if (this.dateType == '本月'){
+        this.list.khgj = this.listNew.bykhgj
+        this.list.khxz = this.listNew.bykhxz
+        this.list.xmxz = this.listNew.byxmxz
+        this.list.xmgj = this.listNew.byxmgj
+        this.list.xsgj = this.listNew.byxsgj
+        this.list.xsxz = this.listNew.byxsxz
+      }else if (this.dateType == '本周') {
+        this.list.khgj = this.listNew.bzkhgj
+        this.list.khxz = this.listNew.bzkhxz
+        this.list.xmxz = this.listNew.bzxmxz
+        this.list.xmgj = this.listNew.bzxmgj
+        this.list.xsgj = this.listNew.bzxsgj
+        this.list.xsxz = this.listNew.bzxsxz
+      }else if (this.dateType == '本年') {
+        this.list.khgj = this.listNew.bnkhgj
+        this.list.khxz = this.listNew.bnkhxz
+        this.list.xmxz = this.listNew.bnxmxz
+        this.list.xmgj = this.listNew.bnxmgj
+        this.list.xsgj = this.listNew.bnxsgj
+        this.list.xsxz = this.listNew.bnxsxz
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.box-style{
+  width: 13.021vw;
+  height: 6.458vw;
+  background: #001E41;
+  box-shadow: 0.000vw 0.156vw 0.313vw 0.052vw rgba(0,0,0,0.16);
+  border-radius: 0.313vw 0.313vw 0.313vw 0.313vw;
+  border: 0.052vw solid #CFDCE5;
+  margin-top: 1.042vw;
+}
+.box-style .data-font{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 1.250vw;
+  color: #3685FC;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.box-style .title{
+  height: 0.833vw;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 0.625vw;
+  color: #CFDCE5;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.justify-content-style-set{
+  display: flex;
+  justify-content: space-between;
+  padding: 0.225vw 1.042vw 0 1.042vw;
+}
+</style>

src/HManagement/serviceDataScreen/components/salesmanAccount.vue → src/HManagement/serviceDataScreen/modules/marketingExpenseStatistics.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <borderTemplate borderBox="width: 290px;height: 240px;" title="业务员账户" detailTitle="金额明细"></borderTemplate>
+    <borderTemplate borderBox="width: 17.083vw;height: 12.500vw;" title="营销费用统计" detailTitle="查看详情"></borderTemplate>
   </div>
 </template>
 
 <script>
 import borderTemplate from '../components/borderTemplate'
 export default {
-  name: "salesmanAccount",
+  name: "marketingExpenseStatistics",
   components:{borderTemplate}
 }
 </script>

src/HManagement/serviceDataScreen/modules/marketingExpenses.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <borderTemplate borderBox="width: 15.104vw;height: 12.500vw;" title="营销费用" detailTitle="金额明细">
+      <template slot="content">
+        <div class="money-style">{{tool.formatAmount(amount,2)}}</div>
+        <div class="title-style">{{$t(`营销费用总金额（元）`)}}</div>
+        <div class="div-line"></div>
+        <div>
+          <div class="title-style" style="float: left">{{$t(`营销费用总数量`)}}</div>
+          <div class="money2-style" style="float: right">{{count}}</div>
+        </div>
+      </template>
+    </borderTemplate>
+  </div>
+</template>
+
+<script>
+import borderTemplate from '../components/borderTemplate'
+export default {
+  name: "marketingExpenses",
+  components:{borderTemplate},
+  data() {
+    return {
+      param:{
+        "id": 2024062609373902,
+        "content": {
+          "type": '',
+          "dataid": '',
+          "dateType":'',
+          "where": {
+            "isleave": ""
+          }
+        }
+      },
+      amount:'',
+      count:'',
+    }
+  },
+  methods:{
+    async listData(){
+      const res = await this.$api.requested(this.param)
+      this.amount = res.data.amount
+      this.count = res.data.count
+    },
+    detailClick(){
+      // this.drawerShow = true
+    },
+    onClose(){
+      this.drawerShow = false
+    },
+  },
+}
+</script>
+
+<style scoped>
+.money-style{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 2.083vw;
+  color: #40DCF2;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.title-style {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 0.938vw;
+  color: #CFDCE5;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.div-line{
+  width: 12.917vw;
+  height: 0.000vw;
+  border: 0.052vw solid #CFDCE5;
+  margin: 1.042vw 0 1.042vw 0;
+}
+.money2-style{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 1.042vw;
+  color: #6CD2A1;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+/deep/ .el-drawer__wrapper {
+  right: 0 !important;
+}
+</style>

src/HManagement/serviceDataScreen/components/salesPanel.vue → src/HManagement/serviceDataScreen/modules/salesPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <borderTemplate borderBox="width: 33.450vw;height: 31.217vw;" title="销售面板" detailTitle="查看详情"></borderTemplate>
+    <borderTemplate borderBox="width: 31.250vw;height: 35.417vw;" title="销售面板" detailTitle="查看详情"></borderTemplate>
   </div>
 </template>
 

src/HManagement/serviceDataScreen/modules/salesmanAccount.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <borderTemplate borderBox="width: 15.104vw;height: 12.500vw;" title="业务员账户" detailTitle="金额明细" @detailClick="detailClick">
+      <template slot="content">
+        <div class="money-style">{{tool.formatAmount(balance,2)}}</div>
+        <div class="title-style">{{$t(`提成账户（元）`)}}</div>
+        <div class="div-line"></div>
+        <div>
+          <div class="title-style" style="float: left">{{$t(`预计提成（元）`)}}</div>
+          <div class="money2-style" style="float: right">{{tool.formatAmount(expectedreward,2)}}</div>
+        </div>
+      </template>
+    </borderTemplate>
+  </div>
+</template>
+
+<script>
+import borderTemplate from '../components/borderTemplate'
+export default {
+  name: "salesmanAccount",
+  components:{borderTemplate},
+  data() {
+    return {
+      param:{
+        "id": 20241009091704,
+        "content": {
+          "type": '',
+          "dataid": '',
+          "where": {
+            "isleave": ""
+          }
+        }
+      },
+      balance:'',
+      expectedreward:'',
+    }
+  },
+  methods:{
+    async listData(){
+      const res = await this.$api.requested(this.param)
+      this.balance = res.data.balance
+      this.expectedreward = res.data.expectedreward
+    },
+    detailClick(){
+      // this.drawerShow = true
+    },
+    onClose(){
+      this.drawerShow = false
+    },
+  },
+}
+</script>
+
+<style scoped>
+.money-style{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 2.083vw;
+  color: #40DCF2;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.title-style {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 0.938vw;
+  color: #CFDCE5;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+.div-line{
+  width: 12.917vw;
+  height: 0.000vw;
+  border: 0.052vw solid #CFDCE5;
+  margin: 1.042vw 0 1.042vw 0;
+}
+.money2-style{
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: bold;
+  font-size: 1.042vw;
+  color: #6CD2A1;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+/deep/ .el-drawer__wrapper {
+  right: 0 !important;
+}
+</style>

src/main.js

@@ -39,8 +39,6 @@ import '@/style/theme/font-icon/iconfont.css';
 
 import {messages} from './locales/lang.json';
 
-import autofit from 'autofit.js'
-
 Vue.use(Steps)
 Vue.use(Table)
 
@@ -63,7 +61,6 @@ Vue.prototype.$axios = axios
 
 Vue.use(Directive)
 
-Vue.use(autofit)
 
 
 Vue.prototype.tableHieght = 'calc(100vh - 302px)'