build

src/components/newResults/company-month.vue

@@ -9,7 +9,7 @@
         inactive-text="元" 
         />
 
-      <el-select size="small" style="margin-right:10px;width:125px" v-model="companyNo" @change="requestData" :disabled="isEmpty">
+      <el-select size="small" style="margin-right:10px;width:145px" v-model="companyNo" @change="requestData" :disabled="isEmpty">
         <el-option v-for="depart in cp_companies" :key="depart.id" :value="depart.value" :label="depart.label" />
       </el-select>
 
@@ -19,7 +19,7 @@
     </div>
 
     <el-row style="margin-top:10px" v-if="!isEmpty">
-      <el-table border size="mini" :data="tableData" :cell-class-name="setCellClassName">
+      <el-table border size="mini" :data="tableData" :header-cell-class-name="setHeaderClassName" :cell-class-name="setCellClassName">
         <el-table-column fixed="left" label="月度" prop="month" align="center" width="45px" />
         <el-table-column label="当月营收目标" align="center" min-width="140px">
           <template slot-scope="scope">
@@ -28,29 +28,37 @@
         </el-table-column>
         <el-table-column label="当月营业收入(净)" align="center" min-width="140px">
           <template slot-scope="scope">
-            {{unit2TenThousand(scope.row.pure_sale,isTenThound)}}
+            <div :style="getCurrentValueStyle(scope.row.pure_sale,scope.row.total_tips,scope.row.month)">
+              {{unit2TenThousand(scope.row.pure_sale,isTenThound)}}
+            </div>
           </template>
         </el-table-column>
         <el-table-column label="当月营收完成%" align="center" min-width="140px">
           <template slot-scope="scope">
-            {{Number(scope.row.completion_rate).toFixed(2) + "%"}}
+            <div :style="getCurrentRateStyle(scope.row.completion_rate,scope.row.month)">
+              {{Number(scope.row.completion_rate).toFixed(2) + "%"}}
+            </div>
           </template>
         </el-table-column>
         <el-table-column label="当月毛利完成%" align="center" min-width="140px">
           <template slot-scope="scope">
-            {{Number(scope.row.cost_rate).toFixed(2) + "%"}}
+            <div :style="getCurrentRateStyle(scope.row.cost_rate, scope.row.month)">
+              {{Number(scope.row.cost_rate).toFixed(2) + "%"}}
+            </div>
           </template>
         </el-table-column>
         
         <template v-if="costField">
-          <el-table-column label="当月毛利指标" align="center" min-width="140px">
+          <el-table-column label="当月毛利目标" align="center" min-width="140px">
            <template slot-scope="scope">
              {{unit2TenThousand(scope.row.cost_tips,isTenThound)}}
            </template>
           </el-table-column>
           <el-table-column label="当月毛利完成" align="center" min-width="140px">
             <template slot-scope="scope">
-             {{unit2TenThousand(scope.row.pure_profit,isTenThound)}}
+              <div :style="getCurrentValueStyle(scope.row.pure_profit,scope.row.cost_tips,scope.row.month)">
+                {{unit2TenThousand(scope.row.pure_profit,isTenThound)}}
+              </div>
             </template>
           </el-table-column>
         </template>
@@ -68,6 +76,7 @@
 import asyncRequest from "@/api/newResults";
 import { unit2TenThousand, subtraction, multiplication, division, addition } from "../newReport/src/_utils";
 import { mapCompany } from "./mapCompany";
