build

src/components/newResultInfo/company-month.vue

@@ -0,0 +1,318 @@
+<template>
+  <div v-loading="loading">
+    <div class="search" style="align-items: center;">
+      <div style="float:left;font-size:16px;line-height:30px">
+        年度完成情况
+      </div>
+
+      <div style="float:right">
+        <el-select size="small" style="margin-right:10px;width:160px" 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>
+
+        <el-date-picker class="fr picker no-padding" v-model="daytime" style=";width:65px" value-format="yyyy"
+          :editable="false" :disabled="isEmpty" :clearable="false" :size="'small'" type="year" format="yyyy" align="right"
+          placeholder="选择日期" :picker-options="{ disabledDate(time) { return time.getTime() > Date.now(); } }"
+          @change="requestData" />
+      </div>
+    </div>
+
+    <el-row style="margin-top:10px;margin-top:10px" v-if="!isEmpty">
+      <el-table border size="mini" :data="tableData" :header-cell-class-name="setHeaderClassName" :row-class-name="setRowClassName"
+        :cell-class-name="setCellClassName">
+        <el-table-column fixed="left" label="月度" prop="month" align="center" width="45px" />
+        <el-table-column label="营收目标" align="center" min-width="115px">
+          <template slot-scope="scope">
+            {{ unit2TenThousand(scope.row.total_tips, isTenThound) }}
+          </template>
+        </el-table-column>
+
+
+        <el-table-column label="营业收入(净)" align="center" min-width="115px">
+          <template slot-scope="scope">
+            <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="95px">
+          <template slot-scope="scope">
+            <div :style="getCurrentRateStyle(scope.row.completion_rate, scope.row.month)">
+              {{ Number(scope.row.completion_rate).toFixed(2) + "%" }}
+            </div>
+          </template>
+        </el-table-column>
+
+        <template v-if="costField">
+          <el-table-column label="毛利目标" align="center" min-width="115px">
+            <template slot-scope="scope">
+              {{ unit2TenThousand(scope.row.cost_tips, isTenThound) }}
+            </template>
+          </el-table-column>
+          <el-table-column label="毛利完成" align="center" min-width="115px">
+            <template slot-scope="scope">
+              <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>
+          <el-table-column label="毛利完成%" align="center" min-width="95px">
+            <template slot-scope="scope">
+              <div :style="getCurrentRateStyle(scope.row.cost_rate, scope.row.month)">
+                {{ Number(scope.row.cost_rate).toFixed(2) + "%" }}
+              </div>
+            </template>
+          </el-table-column>
+        </template>
+      </el-table>
+      <div style="height:100px"></div>
+    </el-row>
+
+    <template v-else>
+      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
+    </template>
+  </div>
+</template>
+
+
+<script>
+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', 'isTenThound'],
+  data() {
+    return {
+      loading: false,
+      daytime: "",
+      tableData: [],
+      companyNo: "",
+      cp_companies: [],
+      isEmpty: false
+    }
+  },
+  mounted() {
+    let hasCompose = false;
+    const jxIndex = this.companies.findIndex((item) => item.label === "北京锦兴弘昌科技有限公司");
+    const prIndex = this.companies.findIndex((item) => item.label === "北京普润心堂商贸有限公司");
+    const zsIndex = this.companies.findIndex((item) => item.label === "北京知事文化产业发展有限公司");
+
+    if (jxIndex !== -1 || prIndex !== -1 || zsIndex !== -1) hasCompose = true;
+    this.cp_companies = this.companies.filter((item) => item.label !== "北京锦兴弘昌科技有限公司" && item.label !== "北京普润心堂商贸有限公司" && item.label !== "北京知事文化产业发展有限公司")
+    if (hasCompose) this.cp_companies = [...this.cp_companies, { value: "GS2401181650538135", label: "普润&锦兴&知事" }]
+    // if (this.cp_companies.length === 4) this.cp_companies = [{ value: "", label: "所有公司" }, ...this.cp_companies];
+
+    this.isEmpty = this.cp_companies.length === 0;
+    if (this.isEmpty) return;
+
+    this.cp_companies = this.cp_companies.map((item,index) => {
+      let label = '';
+      
+      if (item.label === '所有公司') {
+        label = '所有公司'
+      }
+
+
+      if (item.label === '北京万宇恒通国际科贸有限公司') {
+        label = '平台公司: 万宇'
+      }
+
+
+      if (item.label === "普润&锦兴&知事") label = `业务公司: 普润&锦兴&知事`
+      if (label === '') label = `业务公司: ${mapCompany[item.label]}`;
+      return ({ ...item, label })
+    })
+
+    let list = ['所有公司','平台公司: 万宇','业务公司: 百辰','业务公司: 泓源','业务公司: 普润&锦兴&知事']
+    const cp_list = this.cp_companies.map((item) => item.label);
+    list = list.filter(item => cp_list.includes(item));
+    this.cp_companies = list.map((item) => this.cp_companies.find((cp_item) => cp_item.label === item));
+    this.companyNo = this.cp_companies[0].value;
+
+    this.daytime = this.transformTime();
+    this.requestData();
+  },
+  methods: {
+    unit2TenThousand,
+    setRowClassName({row}){
+      if(row.month === '合计') return 'table-header-color'
+    },
+    getCurrentRateStyle(current, month) {
+      const days = dayjs().daysInMonth();
+      const currentMonth = dayjs().month() + 1;
+      if (Number(month) > Number(currentMonth)) return;
+      if (month === '合计') 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;
+      if (month === '合计') return;
+      const oneDay = Number(division(total, days)).toFixed(2);
+      // console.log(month,oneDay)
+      const currentDay = dayjs().date();
+      const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color: red' : '';
+    },
+    setCellClassName({ column,row }) {
+      if(row.month === '合计') return;
+      const { label } = column;
+      // if (label === "营业收入(净)" || label === '当月成本合计') return "pure__cell";
+      if (label === "营收目标") return "bg__success"
+      if (label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) return "bg__success_1"
+      if (label === "毛利目标") return "bg__primary"
+      if (label.indexOf('毛利') !== -1) return "bg__primary_1"
+      if (label.indexOf('成本') !== -1) return "bg__warning_1"
+    },
+    setHeaderClassName({ column }) {
+      const { label } = column;
+      if (label === "营收目标") return "bg__success"
+      if (label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) return "bg__success_1"
+      if (label === "毛利目标") return "bg__primary"
+      if (label.indexOf('毛利') !== -1) return "bg__primary_1"
+      if (label.indexOf('成本') !== -1) return "bg__warning_1"
+    },
+    transformTime() {
+      let time = new Date();
+      let y = time.getFullYear();
+      let M = time.getMonth() + 1;
+      let d = time.getDate();
+      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
+    },
+    async requestData() {
+      this.loading = true;
+
+
+      const result = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: this.companyNo })
+
+      // if(this.companyNo === "GS2302231124114965"){
+      //   const jxResult = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: "GS2304031312553746" })
+      //   result.data = result.data.map((_,index) => {
+      //     const prItem = result.data[index];
+      //     const jxItem = jxResult.data[index];
+
+      //     return {
+      //       month:prItem.month,
+      //       cgd_th_total: Number(addition(prItem['cgd_th_total'],jxItem['cgd_th_total'])).toFixed(2),
+      //       cgd_total:Number(addition(prItem['cgd_total'],jxItem['cgd_total'])).toFixed(2),
+      //       cost_tips:Number(addition(prItem['cost_tips'],jxItem['cost_tips'])).toFixed(2),
+      //       sale_total:Number(addition(prItem['sale_total'],jxItem['sale_total'])).toFixed(2),
+      //       th_total:Number(addition(prItem['th_total'],jxItem['th_total'])).toFixed(2),
+      //       total_tips:Number(prItem['total_tips']).toFixed(2),
+      //     }
+      //   })
+      // };
+      // if(this.companyNo === ""){
+      //   result.data.forEach((item) => item.total_tips = 0);
+      //   for(const c of this.cp_companies.filter(({value}) => value !== "")){
+      //     const res = await asyncRequest.companyEvery({ year: (this.daytime.split('-'))[0], companyNo: c.value });
+      //     result.data = result.data.reduce((prev,curr,index) => {
+      //       return [
+      //         ...prev,
+      //         {
+      //           ...curr,
+      //           total_tips:Number(addition(Number(curr.total_tips).toFixed(2),Number(res.data[index].total_tips).toFixed(2))).toFixed(2)
+      //         }
+      //       ]
+      //     },[])
+      //   }
+      // }
+
+
+      switch (Number(result.code)) {
+        case 0:
+          this.tableData = (result.data || []).map(tableItem => {
+            /* 销售净额 = 销售额 - 退货额 **/
+            const pure_sale = subtraction(tableItem.sale_total, tableItem.th_total)
+            /* 指标达成率 = 销售净额 / 销售指标 **/
+            const completion_rate = multiplication(division(pure_sale, tableItem.total_tips), 100)
+            /* 采购净额 = 采购额 - 采购退货额 **/
+            const pure_purch = subtraction(tableItem.cgd_total, tableItem.cgd_th_total)
+            /* 毛利润 = (本月销售净额 - 本月采购净额) **/
+            const pure_profit = subtraction(pure_sale, pure_purch)
+            /*  毛利率 = (本月毛利润 / 本月销售净额) * 100 **/
+            const pure_interest_rate = multiplication(division(pure_profit, pure_sale) || 0, 100)
+
+            return {
+              pure_sale,
+              pure_purch,
+              pure_profit,
+              completion_rate,
+              pure_interest_rate,
+              month: tableItem.month,
+              cost_tips: tableItem.cost_tips,
+              total_tips: tableItem.total_tips,
+              cost_rate: Number(tableItem.cost_tips) === 0 ? 0 : multiplication(division(pure_profit, tableItem.cost_tips) || 0, 100).toFixed(2)
+            }
+          })
+
+
+          const totalItem = this.tableData.reduce((prev, curr) => {
+            return {
+              pure_sale: Number(addition(prev.pure_sale, curr.pure_sale)).toFixed(2),
+              pure_purch: Number( addition(prev.pure_purch, curr.pure_purch)).toFixed(2),
+              pure_profit: Number(addition(prev.pure_profit, curr.pure_profit)).toFixed(2),
+              completion_rate:Number( addition(prev.completion_rate, curr.completion_rate)).toFixed(2),
+              pure_interest_rate:Number( addition(prev.pure_interest_rate, curr.pure_interest_rate)).toFixed(2),
+              total_tips:Number( addition(prev.total_tips, curr.total_tips)).toFixed(2),
+              cost_tips:Number( addition(prev.cost_tips, curr.cost_tips)).toFixed(2),
+              cost_rate:Number( addition(prev.cost_rate, curr.cost_rate)).toFixed(2),
+              month: '合计',
+            }
+          }, {
+            pure_sale: 0,
+            pure_purch: 0,
+            pure_profit: 0,
+            completion_rate: 0,
+            pure_interest_rate: 0,
+            month: '合计',
+            cost_tips: 0,
+            total_tips: 0,
+            cost_rate: 0
+          })
+
+          totalItem.completion_rate = multiplication(division(totalItem.pure_sale, totalItem.total_tips) || 0, 100)
+          totalItem.cost_rate = Number(totalItem.cost_tips) === 0 ? 0 : multiplication(division(totalItem.pure_profit, totalItem.cost_tips) || 0, 100).toFixed(2)
+          this.tableData = [...this.tableData, totalItem];
+
+          // const totalItem = createTotalItem(tableData)
+          // totalItem.month = "年度合计"
+          // /* 年度指标达成率 = (年度销售净额 / 年度销售指标) **/
+          // totalItem.completion_rate = multiplication(division(totalItem.pure_sale,totalItem.total_tips),100)
+          // /* 年度毛利润 = 年度销售额 - 年度采购额 **/
+          // totalItem.pure_profit = subtraction(totalItem.pure_sale,totalItem.pure_purch)
+          // /* 年度毛利率 = (年度毛利润 / 年度销售额) **/
+          // totalItem.pure_interest_rate = multiplication(division(totalItem.pure_profit,totalItem.pure_sale),100)
+          // this.tableData = [...tableData,totalItem]
+          break
+        default:
+          break
+      }
+      // this.getHeight();
+      this.loading = false;
+    }
+  }
+}
+</script>
+
+
+
+<style lang="scss" scoped>
+.new-results {
+  .search {
+    height: 36px;
+    padding: 0px 10px;
+    margin-top: 10px
+  }
+}
+</style>
+

