byte-sailing-new/src/views/dataBoard/board/employeeAnalysis/index.vue

<template>
  <div class="tenant">
    <div class="query bck" style="padding-bottom: 0px">
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="查看用户">
          <el-select
            v-model="selectUser"
            multiple
            placeholder="请选择用户"
            @change="changeUser"
          >
            <el-option
              v-for="item in userList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.value !== 'all' && selectUser.includes('all')"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="queryForm.timeArr"
            type="daterange"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="onQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="clickBtn(1)" :class="{ btnBck: selectBtn === 1 }"
            >近30天</el-button
          >
          <el-button @click="clickBtn(2)" :class="{ btnBck: selectBtn === 2 }"
            >本月</el-button
          >
          <el-button @click="clickBtn(3)" :class="{ btnBck: selectBtn === 3 }"
            >上月</el-button
          >
          <el-button @click="clickBtn(4)" :class="{ btnBck: selectBtn === 4 }"
            >近一年</el-button
          >
          <el-button @click="clickBtn(5)" :class="{ btnBck: selectBtn === 5 }"
            >去年</el-button
          >
          <el-button @click="clickBtn(6)" :class="{ btnBck: selectBtn === 6 }"
            >今年</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div v-loading="loading">
      <div style="display: flex; margin-top: 15px">
        <div class="bck">
          <TitleInfo :content="titleList[0]"></TitleInfo>
          <div class="one-row" style="margin-top: 15px">
            <div class="one-row-item first" style="margin-right: 15px">
              <div class="label">存量客户（人）</div>
              <div class="value">
                {{ allData.customerSituation.customerCount }}
              </div>
            </div>
            <div class="one-row-item other" style="margin-right: 15px">
              <div class="label">新增客户（人）</div>
              <div class="value">
                {{ allData.customerSituation.customerAddCount }}
              </div>
            </div>
            <div class="one-row-item other" style="margin-right: 15px">
              <div class="label">报价客户（人）</div>
              <div class="value">
                {{ allData.customerSituation.saleQuotationCustomerCount }}
              </div>
            </div>
            <div class="one-row-item other">
              <div class="label">成交客户（人）</div>
              <div class="value">
                {{ allData.customerSituation.contractCustomerCount }}
              </div>
            </div>
          </div>
        </div>
        <div class="bck" style="margin-left: 20px">
          <TitleInfo :content="titleList[1]"></TitleInfo>
          <div class="one-row" style="margin-top: 15px">
            <div class="one-row-item first" style="margin-right: 15px">
              <div class="label">存量产品</div>
              <div class="value">
                {{ allData.productSituation.productCount }}
              </div>
            </div>
            <div class="one-row-item other">
              <div class="label">新增产品</div>
              <div class="value">
                {{ allData.productSituation.productAddCount }}
              </div>
            </div>
          </div>
        </div>
        <div class="bck" style="margin-left: 20px; flex: 1">
          <TitleInfo :content="titleList[2]"></TitleInfo>
          <div class="one-row" style="margin-top: 15px">
            <div class="one-row-item first" style="margin-right: 15px">
              <div class="label">发件</div>
              <div class="value">{{ allData.commMail.sentMailCount }}</div>
            </div>
            <div class="one-row-item other">
              <div class="label">收件</div>
              <div class="value">{{ allData.commMail.receiveMailCount }}</div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 15px">
        <div class="bck scroll">
          <TitleInfo :content="titleList[3]"></TitleInfo>
          <div class="two-row" style="margin-top: 15px">
            <div class="two-row-item first" style="margin-right: 15px">
              <div class="label">报价</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{ allData.saleSituation.quotationAddStatistics.count }}
                  </div>
                  <div class="text">订单数</div>
                </div>
                <div>
                  <div class="child-value color-blue">
                    CNY
                    {{
                      moneyFormat(
                        allData.saleSituation.quotationAddStatistics.sumAmount,
                        2
                      )
                    }}
                  </div>
                  <div class="text">金额</div>
                </div>
              </div>
            </div>
            <div class="two-row-item other" style="margin-right: 15px">
              <div class="label">成交</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{ allData.saleSituation.contractAddStatistics.count }}
                  </div>
                  <div class="text">订单数</div>
                </div>
                <div>
                  <div class="child-value color-blue">
                    CNY
                    {{
                      moneyFormat(
                        allData.saleSituation.contractAddStatistics.sumAmount,
                        2
                      )
                    }}
                  </div>
                  <div class="text">金额</div>
                </div>
              </div>
            </div>
            <div class="two-row-item other" style="margin-right: 15px">
              <div class="label">到账</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{ allData.saleSituation.claimAddStatistics.count }}
                  </div>
                  <div class="text">笔</div>
                </div>
                <div>
                  <div class="child-value color-blue">
                    CNY
                    {{
                      moneyFormat(
                        allData.saleSituation.claimAddStatistics.sumAmount,
                        2
                      )
                    }}
                  </div>
                  <div class="text">金额</div>
                </div>
              </div>
            </div>
            <div class="two-row-item other">
              <div class="label">创建单证</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{ allData.saleSituation.documentsCount }}
                  </div>
                  <div class="text">套</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="margin-top: 15px">
        <div class="bck scroll">
          <TitleInfo :content="titleList[4]"></TitleInfo>
          <div class="two-row" style="margin-top: 15px">
            <div class="two-row-item first" style="margin-right: 15px">
              <div class="label">报价</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{ allData.saleAddSituation.quotationAddStatistics.count }}
                  </div>
                  <div class="text">订单数</div>
                </div>
                <div>
                  <div class="child-value color-blue">
                    CNY
                    {{
                      moneyFormat(
                        allData.saleAddSituation.quotationAddStatistics
                          .sumAmount,
                        2
                      )
                    }}
                  </div>
                  <div class="text">金额</div>
                </div>
              </div>
            </div>
            <div class="two-row-item other" style="margin-right: 15px">
              <div class="label">成交</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{ allData.saleAddSituation.contractAddStatistics.count }}
                  </div>
                  <div class="text">订单数</div>
                </div>
                <div>
                  <div class="child-value color-blue">
                    CNY
                    {{
                      moneyFormat(
                        allData.saleAddSituation.contractAddStatistics
                          .sumAmount,
                        2
                      )
                    }}
                  </div>
                  <div class="text">金额</div>
                </div>
              </div>
            </div>
            <div class="two-row-item other" style="margin-right: 15px">
              <div class="label">到账</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{ allData.saleAddSituation.claimAddStatistics.count }}
                  </div>
                  <div class="text">笔</div>
                </div>
                <div>
                  <div class="child-value color-blue">
                    CNY
                    {{
                      moneyFormat(
                        allData.saleAddSituation.claimAddStatistics.sumAmount,
                        2
                      )
                    }}
                  </div>
                  <div class="text">金额</div>
                </div>
              </div>
            </div>
            <div class="two-row-item other">
              <div class="label">创建单证</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{ allData.saleAddSituation.documentsCount }}
                  </div>
                  <div class="text">套</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div style="display: flex; margin-top: 15px">
        <div class="bck" style="width: 100%">
          <TitleInfo :content="titleList[5]"></TitleInfo>
          <div class="two-row" style="margin-top: 15px; width: 100%">
            <div class="two-row-item first" style="margin-right: 15px">
              <div class="label">待采购</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{
                      allData.purchaseStatistics.waitPurchaseStatistics
                        .contractProductCount
                    }}
                  </div>
                  <div class="text">交接单</div>
                </div>
                <div>
                  <div class="child-value color-blue">
                    {{
                      allData.purchaseStatistics.waitPurchaseStatistics
                        .subscribeDetailCount
                    }}
                  </div>
                  <div class="text">申购</div>
                </div>
              </div>
            </div>
            <div class="two-row-item other" style="margin-right: 15px">
              <div class="label">采购订单</div>
              <div class="value">
                <div style="margin-right: 15px">
                  <div class="child-value">
                    {{ allData.purchaseStatistics.purchaseOrder.purchaseCount }}
                  </div>
                  <div class="text">订单数</div>
                </div>
                <div style="margin-right: 15px">
                  <div class="child-value color-blue">
                    CNY
                    {{
                      moneyFormat(
                        allData.purchaseStatistics.purchaseOrder.purchaseAmount,
                        2
                      )
                    }}
                  </div>
                  <div class="text">金额</div>
                </div>
                <div>
                  <div class="child-value color-blue">
                    CNY
                    {{
                      moneyFormat(
                        allData.purchaseStatistics.purchaseOrder
                          .purchasePayAmount,
                        2
                      )
                    }}
                  </div>
                  <div class="text">已付款</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="bck" style="margin-left: 20px">
          <TitleInfo :content="titleList[6]"></TitleInfo>
          <div class="one-row" style="margin-top: 15px">
            <div class="one-row-item first" style="margin-right: 15px">
              <div class="label">发起</div>
              <div class="value">
                {{ allData.flowStatistics.flowExampleCount }}
              </div>
            </div>
            <div class="one-row-item other">
              <div class="label">待处理</div>
              <div class="value">
                {{ allData.flowStatistics.waitFlowExampleCount }}
              </div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import TitleInfo from "@/components/TitleInfo/index.vue";