+import dayjs from "dayjs"
 
 export default {
   props:['companies','costField'],
@@ -102,6 +111,35 @@ export default {
   },
   methods: {
     unit2TenThousand,
+    getCurrentRateStyle(current,month){
+      const days = dayjs().daysInMonth();
+      const currentMonth =dayjs().month() + 1;
+      if(Number(month) > Number(currentMonth)) return;
+      const oneDay = Number(division(100,days)).toFixed(2);
+      const currentDay = dayjs().date();
+      const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
+    },
+    getCurrentValueStyle(current,total,month){
+      const days = dayjs().daysInMonth();
+      const currentMonth =dayjs().month() + 1;
+      if(Number(month) > Number(currentMonth)) return;
+      console.log(currentMonth)
+      const oneDay = Number(division(total,days)).toFixed(2);
+      const currentDay = dayjs().date();
+      const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color: red' : '';
+    },
+    setCellClassName({ column }) {
+      const { label } = column;
+      if(label === "当月营收目标")  return "bg__yellow"
+      if(label === "当月毛利目标") return "bg__red"
+    },
+    setHeaderClassName({ column }){
+      const { label } = column;
+      if(label === "当月营收目标")  return "bg__yellow"
+      if(label === "当月毛利目标") return "bg__red"
+    },
     transformTime() {
       let time = new Date();
       let y = time.getFullYear();

src/components/newResults/company.vue

@@ -13,7 +13,7 @@
     </div>
 
     <el-row style="margin-top:10px" v-if="!isEmpty">
-      <el-table border size="mini" :data="tableData" :cell-class-name="setCellClassName">
+      <el-table border size="mini" :data="tableData" :header-cell-class-name="setHeaderClassName" :cell-class-name="setCellClassName">
         <el-table-column fixed="left" label="业务公司" prop="companyName" align="center" width="70px">
           <template slot-scope="scope">
             <div v-if="scope.row.companyName.indexOf('普润') === -1">{{mapCompany[scope.row.companyName] || scope.row.companyName}}</div>
@@ -38,63 +38,57 @@
         <el-table-column label="当月营业收入(净)" align="center" min-width="450px">
           <template slot-scope="scope">
             <div style="display:flex;flex-direction: column;">
-              <p style="text-align: center;">{{ unit2TenThousand(scope.row.msale_total, isTenThound) }}</p>
+              <p :style="`text-align: center;${getCurrentValueStyle(scope.row.msale_total,scope.row.total_tips)}`" >
+                {{ unit2TenThousand(scope.row.msale_total, isTenThound) }}
+              </p>
+              
               <div class="table-size">
                 <p>直营/自营: {{ unit2TenThousand(scope.row.info[0][0].monthinfo.msale_total, isTenThound) }}</p>
                 <p>渠道: {{ unit2TenThousand(scope.row.info[0][1].monthinfo.msale_total, isTenThound) }}</p>
                 <p>供应商端: {{ unit2TenThousand(scope.row.info[0][2].monthinfo.msale_total, isTenThound) }}</p>
               </div>
             </div>
-
-            <!-- <el-table border size="mini" :data="scope.row.info">
-                <el-table-column align="center" label="直营/自营">
-                  <template slot-scope="scope">
-                    {{unit2TenThousand(scope.row[0].monthinfo.msale_total, isTenThound)}}
-                  </template>
-                </el-table-column>
-                
-                <el-table-column align="center" label="渠道">
-                  <template slot-scope="scope">
-                    {{ unit2TenThousand(scope.row[1].monthinfo.msale_total,isTenThound)}}
-                  </template>
-                </el-table-column>
-                <el-table-column align="center" label="供应商端">
-                  <template slot-scope="scope">
-                    {{ unit2TenThousand(scope.row[2].monthinfo.msale_total,isTenThound)}}
-                  </template>
-                </el-table-column>
-              </el-table> -->
           </template>
         </el-table-column>
 
         <el-table-column label="当月营收完成%" align="center" min-width="120px">
           <template slot-scope="scope">
-            {{ scope.row.completion_rate + "%" }}
-          </template>
-        </el-table-column>
-        <el-table-column label="当月毛利完成%" align="center" min-width="120px">
-          <template slot-scope="scope">
-            {{ scope.row.gross_completion_rate + '%' }}
+            <div :style="`${getCurrentRateStyle(scope.row.completion_rate)}`">{{ scope.row.completion_rate + "%" }}</div>
           </template>
         </el-table-column>
 
 
         <template v-if="costField">
-          <el-table-column label="当月毛利指标" align="center" width="120px">
+          <el-table-column label="当月毛利目标" align="center" width="120px">
             <template slot-scope="scope">
               {{ unit2TenThousand(scope.row.cost_tips, isTenThound) }}
             </template>
           </el-table-column>
+
           <el-table-column label="当月毛利完成" align="center" width="120px">
             <template slot-scope="scope">
-              {{ unit2TenThousand(scope.row.gross_completion, isTenThound) }}
+              <div :style="`${getCurrentValueStyle(scope.row.gross_completion, scope.row.cost_tips)}`">
+                {{ unit2TenThousand(scope.row.gross_completion, isTenThound) }}
+              </div>
             </template>
           </el-table-column>
+          
           <el-table-column label="当月实际毛利率" align="center" width="120px">
             <template slot-scope="scope">
-              {{ unit2TenThousand(scope.row.gross_sale_completion_rate) + "%" }}
+              <!-- <div :style="`${getCurrentRateStyle(scope.row.gross_sale_completion_rate)}`"> -->
+                {{ unit2TenThousand(scope.row.gross_sale_completion_rate) + "%" }}
+              <!-- </div> -->
             </template>
           </el-table-column>
+
+          <el-table-column label="当月毛利完成%" align="center" min-width="120px">
+            <template slot-scope="scope">
+              <div :style="getCurrentRateStyle(scope.row.gross_completion_rate)">
+                {{ scope.row.gross_completion_rate + '%' }}
+              </div>
+            </template>
+          </el-table-column>
+
           <el-table-column label="当月成本合计" align="center" width="450px">
             <template slot-scope="scope">
               <div style="display:flex;flex-direction: column;">
@@ -108,29 +102,6 @@
             </template>
           </el-table-column>
         </template>
-
-        <!-- 
-         <el-table-column label="当月成本合计" align="center" width="120px">
-          <template slot-scope="scope">
-            {{unit2TenThousand(scope.row.mcost_total,isTenThound)}}
-          </template>
-        </el-table-column>
-
-        <el-table-column label="直营/自营成本" align="center" width="120px">
-          <template slot-scope="scope">
-            {{ unit2TenThousand(scope.row.info[0][0].monthinfo.mcost_total,isTenThound)}}
-          </template>
-        </el-table-column>
-        <el-table-column label="渠道成本" align="center" width="120px">
-          <template slot-scope="scope">
-            {{ unit2TenThousand(scope.row.info[0][1].monthinfo.mcost_total,isTenThound)}}
-          </template>
-        </el-table-column>
-        <el-table-column label="供应商端成本" align="center" width="120px">
-          <template slot-scope="scope">
-            {{ unit2TenThousand(scope.row.info[0][2].monthinfo.mcost_total,isTenThound)}}
-          </template>
-        </el-table-column> -->
       </el-table>
     </el-row>
 
@@ -145,6 +116,7 @@
 import asyncRequest from "@/api/newResults";
 import { addition, unit2TenThousand, subtraction, multiplication, division } from "../newReport/src/_utils";
 import { mapCompany } from "./mapCompany";
+import dayjs from "dayjs"
 
 export default {
   props: ['companies', 'costField'],
@@ -158,13 +130,6 @@ export default {
       cp_companies: [],
       isEmpty: false,
       mapCompany
-      // companies:[
-      //   { value:"",label: "所有公司"},
-      //   { value:"GS2302231125079621",label: "北京百辰荣达国际科贸有限公司"},
-      //   { value:"GS2302231323386950",label: "北京泓源广诚国际商贸有限公司"},
-      //   { value:"GS2203161855277894 ",label: "北京万宇恒通国际科贸有限公司"},
-      //   { value:"GS2302231124114965",label: "普润&锦兴&知事"}
-      // ]
     }
   },
   mounted() {
@@ -188,6 +153,20 @@ export default {
   },
   methods: {
     unit2TenThousand,
+    getCurrentRateStyle(current){
+      const days = dayjs().daysInMonth();
+      const oneDay = Number(division(100,days)).toFixed(2);
+      const currentDay = dayjs().date();
+      const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
+    },
+    getCurrentValueStyle(current,total){
+      const days = dayjs().daysInMonth();
+      const oneDay = Number(division(total,days)).toFixed(2);
+      const currentDay = dayjs().date();
+      const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color: red' : '';
+    },
     addDataToCompany(c1, c2) {
       // Number(addition(c1.total_tips,c2.total_tips)).toFixed(2)
 
@@ -215,7 +194,14 @@ export default {
     },
     setCellClassName({ column }) {
       const { label } = column;
-      return label === "当月营业收入(净)" || label === '当月成本合计' ? "pure__cell" : "";
+      if(label === "当月营业收入(净)" || label === '当月成本合计') return "pure__cell";
+      if(label === "当月营收目标")  return "bg__yellow"
+      if(label === "当月毛利目标") return "bg__red"
+    },
+    setHeaderClassName({ column }){
+      const { label } = column;
+      if(label === "当月营收目标")  return "bg__yellow"
+      if(label === "当月毛利目标") return "bg__red"
     },
     transformTime() {
       let time = new Date();
@@ -244,8 +230,6 @@ export default {
         res.data[prIndex] = this.addDataToCompany(jxResult.data[0], res.data[prIndex]);
       }
 
-      console.log(res.data[prIndex])
-
       // const isBeforeDate = this.getDiffDay() < 0 && this.companyNo === "GS2302231323386950"
 
       if (res.code === 0 && res.data && res.data.length > 0) {
@@ -302,7 +286,6 @@ export default {
 
 
             prev_sale_total = Number(addition(prev_sale_total, sale_total)).toFixed(2);
-
             prev_msale_total = Number(addition(prev_msale_total, msale_total)).toFixed(2);
             prev_cost_total = Number(addition(prev_cost_total, cost_total)).toFixed(2);
             prev_mcost_total = Number(addition(prev_mcost_total, mcost_total)).toFixed(2);
@@ -314,22 +297,19 @@ export default {
             }
           })
 
-
           const gross_completion = Number(subtraction(prev_msale_total, prev_mcost_total)).toFixed(2) //当月毛利完成 = 月营收 - 月成本
-
           this.tableData = [
             ...this.tableData,
             {
               companyName,  // 公司名称
               cost_tips, // 当月成本指标
               total_tips, // 当月营收目标
-              info: [{ ...item }], // 直营.. 渠道 销售
+              info: [{ ...item }], // 直营..渠道 销售
               sale_total: prev_sale_total, // 当日营业收入
               cost_total: prev_cost_total, // 当日成本总额
               msale_total: prev_msale_total, // 当月营业收入
               mcost_total: prev_mcost_total,// 当月成本总额
               gross_completion, //当月毛利完成 = 月营收 - 月成本
-
               completion_rate: multiplication(division(prev_msale_total, total_tips), 100).toFixed(2), // 当月应收完成率
               gross_completion_rate: Number(cost_tips) === 0 ? 0 : multiplication(division(gross_completion, cost_tips) || 0, 100).toFixed(2), // 当月毛利完成率
               gross_sale_completion_rate: Number(multiplication(division(gross_completion, prev_msale_total) || 0, 100)).toFixed(2), // 本月毛利率 =  当月毛利完成 / 当月营业收入

src/components/newResults/department.vue

@@ -36,7 +36,7 @@
     </div>
 
     <el-row style="margin-top: 10px; display: flex;" v-if="!isEmpty">
-      <el-table border size="mini" :data="list" :span-method="spanMethod" :cell-class-name="setCellClassName">
+      <el-table border size="mini" :data="list" :span-method="spanMethod" :header-cell-class-name="setHeaderClassName" :cell-class-name="setCellClassName">
         <el-table-column fixed="left" label="公司" prop="company" align="center" width="45px" />
         <el-table-column fixed="left" label="部门" prop="depart" align="center" width="60px">
           <template slot-scope="scope">
@@ -56,8 +56,11 @@
         <el-table-column label="当月营业收入(净)" align="center" min-width="400px">
           <template slot-scope="scope">
             <div style="display:flex;flex-direction: column;">
-              <p style="text-align: center;">{{ unit2TenThousand(scope.row.monthinfo.monthNetSales,isTenThound)}}</p>
-              <div class="table-size">
+              <p :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`">
+                {{ unit2TenThousand(scope.row.monthinfo.monthNetSales,isTenThound)}}
+              </p>
+              
+                <div class="table-size">
                 <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy,isTenThound) }}</p>
                 <p>渠道: {{unit2TenThousand(scope.row.currentMonthPure[0].qd,isTenThound)}}</p>
               </div>
@@ -118,6 +121,7 @@
 import asyncRequest from "@/api/newResults";
 import setHeight from "@/mixins/index";
 import { mapCompany } from "./mapCompany"
+import dayjs from "dayjs";
 
 import { 
   addition, 
@@ -157,6 +161,33 @@ export default {
   methods: {
     addition,
     unit2TenThousand,
+    setCellClassName({ column }) {
+      const { label } = column;
+      if(label === "当月营业收入(净)" || label === '当月成本合计') return "pure__cell";
+      if(label === "当月营收目标")  return "bg__yellow"
+      if(label === "当月毛利目标") return "bg__red"
+    },
+    setHeaderClassName({ column }){
+      const { label } = column;
+      if(label === "当月营收目标")  return "bg__yellow"
+      if(label === "当月毛利目标") return "bg__red"
+    },
+    getCurrentRateStyle(current){
+      const days = dayjs().daysInMonth();
+      const oneDay = Number(division(100,days)).toFixed(2);
+      const currentDay = dayjs().date();
+      const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
+    },
+    getCurrentValueStyle(current,total){
+      console.log(current,total,'---');
+
+      const days = dayjs().daysInMonth();
+      const oneDay = Number(division(total,days)).toFixed(2);
+      const currentDay = dayjs().date();
+      const currentTotalTip = Number( multiplication(currentDay,oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color: red' : '';
+    },
     transformTime() {
       let time = new Date();
       let y = time.getFullYear();
@@ -194,10 +225,6 @@ export default {
 
 	    return { one: spanOneArr };
 	  },
-    setCellClassName({ column }) {
-      const { label } = column; 
-      return label === "当月营业收入(净)" || label=== "成本" || label === "毛利" ? "pure_cell" : "";
-    },
     async requestData() {
       this.loading = true;
       this.list = [];

src/pages/newResults.vue

@@ -72,31 +72,31 @@ export default {
        const code = getParameterByName('code')
        const result = await userRequest.userinfo({  ...( openid ? { openid } :  { code }) })
 
-      //  const result = {
-      //   "code": 0,
-      //   "message": "获取成功",
-      //   "data": {
-		  //     "openid": "oOpc26KiZFBKIm7SB8knFGvov1qg",
-		  //     "subscribe_time": "2022-12-21 15:52:14",
-		  //     "updatetime": "2023-05-09 16:22:33",
-      //     "addtime": "2023-04-10 18:11:17",
-		  //     "is_show": ["1", "2", "4", "6", "cost_field"],
-      //     "nickname": "雪寒",
-		  //     "addr": "\/\/",
-		  //     "gender": "0",
-      //     "mobile": "",
-		  //     "avatar": "",
-		  //     "status": "1",
-		  //     "id": "1",
-		  //     "companyArr": [
-      //       {"companyNo": "GS2302231125079621", "companyName": "北京百辰荣达国际科贸有限公司", "info": [1, 2, 6]}, 
-      //       {"companyNo": "GS2302231323386950","companyName": "北京泓源广诚国际商贸有限公司", "info": [1, 2, 6]}, 
-      //       {"companyNo": "GS2203161855277894","companyName": "北京万宇恒通国际科贸有限公司", "info": [1, 2, 6]},
-      //       {"companyNo": "GS2304031312553746","companyName": "北京锦兴弘昌科技有限公司",  "info": [1, 2, 6]}, 
-      //       {"companyNo": "GS2302231124114965","companyName": "北京普润心堂商贸有限公司", "info": [1, 2, 6]}
-      //     ]
-      // 	}
-      // }
+      //   const result = {
+      //    "code": 0,
+      //    "message": "获取成功",
+      //    "data": {
+		  //      "openid": "oOpc26KiZFBKIm7SB8knFGvov1qg",
+		  //      "subscribe_time": "2022-12-21 15:52:14",
+		  //      "updatetime": "2023-05-09 16:22:33",
+      //      "addtime": "2023-04-10 18:11:17",
+		  //      "is_show": ["1", "2", "4", "6", "cost_field"],
+      //      "nickname": "雪寒",
+		  //      "addr": "\/\/",
+		  //      "gender": "0",
+      //      "mobile": "",
+		  //      "avatar": "",
+		  //      "status": "1",
+		  //      "id": "1",
+		  //      "companyArr": [
+      //        {"companyNo": "GS2302231125079621", "companyName": "北京百辰荣达国际科贸有限公司", "info": [1, 2, 6]}, 
+      //        {"companyNo": "GS2302231323386950","companyName": "北京泓源广诚国际商贸有限公司", "info": [1, 2, 6]}, 
+      //        {"companyNo": "GS2203161855277894","companyName": "北京万宇恒通国际科贸有限公司", "info": [1, 2, 6]},
+      //        {"companyNo": "GS2304031312553746","companyName": "北京锦兴弘昌科技有限公司",  "info": [1, 2, 6]}, 
+      //        {"companyNo": "GS2302231124114965","companyName": "北京普润心堂商贸有限公司", "info": [1, 2, 6]}
+      //      ]
+      //  	}
+      //  }
 
 
       this.companies = result.data.companyArr.reduce((prev,current) => {

src/styles/index.scss

@@ -16,3 +16,13 @@
     }
   }
 }
+
+
+.bg__red {
+  background-color: #fef0f0 !important;
+}
+
+
+.bg__yellow {
+  background-color: #fdf6ec !important;
+}