src/components/newResultInfo/company.vue

@@ -0,0 +1,462 @@
+<template>
+  <div v-loading="loading">
+    <div class="search clear" style="align-items: center;;">
+      <div style="float:left;line-height:30px;font-size:16px">
+        月度完成情况
+      </div>
+
+      <div style="float:right">
+        <el-select size="small" style="margin-right:10px;width:140px" v-model="companyNo" @change="requestData"
+          :disabled="isEmpty">
+          <el-option v-for="company in cp_companies" :key="company.value" :value="company.value" :label="company.label" />
+        </el-select>
+
+        <el-date-picker class="fr picker no-padding" v-model="daytime" style=";width:95px" value-format="yyyy-MM-dd"
+          :editable="false" :disabled="isEmpty" :clearable="false" :size="'small'" format="yyyy-MM-dd" type="date"
+          align="right" placeholder="选择日期"
+          :picker-options="{ disabledDate(time) { return time.getTime() > Date.now(); } }" @change="requestData" />
+      </div>
+    </div>
+
+    <el-row style="margin-top:10px;margin-top:10px" v-if="!isEmpty">
+      <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="65px">
+          <template slot-scope="scope">
+            <div v-if="scope.row.companyName.indexOf('普润') === -1">
+              {{ mapCompany[scope.row.companyName] || scope.row.companyName }}
+            </div>
+
+            <div v-else>
+              <el-popover placement="top" width="200" trigger="hover" content="普润&锦兴&知事">
+                <template #reference>
+                  <i class="el-icon-warning-outline" style="font-size:14px;cursor:pointer"></i>
+                  普润
+                </template>
+              </el-popover>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="当日营业收入" align="center" width="95px">
+          <template slot-scope="scope">
+            {{ unit2TenThousand(scope.row.sale_total, isTenThound) }}
+          </template>
+        </el-table-column>
+
+          <el-table-column label="营收目标" align="center" min-width="95px">
+            <template slot-scope="scope">
+              {{ unit2TenThousand(scope.row.total_tips, isTenThound) }}
+            </template>
+          </el-table-column>
+
+          <el-table-column label="营业收入(净)" align="center" min-width="115px">
+            <template slot-scope="scope">
+              <div style="display:flex;flex-direction: column;">
+                <el-popover placement="top" :width="200" trigger="hover">
+                  <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>
+
+                  <template #reference>
+                    <div :style="`${getCurrentValueStyle(scope.row.msale_total, scope.row.total_tips)}`">
+                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
+                      {{ unit2TenThousand(scope.row.msale_total, isTenThound) }}
+                    </div>
+                  </template>
+                </el-popover>
+              </div>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="营收完成%" align="center" min-width="85px">
+            <template slot-scope="scope">
+              <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" min-width="90px">
+              <template slot-scope="scope">
+                {{ unit2TenThousand(scope.row.cost_tips, isTenThound) }}
+              </template>
+            </el-table-column>
+
+            <el-table-column label="毛利完成" align="center" min-width="90px">
+              <template slot-scope="scope">
+                <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" min-width="85px">
+              <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" min-width="125px">
+              <template slot-scope="scope">
+                <div style="display:flex;flex-direction: column;">
+                  <el-popover placement="top" :width="200" trigger="hover">
+                    <div class="table-size">
+                      <p>直营/自营: {{ unit2TenThousand(scope.row.info[0][0].monthinfo.mcost_total, isTenThound) }}</p>
+                      <p>支付渠道: {{ unit2TenThousand(scope.row.info[0][1].monthinfo.mcost_total, isTenThound) }}</p>
+                      <p>供应商端: {{ unit2TenThousand(scope.row.info[0][2].monthinfo.mcost_total, isTenThound) }}</p>
+                    </div>
+
+                    <template #reference>
+                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
+                      {{ unit2TenThousand(scope.row.mcost_total, isTenThound) }}
+                    </template>
+                  </el-popover>
+                </div>
+              </template>
+            </el-table-column>
+
+            <el-table-column label="实际毛利率" align="center" width="85px">
+              <template slot-scope="scope">
+                <!-- <div :style="`${getCurrentRateStyle(scope.row.gross_sale_completion_rate)}`"> -->
+                {{ unit2TenThousand(scope.row.gross_sale_completion_rate) + "%" }}
+                <!-- </div> -->
+              </template>
+            </el-table-column>
+          </template>
+      </el-table>
+    </el-row>
+
+    <template v-else>
+      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
+    </template>
+  </div>
+</template>
+
+
+<script>
+import { addition, unit2TenThousand, subtraction, multiplication, division } from "../newReport/src/_utils";
+import asyncRequest from "@/api/newResults";
+import { mapCompany } from "./mapCompany";
+import dayjs from "dayjs"
+
+export default {
+  props: ['companies', 'costField', 'isTenThound'],
+  data() {
+    return {
+      daytime: "",
+      loading: false,
+      tableData: [],
+      companyNo: "",
+      cp_companies: [],
+      isEmpty: false,
+      mapCompany
+    }
+  },
+  mounted() {
+    let hasCompose = false;
+    const jxIndex = this.companies.findIndex((item) => item.label === "北京锦兴弘昌科技有限公司");
+    const prIndex = this.companies.findIndex((item) => item.label === "北京普润心堂商贸有限公司");
+    const zsIndex = this.companies.findIndex((item) => item.label === "北京知事文化产业发展有限公司");
+
+    if (jxIndex !== -1 || prIndex !== -1 || zsIndex !== -1) hasCompose = true;
+    this.cp_companies = this.companies.filter((item) => item.label !== "北京锦兴弘昌科技有限公司" && item.label !== "北京普润心堂商贸有限公司" && item.label !== "北京知事文化产业发展有限公司")
+    if (hasCompose) this.cp_companies = [...this.cp_companies, { value: "GS2302231124114965", label: "普润&锦兴&知事" }]
+    if (this.cp_companies.length === 4) this.cp_companies = [{ value: "", label: "所有公司" }, ...this.cp_companies];
+
+    this.isEmpty = this.cp_companies.length === 0;
+    if (this.isEmpty) return;
+
+    this.cp_companies = this.cp_companies.map((item, index) => {
+      let label = '';
+      if (item.label === '所有公司') {
+        label = '所有公司'
+      }
+
+
+      if (item.label === '北京万宇恒通国际科贸有限公司') {
+        label = '平台公司: 万宇'
+      }
+
+      if (item.label === "普润&锦兴&知事") label = `业务公司: 普润&锦兴&知事`
+      if (label === '') label = `业务公司: ${mapCompany[item.label]}`;
+      return ({ ...item, label })
+    })
+
+
+    let list = ['所有公司','平台公司: 万宇','业务公司: 百辰','业务公司: 泓源','业务公司: 普润&锦兴&知事']
+    const cp_list = this.cp_companies.map((item) => item.label);
+    list = list.filter(item => cp_list.includes(item));
+    this.cp_companies = list.map((item) => this.cp_companies.find((cp_item) => cp_item.label === item));
+    this.companyNo = this.cp_companies[0].value;
+
+    this.daytime = this.transformTime();
+    this.requestData();
+  },
+  methods: {
+    unit2TenThousand,
+    getCurrentRateStyle(current) {
+      const days = dayjs(this.daytime).daysInMonth();
+      const oneDay = Number(division(100, days)).toFixed(2);
+      const currentDay = dayjs(this.daytime).date();
+      const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
+    },
+    getCurrentValueStyle(current, total) {
+      const days = dayjs(this.daytime).daysInMonth();
+      const oneDay = Number(division(total, days)).toFixed(2);
+      const currentDay = dayjs(this.daytime).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)
+
+      return {
+        companyName: '普润',
+        cost_tips: Number(c1.cost_tips).toFixed(2),
+        total_tips: Number(c1.total_tips).toFixed(2),
+        monthinfo: c1.monthinfo.map((item, index) => ({
+          mcgd_th_total: Number(addition(item.mcgd_th_total, c2.monthinfo[index].mcgd_th_total)).toFixed(2),
+          mcgd_total: Number(addition(item.mcgd_total, c2.monthinfo[index].mcgd_total)).toFixed(2),
+          msale_total: Number(addition(item.msale_total, c2.monthinfo[index].msale_total)).toFixed(2),
+          mth_total: Number(addition(item.mth_total, c2.monthinfo[index].mth_total)).toFixed(2),
+          type: item.type
+        })),
+        dayinfo: c1.dayinfo.map((item, index) => {
+          return {
+            cgd_th_total: Number(addition(item.cgd_th_total, c2.dayinfo[index].cgd_th_total)).toFixed(2),
+            cgd_total: Number(addition(item.cgd_total, c2.dayinfo[index].cgd_total)).toFixed(2),
+            sale_total: Number(addition(item.sale_total, c2.dayinfo[index].sale_total)).toFixed(2),
+            th_total: Number(addition(item.th_total, c2.dayinfo[index].th_total)).toFixed(2),
+            type: item.type
+          }
+        }),
+      }
+    },
+    setCellClassName({ column ,row }) {
+      const { label } = column;
+
+      let base = ''
+
+      if(row.companyName === "北京万宇恒通国际科贸有限公司") {
+        base += 'font-bold '
+      }
+
+
+      if (label === "营收目标")  {
+        base += "bg__success"
+        return base
+      }
+
+      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') {
+        base += "bg__success_1"
+        return base;
+      }
+
+
+      if (label === "毛利目标") {
+        base += "bg__primary"
+        return base
+      }
+
+      if (label.indexOf('毛利') !== -1) {
+        base += "bg__primary_1"
+        return base;
+      }
+      if (label.indexOf('成本') !== -1) {
+        base += "bg__warning_1"
+        return base;
+      }
+
+      return base
+    },
+    setHeaderClassName({ column }) {
+      const { label } = column;
+      if (label === "营收目标") return "bg__success"
+      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') return "bg__success_1"
+      if (label === "毛利目标") return "bg__primary"
+      if (label.indexOf('毛利') !== -1) return "bg__primary_1"
+      if (label.indexOf('成本') !== -1) return "bg__warning_1"
+    },
+    transformTime() {
+      let time = new Date();
+      let y = time.getFullYear();
+      let M = time.getMonth() + 1;
+      let d = time.getDate();
+      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
+    },
+    async requestData() {
+      this.loading = true;
+      this.tableData = [];
+
+      const res = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: this.companyNo });
+
+      // const jxIndex = res.data.findIndex((item) => item.companyName === "北京锦兴弘昌科技有限公司");
+      // let prIndex = res.data.findIndex((item) => item.companyName === "北京普润心堂商贸有限公司");
+      // let zsIndex = res.data.findIndex((item) => item.companyName === "北京知事文化产业发展有限公司")
+      // if (jxIndex >= 0 && prIndex >= 0) {
+      //   const jxItem = res.data[jxIndex];
+      //   res.data[prIndex] = this.addDataToCompany(jxItem, res.data[prIndex]);
+      //   res.data.splice(jxIndex, 1);
+      // }
+      // prIndex = res.data.findIndex((item) => item.companyName === "北京普润心堂商贸有限公司");
+      // zsIndex = res.data.findIndex((item) => item.companyName === "北京知事文化产业发展有限公司")
+      // if (zsIndex >= 0 && prIndex >= 0) {
+      //   const zsItem = res.data[zsIndex];
+      //   res.data[prIndex] = this.addDataToCompany(zsItem, res.data[prIndex]);
+      //   res.data.splice(zsIndex, 1);
+      // }
+      // if (this.companyNo === "GS2302231124114965") {
+      //   const jxResult = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: "GS2304031312553746" });
+      //   const zsResult = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: "GS2401181650538135" });
+      //   res.data[prIndex] = this.addDataToCompany(jxResult.data[0], res.data[prIndex]);
+      //   if(zsResult.data.length !== 0) {
+      //     res.data[prIndex] = this.addDataToCompany(zsResult.data[0], res.data[prIndex]);
+      //   }
+      // }
+      // const isBeforeDate = this.getDiffDay() < 0 && this.companyNo === "GS2302231323386950"
+
+      if (res.code === 0 && res.data && res.data.length > 0) {
+        res.data.forEach(({ companyName, monthinfo, dayinfo, total_tips, cost_tips }) => {
+          // monthinfo[1] = {
+          //   ...(isBeforeDate ? {
+          //     msale_total:addition(monthinfo[1].msale_total,monthinfo[2].msale_total),
+          //     mth_total:addition(monthinfo[1].mth_total,monthinfo[2].mth_total),
+          //     type:'2'
+          //   } : monthinfo[1])
+          // }
+
+          // monthinfo[0] = {
+          //   ...(isBeforeDate ? {
+          //     msale_total:0,
+          //     mth_total:0,
+          //     type:'1'
+          //   } : monthinfo[0])
+          // }
+
+          // monthinfo[2] = {
+          //   ...(isBeforeDate ? {
+          //     msale_total:0,
+          //     mth_total:0,
+          //     type:'3'
+          //   } : monthinfo[2])
+          // }
+
+
+          // this.companyName = companyName
+
+
+          const mapResponseType = { '1': '自营', '2': '渠道', '3': '供应商端' }
+
+          const types = Object.keys(mapResponseType)
+
+          let prev_sale_total = 0;
+          let prev_msale_total = 0;
+          let prev_cost_total = 0;
+          let prev_mcost_total = 0;
+
+          const item = types.map(type => {
+            const _monthinfo = monthinfo.find(month => String(month.type) === type) || {}
+            const _dayinfo = dayinfo.find(day => String(day.type) === type) || {}
+
+            /** 月营业收入 = 月销售额 - 月退货额  */
+            const msale_total = subtraction(_monthinfo.msale_total, _monthinfo.mth_total) || 0
+            /** 日营业收入 = 日销售额 - 日退货额 */
+            const sale_total = subtraction(_dayinfo.sale_total, _dayinfo.th_total) || 0;
+            /** 日成本 = 日采购额 - 日退货额 */
+            const cost_total = subtraction(_dayinfo.cgd_total, _dayinfo.cgd_th_total) || 0;
+            /** 月成本 = 月采购额 - 月退货额 */
+            const mcost_total = subtraction(_monthinfo.mcgd_total, _monthinfo.mcgd_th_total) || 0;
+
+
+            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);
+
+            return {
+              type: mapResponseType[type],
+              dayinfo: { ..._dayinfo, sale_total },
+              monthinfo: { ...monthinfo, msale_total, mcost_total }
+            }
+          })
+
+          const gross_completion = Number(subtraction(prev_msale_total, prev_mcost_total)).toFixed(2) //当月毛利完成 = 月营收 - 月成本
+
+          this.tableData = [
+            ...this.tableData,
+            {
+              companyName,  // 公司名称
+              cost_tips, // 当月成本指标
+              total_tips, // 当月营收目标
+              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), // 本月毛利率 =  当月毛利完成 / 当月营业收入
+            }
+          ]
+
+          // const wanyuIndex = this.tableData.findIndex(item => item.companyName === "北京万宇恒通国际科贸有限公司")
+          // if(wanyuIndex !== -1) {
+          //   const item = this.tableData.splice(wanyuIndex, 1);
+          //   this.tableData = [...item,...this.tableData]
+          // }
+
+        })
+
+        let i = ["北京万宇恒通国际科贸有限公司","北京百辰荣达国际科贸有限公司","北京泓源广诚国际商贸有限公司",'北京普润心堂商贸有限公司'];
+        const l = this.tableData.map(item => item.companyName);
+        i = i.filter(item => l.includes(item));
+        this.tableData = i.map(item => this.tableData.find(l => l.companyName === item));
+
+        console.log(this.tableData);
+      } else {
+        this.tableData = [];
+      }
+      // this.getHeight();
+      this.loading = false;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.new-results {
+  .search {
+    height: 36px;
+    padding: 0px 10px;
+    margin-top: 10px;
+    flex-wrap: wrap;
+  }
+}
+
+.table-size {
+  display: flex;
+  width: 200px;
+  border: 1px solid #ebeef5;
+  flex-direction: column;
+
+  p {
+    flex: 1;
+    border-bottom: 1px solid #ebeef5;
+    padding: 5px 10px;
+    margin: 0px;
+
+    &:last-child {
+      border: none;
+    }
+  }
+}
+</style>
+