import useUserStore from "@/store/modules/user";
import moment from "moment";

const titleList = [
  "客户情况",
  "产品情况",
  "往来邮件",
  "销售行为（存量客户）",
  "销售行为（新增客户）",
  "采购行为",
  "流程统计",
];
const userList = ref([]);
const selectUser = ref(["all"]);
const { proxy } = getCurrentInstance();
const loading = ref(false);
const queryForm = reactive({
  userIds: [],
  beginTime: "",
  endTime: "",
  timeArr: "",
});
const allData = ref({
  customerSituation: {},
  productSituation: {},
  commMail: {},
  flowStatistics: {},
  saleSituation: {
    quotationAddStatistics: {},
    contractAddStatistics: {},
    claimAddStatistics: {},
  },
  saleAddSituation: {
    quotationAddStatistics: {},
    contractAddStatistics: {},
    claimAddStatistics: {},
  },
  purchaseStatistics: {
    waitPurchaseStatistics: {},
    purchaseOrder: {},
  },
});
const getData = () => {
  loading.value = true;
  proxy.post("/employeeAnalysis/info", queryForm).then((res) => {
    allData.value = res;
    loading.value = false;
  });
};
const getDict = () => {
  proxy
    .get("/tenantUser/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      userList.value = res.rows.map((item) => {
        return {
          label: item.nickName,
          value: item.userId,
        };
      });
      userList.value.unshift({
        label: "全部",
        value: "all",
      });
    });
};

