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

<template>
  <div class="content">
    <div class="bck">
      <el-form :inline="true" :model="queryForm">
        <el-form-item label="">
          <el-date-picker
            v-model="queryForm.aa"
            type="month"
            placeholder="月份"
            @change="onQuery"
          />
        </el-form-item>
        <el-form-item label="">
          <el-radio-group v-model="queryForm.bb" size="large" @change="onQuery">
            <el-radio-button label="本日" />
            <el-radio-button label="本周" />
            <el-radio-button label="本月" />
            <el-radio-button label="今年" />
            <el-radio-button label="其他" />
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <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 type="primary" @click="onQuery">搜索</el-button>
          <el-button type="defualt" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bck statistics" style="margin-top: 10px">
      <div class="item first">
        <div class="left_">
          <div class="money">
            {{ moneyFormat(0, 2) }}
          </div>
          <div>销售额（{{ 0 }}）</div>
        </div>
        <div class="right_">
          <div class="icon">
            <img src="@/assets/images/portrait/icon_sales.png" alt="" />
          </div>
        </div>
      </div>
      <div class="item two">
        <div class="left_">
          <div class="money">
            {{ moneyFormat(0, 2) }}
          </div>
          <div>订单（单）</div>
        </div>
        <div class="right_">
          <div class="icon">
            <img src="@/assets/images/portrait/icon_profits.png" alt="" />
          </div>
        </div>
      </div>
      <div class="item three">
        <div class="left_">
          <div class="money">
            {{ 0 }}
          </div>
          <div>下单客户数（人）</div>
        </div>
        <div class="right_">
          <div class="icon">
            <img src="@/assets/images/portrait/icon_email.png" alt="" />
          </div>
        </div>
      </div>
    </div>

    <div class="bck scatter" style="margin-top: 10px">
      <el-row>
        <el-col :span="8">
          <TitleInfo :content="titleList[0]"></TitleInfo>
          <div ref="echartDom" style="height: 40vh"></div>
        </el-col>
        <el-col :span="16">
          <byTable
            :source="sourceList.scatterData"
            :pagination="sourceList.scatterPagination"
            :config="scatterConfig"
            :loading="scatterLoading"
            highlight-current-row
            :selectConfig="[]"
            @get-list="getList"
          >
          </byTable>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";

import TitleInfo from "@/components/TitleInfo/index.vue";
const titleList = [
  "销售分布",
  "客户分类",
  "业务员销售趋势",
  "商品销售额",
  "商品销量",
];
const { proxy } = getCurrentInstance();
const scatterLoading = ref(false);
const loadingOne = ref(false);
const loadingTwo = ref(false);
const queryForm = reactive({
  beginTime: "",
  endTime: "",
  timeArr: "",
});
const sourceList = ref({
  scatterData: [],
  scatterPagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
  },
});
//图表
const echartDom = ref(null);
let myChart = null;
const option = reactive({
  data: {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "0%",
      left: "center",
    },
    series: [
      {
        name: "销售分布",
        type: "pie",
        radius: ["20%", "50%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [2000, 1000],
      },
    ],
  },
});
const scatterConfig = computed(() => {
  return [
    {
      attrs: {
        label: "序列",
        prop: "receiptWarehouseName",
      },
    },
    {
      attrs: {
        label: "国家",
        prop: "receiptWarehouseName",
      },
    },
    {
      attrs: {
        label: "订单量（单）",
        prop: "receiptWarehouseName",
      },
    },
    {
      attrs: {
        label: "交易金额（￥）",
        prop: "amount",
      },
      render(amount) {
        return proxy.moneyFormat(amount, 2);
      },
    },
  ];
});

const getData = () => {
  // loading.value = true;
  loadingOne.value = true;
  loadingTwo.value = true;
  // proxy.post("/saleQuotation/sourceStatistics", queryForm).then((res) => {
  //   allData.sourceData = res;
  //   setTimeout(() => {
  //     loading.value = false;
  //   }, 200);
  // });
  // proxy.post("/saleQuotation/typeStatistics", queryForm).then((res) => {
  //   allData.typeData = res;
  //   setTimeout(() => {
  //     loadingOne.value = false;
  //   }, 200);
  // });
  proxy.post("/contract/salesStatistics", queryForm).then((res) => {
    console.log(res, "aa");
  });
};

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

const onReset = () => {};
onMounted(() => {
  myChart = echarts.init(echartDom.value);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
  myChart.setOption(option.data);
  getData();
});
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
:deep(.el-form-item) {
  margin-bottom: 0px;
}
.bck {
  background-color: #fff;
  padding: 15px;
}
.statistics {
  display: flex;
  // justify-content: space-around;
  .item {
    border-radius: 10px;
    margin-right: 20px;
    width: 13vw;
    height: 70px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .left_ {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .money {
        font-weight: 700;
        color: #333333;
        font-size: 15px;
      }
    }
    .right_ {
      .icon {
        img {
          width: 20px;
          height: 20px;
          margin-top: 6px;
        }
        width: 34px;
        height: 34px;
        margin-top: 10px;
        border-radius: 8px;
        background-color: #ffffff;
        text-align: center;
        line-height: 34px;
      }
    }
  }
  .first {
    background: linear-gradient(#c7e3fe, #dfecff);
  }
  .two {
    background: linear-gradient(#eae8fb, #ded9ff);
  }
  .three {
    background: linear-gradient(#fcf1e4, #fce5ca);
  }
  .four {
    background: linear-gradient(#e2fbe8, #e2fbe8);
  }
  .five {
    background: linear-gradient(#ffebe9, #ffebe9);
  }
}
.scatter {
  // display: flex;
}
</style>