src/components/newResultInfo/department.vue

@@ -0,0 +1,398 @@
+<template>
+  <div v-loading="loading">
+    <div class="search clear">
+      <div style="float:left;line-height:30px;display:flex;align-items:center">
+        <el-popover placement="top" width="200" trigger="hover" content="不含业务公司供应商端数据">
+          <template #reference>
+            <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer;padding-top:5px;padding-right:5px;display:inline-block"></i>
+          </template>
+        </el-popover>
+        部门完成情况
+      </div>
+
+      <div style="float:right">
+        <el-select size="small" style="margin-right:10px;width:135px" v-model="companyNo" @change="requestData"
+          :disabled="isEmpty">
+          <el-option v-for="depart in cp_companies" :key="depart.value" :label="depart.label" :value="depart.value" />
+        </el-select>
+
+        <el-date-picker :disabled="isEmpty" class="fr picker no-padding" v-model="daytime"
+          :picker-options="{ disbaledData(time) { return time.getTime() > Date.now(); } }" style=";width:100px"
+          value-format="yyyy-MM-dd" format="yyyy-MM-dd" :editable="false" :clearable="false" placeholder="选择日期"
+          :size="'small'" align="right" type="date" />
+      </div>
+    </div>
+
+    <el-row style="margin-top: 10px; display: flex;width:100%;margin-top:10px" v-if="!isEmpty">
+      <el-table border size="mini" :data="list" :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">
+            <p style="margin:0px" v-for="(chunk, index) in scope.row.depart.split('@')" :key="index">
+              {{ chunk }}
+            </p>
+          </template>
+        </el-table-column>
+        <el-table-column label="当日营业收入" align="center" min-width="105px">
+          <template slot-scope="scope">{{ unit2TenThousand(scope.row.dayinfo.sale_total, isTenThound) }}</template>
+        </el-table-column>
+
+        <el-table-column label="当月营收目标" align="center" min-width="115px">
+          <template slot-scope="scope">{{ unit2TenThousand(scope.row.total_tips, isTenThound) }}</template>
+        </el-table-column>
+
+        <el-table-column label="当月营业收入(净)" align="center" min-width="120px">
+          <template slot-scope="scope">
+            <div style="display:flex;flex-direction: column;">
+              <div style="display:flex;flex-direction: column;">
+                <el-popover placement="top" :width="200" trigger="hover">
+                  <div class="table-size">
+                    <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy, isTenThound) }}</p>
+                    <p>支付渠道: {{ unit2TenThousand(scope.row.currentMonthPure[0].qd, isTenThound) }}</p>
+                    <!-- <p>税率: {{ unit2TenThousand(scope.row.currentMonthPure[0].tax, isTenThound) }}</p> -->
+                  </div>
+                  <template #reference>
+
+                    <p
+                      :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`">
+                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
+                      {{ unit2TenThousand(scope.row.monthinfo.monthNetSales, isTenThound) }}
+                    </p>
+                  </template>
+                </el-popover>
+              </div>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="当月成本" align="center" min-width="120px" v-if="costField">
+          <template slot-scope="scope">
+            <div style="display:flex;flex-direction: column;">
+              <el-popover placement="top" :width="200" trigger="hover">
+                <div class="table-size">
+                  <p>直营/自营: {{ unit2TenThousand(scope.row.zy_cost, isTenThound) }}</p>
+                  <p>渠道: {{ unit2TenThousand(scope.row.qd_cost, isTenThound) }}</p>
+                </div>
+                <template #reference>
+                  <p style="text-align: center;">
+                    <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
+                    {{
+                      unit2TenThousand(Number(addition(scope.row.zy_cost, scope.row.qd_cost)).toFixed(2), isTenThound) }}
+                  </p>
+                </template>
+              </el-popover>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="center" label="当月毛利" min-width="120px">
+          <template slot-scope="scope">
+            <div style="display:flex;flex-direction: column;">
+              <el-popover placement="top" :width="200" trigger="hover">
+                <div class="table-size">
+                  <p>直营/自营: {{ unit2TenThousand(scope.row.zy_gross, isTenThound) }}</p>
+                  <p>支付渠道: {{ unit2TenThousand(scope.row.qd_gross, isTenThound) }}</p>
+                </div>
+                <template #reference>
+                  <p style="text-align: center;">
+                    <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
+                    {{
+                      unit2TenThousand(Number(addition(scope.row.zy_gross, scope.row.qd_gross)).toFixed(2), isTenThound)
+                    }}
+                  </p>
+                </template>
+              </el-popover>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+
+    <template v-else>
+      <div style="text-align:center;line-height:60px;user-select:none">当前账号没有访问权限</div>
+    </template>
+  </div>
+</template>
+
+
+<script>
+import asyncRequest from "@/api/newResults";
+import setHeight from "@/mixins/index";
+import { mapCompany } from "./mapCompany"
+import dayjs from "dayjs";
+
+import {
+  addition,
+  division,
+  subtraction,
+  multiplication,
+  unit2TenThousand
+} from "../newReport/src/_utils";
+
+export default {
+  mixins: [setHeight],
+  props: ['companies', 'costField', 'isTenThound'],
+  data() {
+    return {
+      list: [],
+      daytime: "",
+      companyNo: "",
+      loading: false,
+      isEmpty: false,
+      cp_companies: []
+    }
+  },
+  computed: {
+    currentCompanyName() {
+      return this.companies.find(item => item.value === this.companyNo).label;
+    }
+  },
+  mounted() {
+    this.isEmpty = this.companies.length === 0;
+    if (this.isEmpty) return;
+    this.cp_companies = this.companies.map(item => ({
+      ...item,
+      label: mapCompany[item.label] === '万宇' ? `平台公司: 万宇` : `业务公司: ${mapCompany[item.label]}`
+    }))
+
+
+    let list = ['平台公司: 万宇','业务公司: 百辰','业务公司: 泓源','业务公司: 普润','业务公司: 锦兴', '业务公司: 知事']
+
+    const cp_list = this.cp_companies.map((item) => item.label);
+    list = list.filter(item => cp_list.includes(item));
+    this.cp_companies = list.map((item) => this.cp_companies.find((cp_item) => cp_item.label === item));
+    this.companyNo = this.cp_companies[0].value;
+
+    this.companyNo = this.cp_companies[0].value;
+    this.daytime = this.transformTime();
+    this.requestData();
+  },
+  watch: { daytime: { handler() { this.requestData() } } },
+  methods: {
+    addition,
+    unit2TenThousand,
+    setCellClassName({ column ,row }) {
+      const { label } = column;
+
+      let base = ''
+
+      if(row.depart.indexOf('万宇') !== -1) {
+        base += 'font-bold '
+      }
+
+
+      if (label === "当月营收目标")  {
+        base += "bg__success"
+        return base
+      }
+
+      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') {
+        base += "bg__success_1"
+        return base;
+      }
+
+
+      if (label === "毛利目标") {
+        base += "bg__primary"
+        return base
+      }
+
+      if (label.indexOf('毛利') !== -1) {
+        base += "bg__primary_1"
+        return base;
+      }
+      if (label.indexOf('成本') !== -1) {
+        base += "bg__warning_1"
+        return base;
+      }
+
+      return base
+    },
+    setHeaderClassName({ column }) {
+      const { label } = column;
+      if (label === "当月营收目标") return "bg__success"
+      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') return "bg__success_1"
+      if (label === "毛利目标") return "bg__primary"
+      if (label.indexOf('毛利') !== -1) return "bg__primary_1"
+      if (label.indexOf('成本') !== -1) return "bg__warning_1"
+    },
+    getCurrentRateStyle(current) {
+      const days = dayjs(this.daytime).daysInMonth();
+      const oneDay = Number(division(100, days)).toFixed(2);
+      const currentDay = dayjs(this.daytime).date();
+      const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
+    },
+    getCurrentValueStyle(current, total) {
+      const days = dayjs(this.daytime).daysInMonth();
+      const oneDay = Number(division(total, days)).toFixed(2);
+      const currentDay = dayjs(this.daytime).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();
+      let M = time.getMonth() + 1;
+      let d = time.getDate();
+      return y + "-" + (M < 10 ? "0" + M : M) + "-" + (d < 10 ? "0" + d : d);
+    },
+    /* 表格合并列和行 */
+    spanMethod({ rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        const _row = this.flitterData(this.list).one[rowIndex];
+        const _col = _row > 0 ? 1 : 0;
+        return { rowspan: _row, colspan: _col };
+      }
+    },
+    /**合并表格的第一列，处理表格数据 */
+    flitterData(arr) {
+      let spanOneArr = [];
+      let concatOne = 0;
+      arr.forEach((item, index) => {
+        if (index === 0) {
+          spanOneArr.push(1);
+        } else {
+          //注意这里的quarterly是表格绑定的字段，根据自己的需求来改
+          if (item.company === arr[index - 1].company) {
+            //第一列需合并相同内容的判断条件
+            spanOneArr[concatOne] += 1;
+            spanOneArr.push(0);
+          } else {
+            spanOneArr.push(1);
+            concatOne = index;
+          }
+        }
+      });
+
+      return { one: spanOneArr };
+    },
+    async requestData() {
+      this.loading = true;
+      this.list = [];
+      const res = await asyncRequest.departmentEveryDay({ daytime: this.daytime, companyNo: this.companyNo });
+
+      if (res.code === 0 && res.data && res.data.length > 0) {
+        // 非万宇 营业目标重取
+        // if (this.companyNo !== "GS2203161855277894") {
+        //   const r = await asyncRequest.companyEveryMonth({ daytime: this.daytime, companyNo: this.companyNo });
+        //   const { total_tips, companyName } = r.data[0] || {};
+        //   res.data.forEach(item => {
+        //     const index = companyName.indexOf(item.depart);
+        //     item.total_tips = (index === -1 && !(item.depart === "普润" && this.companyNo === "GS2304031312553746")) ? '0.00' : total_tips;
+        //   })
+        // }
+
+        let list = (res.data || [])
+          .map(({ depart, msale_total, mth_total, sale_total, th_total, total_tips, mzy_sale_total, mchannel_sale_total, channel_cost_total, zy_cost_total, mzy_cost_total, mchannel_cost_total }) => {
+            return {
+              depart, total_tips, mzy_sale_total, mchannel_sale_total, channel_cost_total, zy_cost_total, mchannel_cost_total, mzy_cost_total,
+              dayinfo: { sale_total, th_total }, monthinfo: { msale_total, mth_total }
+            }
+          });
+
+        list = list.filter(item => Number(item.monthinfo.msale_total) !== 0)
+
+        this.total = list.reduce((prev, current) => {
+          const { total_tips = 0, day = 0, month = 0 } = current;
+          return { total_tips: addition(total_tips, prev.total_tips), month: addition(month, prev.month), day: addition(day, prev.day) }
+        },
+          { total_tips: 0, month: 0, day: 0 }
+        )
+
+        let mapDepart = list.map(({ depart }) => depart);
+
+        list = mapDepart.map(d => list.find(({ depart }) => depart === d))
+
+        const mapToDepartment = { 百辰: "客服部@百辰", 泓源: "网络部@泓源", 普润: "	项目部@普润", 平台: "	平台部@万宇" }
+
+        const company = this.companies.find(item => item.value === this.companyNo);
+        this.list = list.map(({ depart, total_tips, dayinfo, monthinfo, mchannel_sale_total, mzy_sale_total, mchannel_cost_total, mzy_cost_total }) => {
+          mzy_sale_total = Number(addition(Number(multiplication(mzy_sale_total,0.05)).toFixed(2),mzy_sale_total)).toFixed(2);
+          mchannel_sale_total = Number(addition(Number(multiplication(mchannel_sale_total,0.05)).toFixed(2),mchannel_sale_total)).toFixed(2);
+          /* 月净销售 = 月销售 - 月退货 **/
+          let monthNetSales = subtraction(monthinfo.msale_total, monthinfo.mth_total)
+          monthNetSales = Number(addition(Number(multiplication(monthNetSales,0.05)).toFixed(2),monthNetSales)).toFixed(2);
+
+
+          /* 月经销售完成率 = 月净销售 / 销售指标 **/
+          const monthProportion = multiplication(division(monthNetSales, total_tips), 100).toFixed(2)
+          return {
+            total_tips, // 营收目标
+            zy_cost: mzy_cost_total, // 自营成本
+            qd_cost: mchannel_cost_total, // 渠道成本
+            depart: mapToDepartment[depart],
+            company: company.label,
+            currentMonthPure: [
+              { zy: mzy_sale_total, // 加%5税率 
+                qd: mchannel_sale_total
+              }], // 当月营业收入(净)
+            zy_gross: Number(subtraction(mzy_sale_total, mzy_cost_total)).toFixed(2), // 自营毛利  = 自营营收 - 自营成本
+            qd_gross: Number(subtraction(mchannel_sale_total, mchannel_cost_total)).toFixed(2), // 渠道毛利 = 渠道营收 - 渠道成本
+            dayinfo: { ...dayinfo, /** 日销售额 = 日销售额 - 日退货额 */  sale_total: subtraction(dayinfo.sale_total, dayinfo.th_total) },
+            /* 占比 =  (当前部门销售额 / 各部门总销售额) / 100 **/
+            proportion: multiplication(division(monthinfo.msale_total, this.total.month) || 0, 100) || 0,
+            monthinfo: { monthNetSales, monthProportion: monthProportion }
+          }
+        })
+
+        // const wanyuIndex = this.list.findIndex(item => item.depart.indexOf('万宇') !== -1);
+        // if(wanyuIndex !== -1){
+        //   const item = this.list.splice(wanyuIndex,1);
+        //   this.list.unshift(item[0]);
+        // }
+
+        let l = ['万宇','百辰','泓源','普润'];
+        const cl = this.list.map(item => item.depart)
+
+
+        l = l.filter(item => {
+          return cl.findIndex(i => i.indexOf(item)) !== -1
+        });
+
+        this.list = l.map(item => {
+          return this.list.find(i => i.depart.indexOf(item) !== -1);
+        })
+      } else {
+        this.list = [];
+      }
+      this.getHeight();
+      this.loading = false;
+    },
+  },
+}
+
+</script>
+
+<style lang="scss" scoped>
+.new-results {
+  .search {
+    height: 36px;
+    padding: 0px 10px;
+    margin-top: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+}
+
+.table-size {
+  display: flex;
+  width: 200px;
+  border: 1px solid #ebeef5;
+  flex-direction: column;
+
+  p {
+    flex: 1;
+    border-bottom: 1px solid #ebeef5;
+    padding: 5px 10px;
+    margin: 0px;
+
+    &:last-child {
+      border: none;
+    }
+  }
+}
+</style>
+

src/components/newResultInfo/mapCompany.js

@@ -0,0 +1,8 @@
+export const mapCompany = {
+  "北京百辰荣达国际科贸有限公司":"百辰",
+  "北京泓源广诚国际商贸有限公司":"泓源",
+  "北京万宇恒通国际科贸有限公司":"万宇",
+  "北京锦兴弘昌科技有限公司":"锦兴",
+  "北京普润心堂商贸有限公司":"普润",
+  "北京知事文化产业发展有限公司": "知事",
+}

src/components/newResults/company.vue

@@ -28,7 +28,7 @@
             </div>
 
             <div v-else>
-              <el-popover placement="top" width="200" trigger="hover" content="普润&锦兴&知事">
+              <el-popover placement="right" width="200" trigger="hover" content="普润&锦兴&知事">
                 <template #reference>
                   <i class="el-icon-warning-outline" style="font-size:14px;cursor:pointer"></i>
                   普润
@@ -51,8 +51,9 @@
 
           <el-table-column label="营业收入(净)" align="center" min-width="115px">
             <template slot-scope="scope">
-              <div style="display:flex;flex-direction: column;">
-                <el-popover placement="top" :width="200" trigger="hover">
+              <div style="display:flex;justify-content:center">
+               {{ unit2TenThousand(scope.row.msale_total, isTenThound) }}
+                <el-popover placement="right" :width="200" trigger="click">
                   <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>
@@ -61,8 +62,7 @@
 
                   <template #reference>
                     <div :style="`${getCurrentValueStyle(scope.row.msale_total, scope.row.total_tips)}`">
-                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
-                      {{ unit2TenThousand(scope.row.msale_total, isTenThound) }}
+                      <i class="el-icon-warning-outline trigger-hover" style="font-size:16px;cursor:pointer;margin-left:5px"></i>
                     </div>
                   </template>
                 </el-popover>
@@ -104,8 +104,9 @@
 
             <el-table-column label="成本合计" align="center" min-width="125px">
               <template slot-scope="scope">
-                <div style="display:flex;flex-direction: column;">
-                  <el-popover placement="top" :width="200" trigger="hover">
+                <div style="display:flex;justify-content:center">
+                  {{ unit2TenThousand(scope.row.mcost_total, isTenThound) }}
+                  <el-popover placement="right" :width="200" trigger="click">
                     <div class="table-size">
                       <p>直营/自营: {{ unit2TenThousand(scope.row.info[0][0].monthinfo.mcost_total, isTenThound) }}</p>
                       <p>支付渠道: {{ unit2TenThousand(scope.row.info[0][1].monthinfo.mcost_total, isTenThound) }}</p>
@@ -113,8 +114,7 @@
                     </div>
 
                     <template #reference>
-                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
-                      {{ unit2TenThousand(scope.row.mcost_total, isTenThound) }}
+                      <i class="el-icon-warning-outline trigger-hover" style="font-size:16px;cursor:pointer;margin-left:5px"></i>
                     </template>
                   </el-popover>
                 </div>

src/components/newResults/department.vue

@@ -4,38 +4,70 @@
       <div style="float:left;line-height:30px;display:flex;align-items:center">
         <el-popover placement="top" width="200" trigger="hover" content="不含业务公司供应商端数据">
           <template #reference>
-            <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer;padding-top:5px;padding-right:5px;display:inline-block"></i>
+            <i
+              class="el-icon-warning-outline"
+              style="font-size:16px;cursor:pointer;padding-top:5px;padding-right:5px;display:inline-block"
+            ></i>
           </template>
-        </el-popover>
-        部门完成情况
+        </el-popover>部门完成情况
       </div>
 
       <div style="float:right">
-        <el-select size="small" style="margin-right:10px;width:135px" v-model="companyNo" @change="requestData"
-          :disabled="isEmpty">
-          <el-option v-for="depart in cp_companies" :key="depart.value" :label="depart.label" :value="depart.value" />
+        <el-select
+          size="small"
+          style="margin-right:10px;width:135px"
+          v-model="companyNo"
+          @change="requestData"
+          :disabled="isEmpty"
+        >
+          <el-option
+            v-for="depart in cp_companies"
+            :key="depart.value"
+            :label="depart.label"
+            :value="depart.value"
+          />
         </el-select>
 
-        <el-date-picker :disabled="isEmpty" class="fr picker no-padding" v-model="daytime"
-          :picker-options="{ disbaledData(time) { return time.getTime() > Date.now(); } }" style=";width:100px"
-          value-format="yyyy-MM-dd" format="yyyy-MM-dd" :editable="false" :clearable="false" placeholder="选择日期"
-          :size="'small'" align="right" type="date" />
+        <el-date-picker
+          :disabled="isEmpty"
+          class="fr picker no-padding"
+          v-model="daytime"
+          :picker-options="{ disbaledData(time) { return time.getTime() > Date.now(); } }"
+          style=";width:100px"
+          value-format="yyyy-MM-dd"
+          format="yyyy-MM-dd"
+          :editable="false"
+          :clearable="false"
+          placeholder="选择日期"
+          :size="'small'"
+          align="right"
+          type="date"
+        />
       </div>
     </div>
 
     <el-row style="margin-top: 10px; display: flex;width:100%;margin-top:10px" v-if="!isEmpty">
-      <el-table border size="mini" :data="list" :header-cell-class-name="setHeaderClassName"
-        :cell-class-name="setCellClassName">
+      <el-table
+        border
+        size="mini"
+        :data="list"
+        :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">
-            <p style="margin:0px" v-for="(chunk, index) in scope.row.depart.split('@')" :key="index">
-              {{ chunk }}
-            </p>
+            <p
+              style="margin:0px"
+              v-for="(chunk, index) in scope.row.depart.split('@')"
+              :key="index"
+            >{{ chunk }}</p>
           </template>
         </el-table-column>
         <el-table-column label="当日营业收入" align="center" min-width="105px">
-          <template slot-scope="scope">{{ unit2TenThousand(scope.row.dayinfo.sale_total, isTenThound) }}</template>
+          <template
+            slot-scope="scope"
+          >{{ unit2TenThousand(scope.row.dayinfo.sale_total, isTenThound) }}</template>
         </el-table-column>
 
         <el-table-column label="当月营收目标" align="center" min-width="115px">
@@ -45,18 +77,21 @@
         <el-table-column label="当月营业收入(净)" align="center" min-width="120px">
           <template slot-scope="scope">
             <div style="display:flex;flex-direction: column;">
-              <div style="display:flex;flex-direction: column;">
-                <el-popover placement="top" :width="200" trigger="hover">
+              <div style="display:flex;justify-content:center;align-items:center">
+                {{ unit2TenThousand(scope.row.monthinfo.monthNetSales, isTenThound) }}
+                <el-popover placement="right" :width="200" trigger="click">
                   <div class="table-size">
                     <p>直营/自营: {{ unit2TenThousand(scope.row.currentMonthPure[0].zy, isTenThound) }}</p>
                     <p>支付渠道: {{ unit2TenThousand(scope.row.currentMonthPure[0].qd, isTenThound) }}</p>
                   </div>
                   <template #reference>
-
                     <p
-                      :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`">
-                      <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
-                      {{ unit2TenThousand(scope.row.monthinfo.monthNetSales, isTenThound) }}
+                      :style="`text-align: center;${getCurrentValueStyle(scope.row.monthinfo.monthNetSales, scope.row.total_tips)}`"
+                    >
+                      <i
+                        class="el-icon-warning-outline trigger-hover"
+                        style="font-size:16px;cursor:pointer;margin-left:5px"
+                      ></i>
                     </p>
                   </template>
                 </el-popover>
