tire-platform-ui/src/views/wel/components/losAssembly/losleftform.vue

<template>
  <div>
    <div class="home-container" >
        <el-card class="home-container__card">
            <div class="title">
                <span></span>
                <div class="right">
                    <div class="right_but">
                        <div
                            class="right_but_left"
                            :class="{ right_but_active: isActive == 1 }"
                            @click="inDay">本日
                        </div>
                        <div
                            class="right_but_right"
                            :class="{ right_but_active: isActive == 2 }"
                            @click="inMoon">本月
                        </div>
                    </div>
                    <el-date-picker
                        v-model="realDate"
                        type="daterange"
                        size="mini"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        style="margin-right:10px;width:240px"
                        :clearable="false"
                    >
                    </el-date-picker>
                    <el-button
                        type="primary"
                        size="mini"
                        icon="el-icon-search"
                        style="margin-right:10px;"
                        @click="search"
                        circle
                    ></el-button>
                    <i class="el-icon-refresh-right" style="cursor: pointer;font-size:20px" @click="refresh"></i>
                </div>
            </div>
            <div class="content" v-loading="loading">
                <div style="display:flex">
                    <div id="ringData" ref="ringData" style="width:20vw;height:33vh"/>
                    <div>
                        <div class="content_item">
                            <div class="content_item_num">{{ data.sum }}</div>
                            <div class="content_item_text">订单总数量</div>
                        </div>
                        <div class="content_item">
                            <div class="content_item_num">{{ data.refurbishment }}</div>
                            <div class="content_item_text">退舱数量</div>
                        </div>
                        <div class="content_item">
                            <div class="divider"/>
                        </div>
                        <div class="content_item">
                            <div class="content_item_num">{{ data.complete }}</div>
                            <div class="content_item_text">完成数量</div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
      </div>
  </div>
</template>

<script>
import {monthSales, documentQuantityStatistics, completionRate} from "@/api/wel";
import search from "@/page/index/search.vue";
import {dateFormat, defaultDate2,defaultDate3} from "@/util/date";
import SearchQuery from "@/components/iosbasic-data/searchquery.vue";
export default {
  name: "basicContainer",
  props: {
    sysType: Number
  },
  components: {
      SearchQuery
  },
  data() {
    return {
      tenantId: this.$store.getters.userInfo.tenant_id,
      loading: false,
      data: {},
      isActive: 1, // 本日/本月按钮是否选中状态
      realDate:[], // 时间
    };
  },
  created() {
      this.realDate = defaultDate2();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
        if (this.realDate == null) {
            return this.$message.error("请选择日期");
        }
        this.completionRatefun()
    },
    // 获取数据
    completionRatefun(){
        this.loading = true
        completionRate({
            dateStart:this.realDate[0],
            dateEnd:this.realDate[1]
        }).then(res=>{
            console.log(res.data.data,92)
            this.data = res.data.data
        }).finally(() => {
            this.loading = false;
            this.ringData();
        });
    },
    refresh() {
      this.init();
    },
    // 本日按钮
    inDay() {
        this.isActive = 1;
        this.realDate = defaultDate2(); // 获取当天
        this.init();
    },
    // 本月按钮
    inMoon() {
        this.isActive = 2;
        this.realDate = defaultDate3(); // 获取本月第一天和本月最后一天
        this.init();
    },
    // 搜索
    search() {
        this.isActive = 3;
        this.init();
    },
    // echarts配置项
    ringData() {
      let ringData = this.$echarts.init(document.getElementById("ringData"));
      ringData.setOption({
        tooltip: {
          trigger: "item"
        },
        legend: {
          top: "3%",
          left: "center"
        },
        graphic: [
          {
            type: "text",
            left: "center",
            top: "43%",
            style: {
              text: this.data.rate + "%",
              textAlign: "center",
              fill: "#000",
              fontSize: 24
            }
          },
          {
            type: "text",
            left: "center",
            top: "53%",
            style: {
              text: "业务完成率",
              textAlign: "center",
              fill: "#999999",
              fontSize: 16
            }
          }
        ],
        color: ["#F6695E", "#E3E3E3"],
        series: [
          {
            name: "当月报价",
            type: "pie",
            radius: ["55%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            labelLine: {
              show: false
            },
            data: [
              { value: Number(this.data.refurbishment), name: "退舱数量" },
              { value: Number(this.data.complete), name: "完成数量" }
            ]
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home-container {
  padding: 0px 5px 5px 5px;
  box-sizing: border-box;
  height: 100%;
  ::v-deep .el-card__body {
    padding: 10px 15px;
    font-size: 14px;
  }
  &__card {
    width: 100%;
    height: 100%;
  }
  .title {
    display: flex;
    justify-content: space-between;
      .right {
          display: flex;
          align-items: center;
          &_but {
              margin: 0 10px;
              border: 1px solid #409eff;
              width: 80px;
              border-radius: 3px;
              display: flex;
              &_left {
                  width: 40px;
                  text-align: center;
                  color: #409eff;
                  border-right: 1px solid #409eff;
                  cursor: pointer;
              }
              &_right {
                  width: 40px;
                  text-align: center;
                  color: #409eff;
                  cursor: pointer;
              }
              &_active {
                  color: #fff;
                  background-color: #409eff;
              }
          }
      }
  }
}
.content {
  display: flex;
  &_item {
    margin-top: 20px;
    .divider {
      display: block;
      height: 0px;
      width: 12vw;
      border-top: 1px dashed #dcdfe6;
    }
    &_num {
      font-size: 18px;
      font-weight: 600;
    }
    &_text {
      color: #909399;
    }
  }
}
</style>