yos_web/src/views/salesData/components/boxLine.vue

<template>
  <div class="box-line-new">
    <div class="item">
      <div class="title inline-16">
        {{ $t(title) }}
      </div>
      <el-tooltip effect="dark" placement="top-start">
        <div slot="content">
          {{
            $t(
              "①累计目标金额：到当前时间为止的累计的目标金额，不计算未经历时间的目标金额；"
            )
          }}
          <br />{{
            $t(
              "②同比增长率：同比增长率是指本期和上一年同期相比较的增长率,计算公式为:同比增长率=(本期数-同期数)÷同期数×100%。"
            )
          }}
          <br />{{
            $t(
              "③环比增长率：环比增长率是指本期和上期相比较的增长率,计算公式为:环比增长率 =(本期数-上期数)÷上期数 ×100%。"
            )
          }}
          <br />{{ $t("④目标达成率=实际金额÷目标金额×100%") }}
        </div>
        <!--        <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
        <img
          width="14px"
          height="14px"
          src="../../../assets/icons/prompt_icon.svg"
          style="float: right"
        />
      </el-tooltip>
      <div class="content-new">
        <div style="width: 18%">
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              height: 150px;
            "
          >
            <el-progress
              color="#6395fa"
              type="circle"
              :percentage="percentage"
              :stroke-width="15"
              :width="150"
              :format="format"
            ></el-progress>
          </div>
        </div>
        <div style="width: 20%; height: 150px; margin-left: 16px">
          <div style="display: inline-block; height: 120px; margin-top: 16px">
            <p class="box-title">{{ $t("实际金额") }}</p>
            <p style="font-size: 26px; color: #4f7bfd">
              <span style="font-size: 14px">¥</span>
              <!--              {{list.amount > 10000?tool.formatAmount(tool.unitConversion(list.amount,10000),2) +this.$t('万'):tool.formatAmount(list.amount,2)}}</p>-->
              <span v-if="list.amount > 10000"
                >{{
                  tool.formatAmount(tool.unitConversion(list.amount, 10000), 2)
                }}<span style="font-size: 14px">{{ $t("万") }}</span></span
              >
              <span v-else>{{
                tool.formatAmount(tool.unitConversion(list.amount, 10000), 2)
              }}</span>
            </p>

            <p class="box-title" style="color: #929292" v-if="list.tbxsje > 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年同比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季同比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月同比")
              }}</span>
              <i class="el-icon-caret-top" style="color: #2ad72a"></i
              ><span class="box-size-color"
                >{{ Math.round(list.tbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.tbxsje == 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年同比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季同比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月同比")
              }}</span>
              <span class="box-size-color" style="margin-left: 10px"
                >{{ Math.round(list.tbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.tbxsje < 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年同比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季同比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月同比")
              }}</span>
              <i class="el-icon-caret-bottom" style="color: red"></i
              ><span class="box-size-color"
                >{{ Math.round(list.tbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.hbxsje > 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年环比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季环比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月环比")
              }}</span>
              <i class="el-icon-caret-top" style="color: #2ad72a"></i
              ><span class="box-size-color"
                >{{ Math.round(list.hbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.hbxsje == 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年环比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季环比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月环比")
              }}</span>
              <span class="box-size-color" style="margin-left: 10px"
                >{{ Math.round(list.hbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-if="list.hbxsje < 0">
              <span
                v-if="
                  param.content.dateType == '本年' ||
                  param.content.dateType == '去年'
                "
                >{{ $t("年环比") }}</span
              >
              <span v-else-if="param.content.dateType == '本季'">{{
                $t("季环比")
              }}</span>
              <span v-else-if="param.content.dateType == '本月'">{{
                $t("月环比")
              }}</span>
              <i class="el-icon-caret-bottom" style="color: red"></i
              ><span class="box-size-color"
                >{{ Math.round(list.hbxsje * 100 * 100) / 100 }}%</span
              >
            </p>
          </div>
        </div>
        <div style="width: 30%; height: 150px">
          <div style="display: inline-block; height: 120px; margin-top: 16px">
            <p class="box-title">{{ $t("目标金额") }}</p>
            <p style="font-size: 26px; color: #0c0c0c">
              <span style="font-size: 14px">¥</span>
              <!--              {{list.target_l > 10000?tool.formatAmount( tool.unitConversion(list.target_l,10000),2) +this.$t('万'):tool.formatAmount(list.target_l,2)}}</p>-->
              <span v-if="list.target_l > 10000"
                >{{
                  tool.formatAmount(
                    tool.unitConversion(list.target_l, 10000),
                    2
                  )
                }}<span style="font-size: 14px">{{ $t("万") }}</span></span
              >
              <span v-else>{{
                tool.formatAmount(tool.unitConversion(list.target_l, 10000), 2)
              }}</span>
            </p>

            <p class="box-title" style="color: #929292">
              {{ $t("目标达成率")
              }}<span class="box-size-color" style="margin-left: 40px"
                >{{ Math.round(list.wcamount * 100 * 100) / 100 }}%</span
              >
            </p>
            <p
              class="box-title"
              style="color: #929292"
              v-if="list.unamount >= 0"
            >
              {{ $t("实际与目标差额")
              }}<span class="box-size-color" style="margin-left: 10px"
                >¥{{
                  list.unamount > 10000
                    ? tool.formatAmount(
                        tool.unitConversion(list.unamount, 10000),
                        2
                      ) + $t("万")
                    : tool.formatAmount(list.unamount, 2)
                }}</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-else>
              {{ $t("实际与目标差额")
              }}<span class="box-size-color" style="margin-left: 10px"
                >¥{{
                  list.unamount < 10000
                    ? tool.formatAmount(
                        tool.unitConversion(list.unamount, 10000),
                        2
                      ) + $t("万")
                    : tool.formatAmount(list.unamount, 2)
                }}</span
              >
            </p>
          </div>
        </div>
        <div style="width: 30%; height: 150px">
          <div style="display: inline-block; height: 120px; margin-top: 16px">
            <p class="box-title">{{ $t("累计目标金额") }}</p>
            <p style="font-size: 26px; color: #0c0c0c">
              <span style="font-size: 16px">¥</span>
              <!--              {{list.target_l > 10000?tool.formatAmount( tool.unitConversion(list.nowTarget_l,10000),2) +this.$t('万'):tool.formatAmount(list.nowTarget_l,2)}}</p>-->
              <span v-if="list.nowTarget_l > 10000"
                >{{
                  tool.formatAmount(
                    tool.unitConversion(list.nowTarget_l, 10000),
                    2
                  )
                }}<span style="font-size: 14px">{{ $t("万") }}</span></span
              >
              <span v-else>{{
                tool.formatAmount(
                  tool.unitConversion(list.nowTarget_l, 10000),
                  2
                )
              }}</span>
            </p>

            <p class="box-title" style="color: #929292">
              {{ $t("累计目标达成率")
              }}<span class="box-size-color" style="margin-left: 40px"
                >{{ Math.round(list.wcnowTarget_l * 100 * 100) / 100 }}%</span
              >
            </p>
            <p
              class="box-title"
              style="color: #929292"
              v-if="list.unnowTarget_l >= 0"
            >
              {{ $t("实际与累计目标差额")
              }}<span class="box-size-color" style="margin-left: 10px"
                >¥{{
                  list.unnowTarget_l > 10000
                    ? tool.formatAmount(
                        tool.unitConversion(list.unnowTarget_l, 10000),
                        2
                      ) + $t("万")
                    : tool.formatAmount(list.unnowTarget_l, 2)
                }}</span
              >
            </p>
            <p class="box-title" style="color: #929292" v-else>
              {{ $t("实际与累计目标差额")
              }}<span class="box-size-color" style="margin-left: 10px"
                >¥{{
                  list.unnowTarget_l < 10000
                    ? tool.formatAmount(
                        tool.unitConversion(list.unnowTarget_l, 10000),
                        2
                      ) + $t("万")
                    : tool.formatAmount(list.unnowTarget_l, 2)
                }}</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "boxLine",
  props: ["title", "typeDate", "index"],
  data() {
    return {
      list: [],
      percentage: 0,
      param: {
        id: 20231009125304,
        content: {
          type: 1, // 0人员 1部门
          dataid: 103,
          dateType: "本年", // 本年 本季 本月
          datatype: 2, // 1-订单 2-出货 3-开票 4-回款
          where: {
            isleave: "",
          },
        },
      },
    };
  },
  methods: {
    format(percentage) {
      return this.$t("目标达成率") + "\n\n" + percentage + "%";
    },
    async listData() {
      this.title === "订单"
        ? (this.param.content.datatype = 1)
        : this.title === "出货"
        ? (this.param.content.datatype = 2)
        : this.title === "开票"
        ? (this.param.content.datatype = 3)
        : (this.param.content.datatype = 4);
      const res = await this.$api.requested(this.param);
      this.list = res.data;
      this.percentage = Math.round(this.list.wcamount * 100 * 100) / 100;
    },
  },
};
</script>

<style scoped>
.box-line-new {
  display: flex;
  flex-wrap: wrap;
  /* min-width: 900px;*/
}
.item {
  /* width: 900px;*/
  width: 100%;
  height: 210px;
  padding: 10px;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
  background-color: #ffffff;
  box-sizing: border-box;
  box-shadow: -1px -1px 5px 0px rgba(0, 0, 0, 0.2);
}
.item .title {
  display: flex;
  flex-wrap: nowrap;
  font-size: 16px;
}
.item .content-new {
  display: flex;
  width: 100%;
  height: 300px;
  margin-top: 10px;
}
.item .content-new .left {
  width: 160px;
}
.item .content-new .right {
  width: 188px;
}
.item .content-new .top {
  width: 100%;
  height: 150px;
  padding-top: 20px;
  margin-bottom: -20px;
}
.item .content-new .bottom {
  width: 100%;
  height: 150px;
}
.box-title {
  font-size: 14px;
}
.box-size-color {
  color: #5a5a5a;
  font-size: 14px;
}
/deep/ .el-progress__text {
  white-space: pre;
  font-size: 14px !important;
}
</style>