@@ -67,17 +102,20 @@
 
         <el-table-column label="当月成本" align="center" min-width="120px" v-if="costField">
           <template slot-scope="scope">
-            <div style="display:flex;flex-direction: column;">
-              <el-popover placement="top" :width="200" trigger="hover">
+            <div style="display:flex;justify-content:center;align-items:center">
+              {{
+              unit2TenThousand(Number(addition(scope.row.zy_cost, scope.row.qd_cost)).toFixed(2), isTenThound) }}
+              <el-popover placement="right" :width="200" trigger="click">
                 <div class="table-size">
                   <p>直营/自营: {{ unit2TenThousand(scope.row.zy_cost, isTenThound) }}</p>
                   <p>渠道: {{ unit2TenThousand(scope.row.qd_cost, isTenThound) }}</p>
                 </div>
                 <template #reference>
                   <p style="text-align: center;">
-                    <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
-                    {{
-                      unit2TenThousand(Number(addition(scope.row.zy_cost, scope.row.qd_cost)).toFixed(2), isTenThound) }}
+                    <i
+                      class="el-icon-warning-outline trigger-hover"
+                      style="font-size:16px;cursor:pointer;margin-left:5px"
+                    ></i>
                   </p>
                 </template>
               </el-popover>
@@ -87,18 +125,18 @@
 
         <el-table-column align="center" label="当月毛利" min-width="120px">
           <template slot-scope="scope">