const onQuery = () => {
  if (queryForm.timeArr.length > 1) {
    queryForm.beginTime = queryForm.timeArr[0];
    queryForm.endTime = queryForm.timeArr[1];
  } else {
    queryForm.beginTime = "";
    queryForm.endTime = "";
  }
  getData();
};

const changeUser = (val) => {
  selectUser.value = val.includes("all") ? ["all"] : val;
  queryForm.userIds = val.includes("all") ? [] : val;
  onQuery();
};

const selectBtn = ref(1);
const clickBtn = (val) => {
  selectBtn.value = val;
  let today = new Date();
  let startDate = null;
  let endDate = null;
  let year = null;
  let month = null;
  switch (val) {
    case 1:
      startDate = new Date(today);
      startDate.setDate(today.getDate() - 29);
      endDate = new Date(today);
      break;
    case 2:
      year = today.getFullYear();
      month = today.getMonth();
      startDate = new Date(year, month, 1);
      endDate = new Date(year, month + 1, 0);
      break;
    case 3:
      year = today.getFullYear();
      month = today.getMonth() - 1;
      startDate = new Date(year, month, 1);
      endDate = new Date(year, month + 1, 0);
      break;
    case 4:
      year = today.getFullYear();
      startDate = new Date(year - 1, today.getMonth(), today.getDate());
      endDate = new Date(year, today.getMonth(), today.getDate());
      break;
    case 5:
      year = today.getFullYear();
      startDate = new Date(year - 1, 0, 1);
      endDate = new Date(year - 1, 11, 31);
      break;
    case 6:
      year = today.getFullYear();
      startDate = new Date(year, 0, 1);
      endDate = new Date(year, 11, 31);
      break;
    default:
      startDate = new Date(today);
      startDate.setDate(today.getDate() - 29);
      endDate = new Date(today);
      break;
  }
  queryForm.timeArr = [
    moment(startDate).format("yyyy-MM-DD"),
    moment(endDate).format("yyyy-MM-DD"),
  ];
  onQuery();
};

getDict();
clickBtn(1);
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
.bck {
  background-color: #fff;
  padding: 15px;
}
.one-row {
  display: flex;
  .one-row-item {
    min-width: 160px;
    max-width: 180px;
    padding: 15px;
    border-radius: 10px;
    .label {
      margin-bottom: 10px;
      font-size: 14px;
      color: #333333;
    }
    .value {
      font-size: 24px;
      font-weight: 700;
    }
  }

  .first {
    background: #fff1e1;
    .value {
      color: #333333;
    }
    .label::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #ff9315;
      border-radius: 50%;
      margin-right: 10px;
    }
  }

  .other {
    background: #eff6ff;
    .value {
      color: #333333;
    }
    .label::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      background: #0084ff;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
}
.two-row {
  display: flex;
  .two-row-item {
    min-width: 320px;
    max-width: 320px;
    padding: 15px;
    border-radius: 10px;
    .label {
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: 700;
      color: #333333;
    }
    .value {
      display: flex;
      font-size: 14px;
      justify-content: space-between;
      padding-right: 30px;
      .child-value {
        font-size: 16px;
        font-weight: 700;
      }
      .text {
        // color: #333333;
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }
  .first {
    background: #fff1e1;
    // .child-value {
    //   color: #333333;
    // }
  }
  .other {
    background: #eff6ff;
    // .child-value {
    //   color: #0084ff;
    // }
  }
  .color-blue {
    color: #0084ff;
  }
}
.btnBck {
  background: #0084ff;
  color: #fff;
}
.scroll {
  overflow-x: auto;
}
</style>