-            <div style="display:flex;flex-direction: column;">
-              <el-popover placement="top" :width="200" trigger="hover">
+            <div style="display:flex;justify-content:center;align-items:center">
+              {{
+              unit2TenThousand(Number(addition(scope.row.zy_gross, scope.row.qd_gross)).toFixed(2), isTenThound)
+              }}
+              <el-popover placement="right" :width="200" trigger="click">
                 <div class="table-size">
                   <p>直营/自营: {{ unit2TenThousand(scope.row.zy_gross, isTenThound) }}</p>
                   <p>支付渠道: {{ unit2TenThousand(scope.row.qd_gross, isTenThound) }}</p>
                 </div>
                 <template #reference>
                   <p style="text-align: center;">
-                    <i class="el-icon-warning-outline" style="font-size:16px;cursor:pointer"></i>
-                    {{
-                      unit2TenThousand(Number(addition(scope.row.zy_gross, scope.row.qd_gross)).toFixed(2), isTenThound)
-                    }}
+                    <i class="el-icon-warning-outline trigger-hover" style="font-size:16px;cursor:pointer;margin-left:5px"></i>
                   </p>
                 </template>
               </el-popover>
@@ -118,7 +156,7 @@
 <script>
 import asyncRequest from "@/api/newResults";
 import setHeight from "@/mixins/index";
-import { mapCompany } from "./mapCompany"
+import { mapCompany } from "./mapCompany";
 import dayjs from "dayjs";
 
 import {
@@ -131,7 +169,7 @@ import {
 
 export default {
   mixins: [setHeight],
-  props: ['companies', 'costField', 'isTenThound'],
+  props: ["companies", "costField", "isTenThound"],
   data() {
     return {
       list: [],
@@ -140,7 +178,7 @@ export default {
       loading: false,
       isEmpty: false,
       cp_companies: []
-    }
+    };
   },
   computed: {
     currentCompanyName() {
@@ -152,83 +190,109 @@ export default {
     if (this.isEmpty) return;
     this.cp_companies = this.companies.map(item => ({
       ...item,
-      label: mapCompany[item.label] === '万宇' ? `平台公司: 万宇` : `业务公司: ${mapCompany[item.label]}`
-    }))
-
-
-    let list = ['平台公司: 万宇','业务公司: 百辰','业务公司: 泓源','业务公司: 普润','业务公司: 锦兴', '业务公司: 知事']
-
-    const cp_list = this.cp_companies.map((item) => item.label);
+      label:
+        mapCompany[item.label] === "万宇"
+          ? `平台公司: 万宇`
+          : `业务公司: ${mapCompany[item.label]}`
+    }));
+
+    let list = [
+      "平台公司: 万宇",
+      "业务公司: 百辰",
+      "业务公司: 泓源",
+      "业务公司: 普润",
+      "业务公司: 锦兴",
+      "业务公司: 知事"
+    ];
+
+    const cp_list = this.cp_companies.map(item => item.label);
     list = list.filter(item => cp_list.includes(item));
-    this.cp_companies = list.map((item) => this.cp_companies.find((cp_item) => cp_item.label === item));
+    this.cp_companies = list.map(item =>
+      this.cp_companies.find(cp_item => cp_item.label === item)
+    );
     this.companyNo = this.cp_companies[0].value;
 
     this.companyNo = this.cp_companies[0].value;
     this.daytime = this.transformTime();
     this.requestData();
   },
-  watch: { daytime: { handler() { this.requestData() } } },
+  watch: {
+    daytime: {
+      handler() {
+        this.requestData();
+      }
+    }
+  },
   methods: {
     addition,
     unit2TenThousand,
-    setCellClassName({ column ,row }) {
+    setCellClassName({ column, row }) {
       const { label } = column;
 
-      let base = ''
+      let base = "";
 
-      if(row.depart.indexOf('万宇') !== -1) {
-        base += 'font-bold '
+      if (row.depart.indexOf("万宇") !== -1) {
+        base += "font-bold ";
       }
 
-
-      if (label === "当月营收目标")  {
-        base += "bg__success"
-        return base
+      if (label === "当月营收目标") {
+        base += "bg__success";
+        return base;
       }
 
-      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') {
-        base += "bg__success_1"
+      if (
+        (label.indexOf("营业") !== -1 || label.indexOf("营收") !== -1) &&
+        label !== "当日营业收入"
+      ) {
+        base += "bg__success_1";
         return base;
       }
 
-
       if (label === "毛利目标") {
-        base += "bg__primary"
-        return base
+        base += "bg__primary";
+        return base;
       }
 
-      if (label.indexOf('毛利') !== -1) {
-        base += "bg__primary_1"
+      if (label.indexOf("毛利") !== -1) {
+        base += "bg__primary_1";
         return base;
       }
-      if (label.indexOf('成本') !== -1) {
-        base += "bg__warning_1"
+      if (label.indexOf("成本") !== -1) {
+        base += "bg__warning_1";
         return base;
       }
 
-      return base
+      return base;
     },
     setHeaderClassName({ column }) {
       const { label } = column;
-      if (label === "当月营收目标") return "bg__success"
-      if ((label.indexOf('营业') !== -1 || label.indexOf('营收') !== -1) && label !== '当日营业收入') return "bg__success_1"
-      if (label === "毛利目标") return "bg__primary"
-      if (label.indexOf('毛利') !== -1) return "bg__primary_1"
-      if (label.indexOf('成本') !== -1) return "bg__warning_1"
+      if (label === "当月营收目标") return "bg__success";
+      if (
+        (label.indexOf("营业") !== -1 || label.indexOf("营收") !== -1) &&
+        label !== "当日营业收入"
+      )
+        return "bg__success_1";
+      if (label === "毛利目标") return "bg__primary";
+      if (label.indexOf("毛利") !== -1) return "bg__primary_1";
+      if (label.indexOf("成本") !== -1) return "bg__warning_1";
     },
     getCurrentRateStyle(current) {
       const days = dayjs(this.daytime).daysInMonth();
       const oneDay = Number(division(100, days)).toFixed(2);
       const currentDay = dayjs(this.daytime).date();
-      const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
-      return Number(currentTotalTip) > Number(current) ? 'color:red' : ''
+      const currentTotalTip = Number(
+        multiplication(currentDay, oneDay)
+      ).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? "color:red" : "";
     },
     getCurrentValueStyle(current, total) {
       const days = dayjs(this.daytime).daysInMonth();
       const oneDay = Number(division(total, days)).toFixed(2);
       const currentDay = dayjs(this.daytime).date();
-      const currentTotalTip = Number(multiplication(currentDay, oneDay)).toFixed(2);
-      return Number(currentTotalTip) > Number(current) ? 'color: red' : '';
+      const currentTotalTip = Number(
+        multiplication(currentDay, oneDay)
+      ).toFixed(2);
+      return Number(currentTotalTip) > Number(current) ? "color: red" : "";
     },
     transformTime() {
       let time = new Date();
@@ -270,7 +334,10 @@ export default {
     async requestData() {
       this.loading = true;
       this.list = [];
-      const res = await asyncRequest.departmentEveryDay({ daytime: this.daytime, companyNo: this.companyNo });
+      const res = await asyncRequest.departmentEveryDay({
+        daytime: this.daytime,
+        companyNo: this.companyNo
+      });
 
       if (res.code === 0 && res.data && res.data.length > 0) {
         // 非万宇 营业目标重取
@@ -283,51 +350,124 @@ export default {
         //   })
         // }
 
-        let list = (res.data || [])
-          .map(({ depart, msale_total, mth_total, sale_total, th_total, total_tips, mzy_sale_total, mchannel_sale_total, channel_cost_total, zy_cost_total, mzy_cost_total, mchannel_cost_total }) => {
+        let list = (res.data || []).map(
+          ({
+            depart,
+            msale_total,
+            mth_total,
+            sale_total,
+            th_total,
+            total_tips,
+            mzy_sale_total,
+            mchannel_sale_total,
+            channel_cost_total,
+            zy_cost_total,
+            mzy_cost_total,
+            mchannel_cost_total
+          }) => {
             return {
-              depart, total_tips, mzy_sale_total, mchannel_sale_total, channel_cost_total, zy_cost_total, mchannel_cost_total, mzy_cost_total,
-              dayinfo: { sale_total, th_total }, monthinfo: { msale_total, mth_total }
-            }
-          });
+              depart,
+              total_tips,
+              mzy_sale_total,
+              mchannel_sale_total,
+              channel_cost_total,
+              zy_cost_total,
+              mchannel_cost_total,
+              mzy_cost_total,
+              dayinfo: { sale_total, th_total },
+              monthinfo: { msale_total, mth_total }
+            };
+          }
+        );
 
-        list = list.filter(item => Number(item.monthinfo.msale_total) !== 0)
+        list = list.filter(item => Number(item.monthinfo.msale_total) !== 0);
 
-        this.total = list.reduce((prev, current) => {
-          const { total_tips = 0, day = 0, month = 0 } = current;
-          return { total_tips: addition(total_tips, prev.total_tips), month: addition(month, prev.month), day: addition(day, prev.day) }
-        },
+        this.total = list.reduce(
+          (prev, current) => {
+            const { total_tips = 0, day = 0, month = 0 } = current;
+            return {
+              total_tips: addition(total_tips, prev.total_tips),
+              month: addition(month, prev.month),
+              day: addition(day, prev.day)
+            };
+          },
           { total_tips: 0, month: 0, day: 0 }
-        )
+        );
 
         let mapDepart = list.map(({ depart }) => depart);
 
-        list = mapDepart.map(d => list.find(({ depart }) => depart === d))
-
-        const mapToDepartment = { 百辰: "客服部@百辰", 泓源: "网络部@泓源", 普润: "	项目部@普润", 平台: "	平台部@万宇" }
-
-        const company = this.companies.find(item => item.value === this.companyNo);
-        this.list = list.map(({ depart, total_tips, dayinfo, monthinfo, mchannel_sale_total, mzy_sale_total, zy_cost_total, mchannel_cost_total, mzy_cost_total }) => {
-          /* 月净销售 = 月销售 - 月退货 **/
-          const monthNetSales = subtraction(monthinfo.msale_total, monthinfo.mth_total)
-          /* 月经销售完成率 = 月净销售 / 销售指标 **/
-          const monthProportion = multiplication(division(monthNetSales, total_tips), 100).toFixed(2)
-          return {
-            total_tips, // 营收目标
-            zy_cost: mzy_cost_total, // 自营成本
-            qd_cost: mchannel_cost_total, // 渠道成本
-            depart: mapToDepartment[depart],
-            company: company.label,
-            currentMonthPure: [{ zy: mzy_sale_total, qd: mchannel_sale_total }], // 当月营业收入(净)
-            zy_gross: Number(subtraction(mzy_sale_total, mzy_cost_total)).toFixed(2), // 自营毛利  = 自营营收 - 自营成本
-            qd_gross: Number(subtraction(mchannel_sale_total, mchannel_cost_total)).toFixed(2), // 渠道毛利 = 渠道营收 - 渠道成本
-            dayinfo: { ...dayinfo, /** 日销售额 = 日销售额 - 日退货额 */  sale_total: subtraction(dayinfo.sale_total, dayinfo.th_total) },
-            /* 占比 =  (当前部门销售额 / 各部门总销售额) / 100 **/
-            proportion: multiplication(division(monthinfo.msale_total, this.total.month) || 0, 100) || 0,
-            monthinfo: { monthNetSales, monthProportion: monthProportion }
+        list = mapDepart.map(d => list.find(({ depart }) => depart === d));
+
+        const mapToDepartment = {
+          百辰: "客服部@百辰",
+          泓源: "网络部@泓源",
+          普润: "	项目部@普润",
+          平台: "	平台部@万宇"
+        };
+
+        const company = this.companies.find(
+          item => item.value === this.companyNo
+        );
+        this.list = list.map(
+          ({
+            depart,
+            total_tips,
+            dayinfo,
+            monthinfo,
+            mchannel_sale_total,
+            mzy_sale_total,
+            mchannel_cost_total,
+            mzy_cost_total
+          }) => {
+            // mzy_sale_total = Number(addition(Number(multiplication(mzy_sale_total,0.05)).toFixed(2),mzy_sale_total)).toFixed(2);
+            // mchannel_sale_total = Number(addition(Number(multiplication(mchannel_sale_total,0.05)).toFixed(2),mchannel_sale_total)).toFixed(2);
+            /* 月净销售 = 月销售 - 月退货 **/
+            let monthNetSales = subtraction(
+              monthinfo.msale_total,
+              monthinfo.mth_total
+            );
+            // monthNetSales = Number(addition(Number(multiplication(monthNetSales,0.05)).toFixed(2),monthNetSales)).toFixed(2);
+
+            /* 月经销售完成率 = 月净销售 / 销售指标 **/
+            const monthProportion = multiplication(
+              division(monthNetSales, total_tips),
+              100
+            ).toFixed(2);
+            return {
+              total_tips, // 营收目标
+              zy_cost: mzy_cost_total, // 自营成本
+              qd_cost: mchannel_cost_total, // 渠道成本
+              depart: mapToDepartment[depart],
+              company: company.label,
+              currentMonthPure: [
+                {
+                  zy: mzy_sale_total, // 加%5税率
+                  qd: mchannel_sale_total
+                }
+              ], // 当月营业收入(净)
+              zy_gross: Number(
+                subtraction(mzy_sale_total, mzy_cost_total)
+              ).toFixed(2), // 自营毛利  = 自营营收 - 自营成本
+              qd_gross: Number(
+                subtraction(mchannel_sale_total, mchannel_cost_total)
+              ).toFixed(2), // 渠道毛利 = 渠道营收 - 渠道成本
+              dayinfo: {
+                ...dayinfo,
+                /** 日销售额 = 日销售额 - 日退货额 */ sale_total: subtraction(
+                  dayinfo.sale_total,
+                  dayinfo.th_total
+                )
+              },
+              /* 占比 =  (当前部门销售额 / 各部门总销售额) / 100 **/
+              proportion:
+                multiplication(
+                  division(monthinfo.msale_total, this.total.month) || 0,
+                  100
+                ) || 0,
+              monthinfo: { monthNetSales, monthProportion: monthProportion }
+            };
           }
-        })
-
+        );
 
         // const wanyuIndex = this.list.findIndex(item => item.depart.indexOf('万宇') !== -1);
         // if(wanyuIndex !== -1){
@@ -335,26 +475,24 @@ export default {
         //   this.list.unshift(item[0]);
         // }
 
-        let l = ['万宇','百辰','泓源','普润'];
-        const cl = this.list.map(item => item.depart)
-
+        let l = ["万宇", "百辰", "泓源", "普润"];
+        const cl = this.list.map(item => item.depart);
 
         l = l.filter(item => {
-          return cl.findIndex(i => i.indexOf(item)) !== -1
+          return cl.findIndex(i => i.indexOf(item)) !== -1;
         });
 
         this.list = l.map(item => {
           return this.list.find(i => i.depart.indexOf(item) !== -1);
-        })
+        });
       } else {
         this.list = [];
       }
       this.getHeight();
       this.loading = false;
-    },
-  },
-}
-
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>

src/pages/newResultsInfo.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="new-results" v-loading="state.loading" style="min-height:300px">
+    <div v-if="!state.error && isShow">
+      <div
+        style="
+        color:red;
+        display:flex;
+        align-items:center;
+        justify-content:space-between;
+        width:100%;
+        padding:5px 10px;
+        box-sizing:border-box;
+        "
+        >
+
+        <el-popover placement="top-start":width="200" trigger="hover"
+          content=" 以下报表一小时更新一次">
+          <template #reference>
+            <i class="el-icon-warning-outline" style="font-size:22px;cursor:pointer"></i>
+          </template>
+        </el-popover>
+
+        <el-switch v-model="isTenThound" active-text="万元" inactive-text="元" />
+      </div>
+
+
+      <div class="container">
+        <result-company :companies="companies" :isTenThound="isTenThound" :costField="costField" />
+        <result-department :companies="companies" :isTenThound="isTenThound" :costField="costField" />
+        <result-company-month :companies="companies" :isTenThound="isTenThound" :costField="costField" />
+      </div>
+    </div>
+
+    <template v-else-if="!state.loading">
+      <unusual-state :hasPermission="isShow" :message="state.message" path="newReport" />
+    </template>
+  </div>
+</template>
+
+<script>
+// 1w - 7k - 4k
+import PeriodDatePicker from "../components/period-date-picker";
+import UnusualState from "@/components/unusual/index.vue";
+import ResultCompany from "@/components/newResultInfo/company.vue"
+import ResultDepartment from "@/components/newResultInfo/department.vue"
+import ResultCompanyMonth from "@/components/newResultInfo/company-month.vue"
+import { getOpenid, getParameterByName, removeOpenid, setOpenid } from "../utils/auth";
+import userRequest from "@/api/index";
+
+export default {
+  name: "newReport",
+  components: {
+    UnusualState,
+    ResultCompany,
+    ResultDepartment,
+    PeriodDatePicker,
+    ResultCompanyMonth
+  },
+  data() {
+    return {
+      companies: [],
+      costField: false,
+      zxTotal: 0,
+      daytime: "",
+      isDisplay: false,
+      isTenThound: true,
+      state: { message: '', error: false, loading: false }
+    };
+  },
+  mounted() {
+    if (!getParameterByName('code')) {
+      this.login()
+    } else {
+      this.requestUserinfo()
+    }
+  },
+  methods: {
+    async time(e) {
+      const { startTime, endTime } = e;
+      this.start = startTime || "";
+      this.end = endTime || "";
+
+      const { start, end } = this;
+      if ((start !== "" && end === "") || (start === "" && end !== "")) {
+        this.$message.warning("时间区间不完整！");
+        this.date = []
+        return;
+      }
+
+      if (this.start && this.end) {
+        this.date = [this.start + " 00:00:00", this.end + " 23:59:59"]
+      } else {
+        this.date = [this.start, this.end]
+      }
+    },
+    async requestUserinfo() {
+      this.state.loading = true
+      const openid = getOpenid()
+      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]},
+        //       {"companyNo": "GS2401181650538135","companyName": "北京知事文化产业发展有限公司", "info": [1, 2, 6]}
+        //     ]
+        // 	}
+        // }
+
+      this.companies = result.data.companyArr.reduce((prev, current) => {
+        return current.info.includes(6) || current.info.includes('6') ? [...prev, {
+          value: current.companyNo,
+          label: current.companyName
+        }] : prev
+      }, [])
+
+      this.state.loading = false
+      switch (Number(result.code)) {
+        case 0:
+          this.isShow = (result.data.is_show || []).includes(6) || (result.data.is_show || []).includes('6')
+          this.costField = (result.data.is_show || []).includes('cost_field')
+          setOpenid(result.data.openid)
+          break
+        default:
+          this.state.error = true;
+          openid && removeOpenid();
+          this.state.message = result.message;
+          break;
+      }
+    },
+    login() {
+      const redirect_url = encodeURIComponent('http://stat.caixiao365.com/accountsReceivable')
+      var state = 'wx_' + Math.random().toString(36).substr(2, 15)
+      const scope = 'snsapi_userinfo'
+      const baseUrl = "https://open.weixin.qq.com/connect/oauth2/authorize";
+      const url = `${baseUrl}?appid=${config.appId}&redirect_uri=${redirect_url}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
+      window.location.href = url;
+    },
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.new-results {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  overflow: auto;
+
+  .container {
+    height:calc(100vh - 40px);
+    overflow:auto;
+    background:white;
+  }
+}
+</style>

src/router/index.js

@@ -7,6 +7,7 @@ import Stock from "./../pages/stock.vue"
 import Login from "./../pages/login.vue"
 import Index from "../pages/index.vue"
 import NewResultChart from "../pages/newResultsChart.vue"
+import NewResultInfo from "../pages/newResultsInfo.vue"
 
 import { getParameterByName } from "../utils/auth"
 
@@ -19,7 +20,8 @@ const routes = [
   { path:'/accountsReceivable', component: AccountsReceivable },
   { path:'/stock', component: Stock },
   { path:'/newResults', component: NewResult },
-  { path:'/newResultChart', component: NewResultChart }
+  { path:'/newResultChart', component: NewResultChart },
+  { path:'/newResultInfo', component: NewResultInfo },
 ]
 
 const router = new VueRouter({routes, mode:'hash'})

src/styles/index.scss

@@ -55,3 +55,11 @@
 .font-bold {
   font-weight:600;
 }
+
+
+.trigger-hover {
+  transition: all ease-in 0.25s;
+ &:hover{
+  color:#409EFF;
+ }
+}