|
@@ -0,0 +1,946 @@
|
|
|
|
+<template xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
|
|
|
|
+ <div class="app-container">
|
|
|
|
+ <el-form
|
|
|
|
+ :inline="true"
|
|
|
|
+ v-show="true"
|
|
|
|
+ >
|
|
|
|
+ <el-form-item label="选择日期" prop="companyId">
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="uploadDate"
|
|
|
|
+ style="width: 240px"
|
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
|
+ format="yyyy-MM-dd"
|
|
|
|
+ type="daterange"
|
|
|
|
+ range-separator="-"
|
|
|
|
+ start-placeholder="开始日期"
|
|
|
|
+ end-placeholder="结束日期"
|
|
|
|
+ :picker-options="pickerOptions"
|
|
|
|
+ ></el-date-picker>
|
|
|
|
+ </el-form-item>
|
|
|
|
+
|
|
|
|
+ <el-form-item label="选择公司" prop="companyId" v-if="this.$store.getters.roles[0] == 'admin'">
|
|
|
|
+ <el-select
|
|
|
|
+ filterable
|
|
|
|
+ v-model="companyId"
|
|
|
|
+ placeholder="选择公司"
|
|
|
|
+ clearable
|
|
|
|
+ style="width: 240px"
|
|
|
|
+ >
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in companyList"
|
|
|
|
+ :key="item.value"
|
|
|
|
+ :label="item.label"
|
|
|
|
+ :value="item.value"
|
|
|
|
+ >
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item>
|
|
|
|
+ <el-button
|
|
|
|
+ type="primary"
|
|
|
|
+ icon="el-icon-search"
|
|
|
|
+ size="mini"
|
|
|
|
+ @click="handleQuery"
|
|
|
|
+ >搜索
|
|
|
|
+ </el-button
|
|
|
|
+ >
|
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
|
+ >重置
|
|
|
|
+ </el-button>
|
|
|
|
+ </el-form-item>
|
|
|
|
+ </el-form>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <el-row class="top-sum">
|
|
|
|
+ <el-col :span="24">
|
|
|
|
+ <el-card shadow="never" class="top-sum">
|
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
|
+ <span style="font-size: 16px; font-weight: bold; float: left"
|
|
|
|
+ >数据概览</span
|
|
|
|
+ >
|
|
|
|
+ </div>
|
|
|
|
+ <div v-loading="totalOneLoading">
|
|
|
|
+ <el-row class="top-sum" style="display: flex" v-if="!!orderData">
|
|
|
|
+ <el-col :span="8">
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 150px">
|
|
|
|
+ <p class="p-title">预估收入</p>
|
|
|
|
+ <p class="p-main">{{ orderData.income }}</p>
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <p class="p-title-1">
|
|
|
|
+ 环比: <i :style="orderData.incomeRate > 0 ? 'color:red' : 'color:green'"
|
|
|
|
+ >{{ (orderData.incomeRate) + "%" }}
|
|
|
|
+ </i>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ <el-col :span="7">
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 150px">
|
|
|
|
+ <p class="p-title">销售成本</p>
|
|
|
|
+ <p class="p-main">{{ orderData.costPrice }}</p>
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <p class="p-title-1">
|
|
|
|
+ 环比: <i :style="orderData.costPriceRate > 0 ? 'color:red' : 'color:green'"
|
|
|
|
+ >{{ (orderData.costPriceRate) + "%" }}
|
|
|
|
+ </i>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+
|
|
|
|
+ <el-col :span="8">
|
|
|
|
+ <el-card shadow="never" class="card-show" style="height: 150px">
|
|
|
|
+ <p class="p-title">采购成本</p>
|
|
|
|
+ <p class="p-main">{{ orderData.purchaseCost }}</p>
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <p class="p-title-1">
|
|
|
|
+ 环比: <i :style="orderData.purchaseCostRate > 0 ? 'color:red' : 'color:green'"
|
|
|
|
+ >{{ (orderData.purchaseCostRate) + "%" }}
|
|
|
|
+ </i>
|
|
|
|
+ </p>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <el-row class="top-sum" :gutter="24" style="margin-top: 24px">
|
|
|
|
+ <el-col :span="24">
|
|
|
|
+ <el-card
|
|
|
|
+ shadow="never"
|
|
|
|
+ class="card-show"
|
|
|
|
+ style="width: 100%; min-height: 300px"
|
|
|
|
+ v-loading="hourEchartsLoading"
|
|
|
|
+ >
|
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
|
+ <span style="font-size: 16px; font-weight: bold; float: left">收入趋势</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ id="hourEchart"
|
|
|
|
+ ref="hourEchart"
|
|
|
|
+ style="height: 280px; width: 100%;"
|
|
|
|
+ ></div>
|
|
|
|
+ </el-card>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <el-card
|
|
|
|
+ shadow="never"
|
|
|
|
+ class="card-show"
|
|
|
|
+ style="width: 100%; "
|
|
|
|
+ v-loading="itemLoading"
|
|
|
|
+ >
|
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
|
+ <span style="font-size: 16px; font-weight: bold; float: left"
|
|
|
|
+ >单品收入与成本</span>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <el-table
|
|
|
|
+ :data="itemList"
|
|
|
|
+ ref="multipleTable"
|
|
|
|
+
|
|
|
|
+ >
|
|
|
|
+ <el-table-column
|
|
|
|
+ label="商品信息"
|
|
|
|
+ align="center"
|
|
|
|
+ prop="itemTitle"
|
|
|
|
+ width="270"
|
|
|
|
+ >
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
|
+ <div style="width: 40%">
|
|
|
|
+ <img
|
|
|
|
+ :src="scope.row.itemPicUrl"
|
|
|
|
+ alt=""
|
|
|
|
+ style="width: 55px; height: auto"
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div style="width: 60%;height: 55px" class="item-name-calss">
|
|
|
|
+ <a
|
|
|
|
+
|
|
|
|
+ style="
|
|
|
|
+ text-overflow: ellipsis;
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ width: 100%;
|
|
|
|
+ "
|
|
|
|
+ :title="scope.row.itemTitle"
|
|
|
|
+ >
|
|
|
|
+ {{ scope.row.itemTitle }}
|
|
|
|
+ </a>
|
|
|
|
+ <p>商品Id:{{ scope.row.itemId }}</p>
|
|
|
|
+ <p>商品单价:{{ scope.row.price }}</p>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ label="类型"
|
|
|
|
+ align="center"
|
|
|
|
+ prop="itemType"
|
|
|
|
+ >
|
|
|
|
+ <template slot-scope="scope">
|
|
|
|
+ {{ scope.row.itemType }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ <el-table-column
|
|
|
|
+ label="绑定人"
|
|
|
|
+ align="center"
|
|
|
|
+ prop="userName"
|
|
|
|
+ >
|
|
|
|
+ </el-table-column>
|
|
|
|
+
|
|
|
|
+ <el-table-column
|
|
|
|
+ label="招商/采购"
|
|
|
|
+ align="center"
|
|
|
|
+ prop="courtshipPurchaseName"
|
|
|
|
+ >
|
|
|
|
+ </el-table-column>
|
|
|
|
+
|
|
|
|
+ <el-table-column
|
|
|
|
+ label="单数"
|
|
|
|
+ align="center"
|
|
|
|
+ prop="orderNum"
|
|
|
|
+ >
|
|
|
|
+ </el-table-column>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <el-table-column
|
|
|
|
+ label="收入"
|
|
|
|
+ align="center"
|
|
|
|
+ prop="totalFee"
|
|
|
|
+ >
|
|
|
|
+ </el-table-column>
|
|
|
|
+
|
|
|
|
+ <el-table-column
|
|
|
|
+ label="成本"
|
|
|
|
+ align="center"
|
|
|
|
+ prop="costPrice"
|
|
|
|
+ >
|
|
|
|
+ </el-table-column>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ </el-table>
|
|
|
|
+ <pagination
|
|
|
|
+ :auto-scroll="false"
|
|
|
|
+ @current-change="true"
|
|
|
|
+ v-show="itemDataTotal>10"
|
|
|
|
+ :total="itemDataTotal"
|
|
|
|
+ :page.sync="itemParams.pageNum"
|
|
|
|
+ :limit.sync="itemParams.pageSize"
|
|
|
|
+ @pagination="getItemList"
|
|
|
|
+ />
|
|
|
|
+ </el-card>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+
|
|
|
|
+import {
|
|
|
|
+ getCompanyList, getCostDate, getCostTotal, getItemCostList,
|
|
|
|
+ getItemList
|
|
|
|
+} from "@/api/industry/item";
|
|
|
|
+import {scrollTo} from "@/utils/scroll-to";
|
|
|
|
+
|
|
|
|
+var echarts = require("echarts");
|
|
|
|
+export default {
|
|
|
|
+ name: "IndustryCost",
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ hourType: "1",
|
|
|
|
+ companyId: undefined,
|
|
|
|
+ companyList: [],
|
|
|
|
+ shopDataParams: {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10
|
|
|
|
+ },
|
|
|
|
+ shopDataTotal: 0,
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ teamParams: {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10
|
|
|
|
+ },
|
|
|
|
+ teamDataTotal: 0,
|
|
|
|
+ itemParams: {
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10
|
|
|
|
+ },
|
|
|
|
+ itemDataTotal: 0,
|
|
|
|
+
|
|
|
|
+ drawerName: null,
|
|
|
|
+ direction: 'rtl',
|
|
|
|
+ teamDetaildrawer: false,
|
|
|
|
+ drawerLoading: false,
|
|
|
|
+ teamDetailList: [],
|
|
|
|
+ // 遮罩层
|
|
|
|
+ loading: false,
|
|
|
|
+ totalOneLoading: false, // 汇总loading
|
|
|
|
+ echartsLoading: false, //数据分析loading
|
|
|
|
+ hourEchartsLoading: false, //分时loading
|
|
|
|
+ teamList: [], // 分团列表
|
|
|
|
+ itemLoading: false,
|
|
|
|
+ itemList: [],
|
|
|
|
+ teamLoading: false, // 分团队loading
|
|
|
|
+ shopDataLoading: false, // 分推广者loading
|
|
|
|
+ shopList: [],
|
|
|
|
+ deptId: null,
|
|
|
|
+
|
|
|
|
+ // 选中数组
|
|
|
|
+ ids: [],
|
|
|
|
+ // 非单个禁用
|
|
|
|
+ single: true,
|
|
|
|
+ // 非多个禁用
|
|
|
|
+ multiple: true,
|
|
|
|
+ // 显示搜索条件
|
|
|
|
+ showSearch: true,
|
|
|
|
+ // 总条数
|
|
|
|
+
|
|
|
|
+ // 字典表格数据
|
|
|
|
+ typeList: [],
|
|
|
|
+ // 弹出层标题
|
|
|
|
+ title: "",
|
|
|
|
+ // 是否显示弹出层
|
|
|
|
+ open: false,
|
|
|
|
+ userId: undefined,
|
|
|
|
+ // 日期范围
|
|
|
|
+ dateRange: [],
|
|
|
|
+ uploadDate: [new Date(), new Date()],
|
|
|
|
+ pickerOptions: {
|
|
|
|
+ shortcuts: [
|
|
|
|
+ {
|
|
|
|
+ text: "今天",
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: "昨天",
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
|
|
|
|
+ end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
|
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: "最近三天",
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
|
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: "最近一周",
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: "最近一个月",
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: "最近三个月",
|
|
|
|
+ onClick(picker) {
|
|
|
|
+ const end = new Date();
|
|
|
|
+ const start = new Date();
|
|
|
|
+ start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
|
|
|
+ picker.$emit("pick", [start, end]);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ // 销售线索回显
|
|
|
|
+ // 表单参数
|
|
|
|
+ form: {},
|
|
|
|
+
|
|
|
|
+ rules: {},
|
|
|
|
+ // 分配销售展示列表
|
|
|
|
+ saleAllocationList: [],
|
|
|
|
+ topInfo: null,
|
|
|
|
+ orderData: {},
|
|
|
|
+ analysis: {},
|
|
|
|
+ type: 1,
|
|
|
|
+ selectItemType: 0,
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ filters: {},
|
|
|
|
+
|
|
|
|
+ created() {
|
|
|
|
+ this.userId = this.$store.getters.userId;
|
|
|
|
+ // 获取当月的第一天
|
|
|
|
+ let date = new Date();
|
|
|
|
+ let y = date.getFullYear();
|
|
|
|
+ let MM = date.getMonth() + 1;
|
|
|
|
+ MM = MM < 10 ? "0" + MM : MM;
|
|
|
|
+ let dd = date.getDate();
|
|
|
|
+ dd = dd < 10 ? "0" + dd : dd;
|
|
|
|
+ var firstDay = new Date(y, MM - 1, 1); // 月份需要减1,因为getMonth()返回的是0-11
|
|
|
|
+ var startDateDay = ('0' + firstDay.getDate()).slice(-2); // 使用slice来确保总是两位数
|
|
|
|
+ this.uploadDate = [`${y}-${MM}-${startDateDay}`, `${y}-${MM}-${dd}`];
|
|
|
|
+ this.getCompanyList();
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ mounted() {
|
|
|
|
+ this.getSumData();
|
|
|
|
+ this.getGmvHours();
|
|
|
|
+ this.getItemList();
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ methods: {
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ getCompanyList() {
|
|
|
|
+ getCompanyList().then((res) => {
|
|
|
|
+ this.companyList = res.data.map((item) => {
|
|
|
|
+ return {
|
|
|
|
+ label: item.companyName,
|
|
|
|
+ value: item.companyId,
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ handleClose() {
|
|
|
|
+ this.teamDetaildrawer = false;
|
|
|
|
+ this.drawerName = null;
|
|
|
|
+ this.teamDetailList = [];
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+// 获取汇总信息
|
|
|
|
+ getSumData() {
|
|
|
|
+ this.totalOneLoading = true;
|
|
|
|
+ getCostTotal(
|
|
|
|
+ this.addDateRange(
|
|
|
|
+ {userId: this.userId, companyId: this.companyId},
|
|
|
|
+ this.uploadDate,
|
|
|
|
+ "startDate",
|
|
|
|
+ "endDate"
|
|
|
|
+ )
|
|
|
|
+ ).then((response) => {
|
|
|
|
+ this.totalOneLoading = false;
|
|
|
|
+ this.orderData = response.data;
|
|
|
|
+ }).catch((e) => {
|
|
|
|
+ this.totalOneLoading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ // 分时数据
|
|
|
|
+ getGmvHours() {
|
|
|
|
+ this.hourEchartsLoading = true;
|
|
|
|
+ getCostDate(
|
|
|
|
+ this.addDateRange(
|
|
|
|
+ {userId: this.userId, companyId: this.companyId},
|
|
|
|
+ this.uploadDate,
|
|
|
|
+ "startDate",
|
|
|
|
+ "endDate"
|
|
|
|
+ )
|
|
|
|
+ ).then((response) => {
|
|
|
|
+ this.hourEchartsLoading = false;
|
|
|
|
+ this.initEchart(
|
|
|
|
+ 'hourEchart',
|
|
|
|
+ this.hourEchartOption(response.data, [], [])
|
|
|
|
+ )
|
|
|
|
+ }).catch((e) => {
|
|
|
|
+ this.hourEchartsLoading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ getItemList() {
|
|
|
|
+ this.itemLoading = true;
|
|
|
|
+ getItemCostList(
|
|
|
|
+ this.addDateRange(
|
|
|
|
+ {
|
|
|
|
+ ...this.itemParams,
|
|
|
|
+ userId: this.userId,
|
|
|
|
+ companyId: this.companyId
|
|
|
|
+ },
|
|
|
|
+ this.uploadDate,
|
|
|
|
+ "startDate",
|
|
|
|
+ "endDate"
|
|
|
|
+ )
|
|
|
|
+ ).then((response) => {
|
|
|
|
+ this.itemLoading = false;
|
|
|
|
+ this.itemList = response.rows;
|
|
|
|
+ this.itemDataTotal = response.total;
|
|
|
|
+ }).catch((e) => {
|
|
|
|
+ this.itemLoading = false;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ // 取消按钮
|
|
|
|
+ cancel() {
|
|
|
|
+ this.open = false;
|
|
|
|
+ this.reset();
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 表单重置
|
|
|
|
+ reset() {
|
|
|
|
+ this.form = {};
|
|
|
|
+ },
|
|
|
|
+ /** 搜索按钮操作 */
|
|
|
|
+ handleQuery() {
|
|
|
|
+ this.getSumData();
|
|
|
|
+ this.getGmvHours();
|
|
|
|
+ this.getItemList();
|
|
|
|
+ },
|
|
|
|
+ /** 重置按钮操作 */
|
|
|
|
+ resetQuery() {
|
|
|
|
+ let date = new Date();
|
|
|
|
+ let y = date.getFullYear();
|
|
|
|
+ let MM = date.getMonth() + 1;
|
|
|
|
+ MM = MM < 10 ? "0" + MM : MM;
|
|
|
|
+ let dd = date.getDate();
|
|
|
|
+ dd = dd < 10 ? "0" + dd : dd;
|
|
|
|
+ var firstDay = new Date(y, MM - 1, 1); // 月份需要减1,因为getMonth()返回的是0-11
|
|
|
|
+ var startDateDay = ('0' + firstDay.getDate()).slice(-2); // 使用slice来确保总是两位数
|
|
|
|
+ this.uploadDate = [`${y}-${MM}-${startDateDay}`, `${y}-${MM}-${dd}`];
|
|
|
|
+ this.selectItemType = 0;
|
|
|
|
+ this.shopDataParams.pageNum = 1;
|
|
|
|
+ this.shopDataParams.pageSize = 10;
|
|
|
|
+ this.teamParams.pageNum = 1;
|
|
|
|
+ this.teamParams.pageSize = 10;
|
|
|
|
+ this.itemParams.pageNum = 1;
|
|
|
|
+ this.itemParams.pageSize = 10;
|
|
|
|
+ this.companyId = undefined;
|
|
|
|
+ this.handleQuery();
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ /** 获取echart的值 */
|
|
|
|
+ initEchart(idName, optionName) {
|
|
|
|
+ let that = this;
|
|
|
|
+ const chart = this.$refs[idName];
|
|
|
|
+ if (chart) {
|
|
|
|
+ const myChart = echarts.init(document.getElementById(idName));
|
|
|
|
+ myChart.setOption(optionName);
|
|
|
|
+ window.addEventListener("resize", function () {
|
|
|
|
+ that.clientWidth = document.documentElement.clientWidth - 224;
|
|
|
|
+ myChart.resize();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ } /** echarts数据展示 订单统计*/,
|
|
|
|
+ handlerEchartOption(data) {
|
|
|
|
+ let option = {
|
|
|
|
+ noDataLoadingOption: {
|
|
|
|
+ text: "暂无数据",
|
|
|
|
+ effect: "bubble",
|
|
|
|
+ effectOption: {
|
|
|
|
+ effect: {
|
|
|
|
+ n: 0,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: "axis"
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: "3%",
|
|
|
|
+ right: "4%",
|
|
|
|
+ bottom: "3%",
|
|
|
|
+ containLabel: true
|
|
|
|
+ },
|
|
|
|
+ legend: {
|
|
|
|
+ icon: "circle",
|
|
|
|
+ top: "5%",
|
|
|
|
+ right: "5%",
|
|
|
|
+ itemWidth: 6,
|
|
|
|
+ itemGap: 20,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: "#556677"
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ xAxis: {
|
|
|
|
+ type: "category",
|
|
|
|
+ data: data.map((item) => {
|
|
|
|
+ return item.date;
|
|
|
|
+ }),
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ // 坐标轴线
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: "#999"
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ // 分割线
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ type: "dashed",
|
|
|
|
+ color: "#e5e5e5"
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: "value",
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: "#999",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ splitLine: {
|
|
|
|
+ lineStyle: {
|
|
|
|
+ type: "dashed",
|
|
|
|
+ color: "#e5e5e5",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ smooth: true,
|
|
|
|
+ name: "单量",
|
|
|
|
+
|
|
|
|
+ type: "line",
|
|
|
|
+ stack: "总量",
|
|
|
|
+ data: data.map((item) => {
|
|
|
|
+ return item['orderNum'];
|
|
|
|
+ }
|
|
|
|
+ ),
|
|
|
|
+ symbol: "circle",
|
|
|
|
+ symbolSize: 6,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ normal: {width: 2},
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ borderColor: "#ffffff", borderWidth: 0,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ smooth: true,
|
|
|
|
+ name: '有效单量',
|
|
|
|
+ type: "line",
|
|
|
|
+ stack: "有效",
|
|
|
|
+ data: data.map((item) => {
|
|
|
|
+ return item['validOrderNum'];
|
|
|
|
+ }
|
|
|
|
+ ),
|
|
|
|
+ symbol: "circle",
|
|
|
|
+ symbolSize: 6,
|
|
|
|
+ lineStyle:
|
|
|
|
+ {
|
|
|
|
+ normal: {
|
|
|
|
+ width: 2
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ borderColor: "#ffffff",
|
|
|
|
+ borderWidth: 0
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ smooth: true,
|
|
|
|
+ showSymbol: false,
|
|
|
|
+ name: "有效额 (万)",
|
|
|
|
+ type: "line",
|
|
|
|
+ stack: "实时率",
|
|
|
|
+ data: data.map((item) => {
|
|
|
|
+ return (item['validTotalFee'] / 10000).toFixed(2);
|
|
|
|
+ }
|
|
|
|
+ ),
|
|
|
|
+ symbol: "circle",
|
|
|
|
+ symbolSize:
|
|
|
|
+ 6,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ width: 0, // 线宽是0
|
|
|
|
+ color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ borderColor: "#ffffff",
|
|
|
|
+ borderWidth: 0,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ {
|
|
|
|
+ smooth: true,
|
|
|
|
+ showSymbol: false,
|
|
|
|
+ name: "商品数",
|
|
|
|
+ type: "line",
|
|
|
|
+ stack: "",
|
|
|
|
+ data: data.map((item) => {
|
|
|
|
+ return (item['itemCount']);
|
|
|
|
+ }
|
|
|
|
+ ),
|
|
|
|
+ symbol: "circle",
|
|
|
|
+ symbolSize:
|
|
|
|
+ 6,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ width: 0, // 线宽是0
|
|
|
|
+ color: 'rgba(0, 0, 0, 0)' // 线的颜色是透明的
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ borderColor: "#ffffff",
|
|
|
|
+ borderWidth: 0,
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ ;
|
|
|
|
+ return option;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ priceFormat(num, n) {
|
|
|
|
+ n = n || 2;
|
|
|
|
+ let symbol = ",";
|
|
|
|
+ if (num === null) return num;
|
|
|
|
+ if (typeof num !== "number") throw new TypeError("num参数应该是一个number类型");
|
|
|
|
+ if (n < 0) throw new Error("参数n不应该小于0");
|
|
|
|
+ let hasDot = parseInt(num) != num; //这里检测num是否为小数,true表示小数
|
|
|
|
+ let m = n != undefined && n != null ? n : 1;
|
|
|
|
+ num =
|
|
|
|
+ m == 0
|
|
|
|
+ ? num.toFixed(m) + "."
|
|
|
|
+ : hasDot
|
|
|
|
+ ? n
|
|
|
|
+ ? num.toFixed(n)
|
|
|
|
+ : num
|
|
|
|
+ : num.toFixed(m);
|
|
|
|
+ symbol = symbol || ",";
|
|
|
|
+ num = num.toString().replace(/(\d)(?=(\d{3})+\.)/g, function (match, p1, p2) {
|
|
|
|
+ return p1 + symbol;
|
|
|
|
+ });
|
|
|
|
+ if (n == 0 || (!hasDot && !n)) {
|
|
|
|
+ //如果n为0或者传入的num是整数并且没有指定整数的保留位数,则去掉前面操作中的小数位
|
|
|
|
+ num = num.substring(0, num.indexOf("."));
|
|
|
|
+ }
|
|
|
|
+ return num;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ hourEchartOption(dataList, timeData, lengthData) {
|
|
|
|
+ var that = this
|
|
|
|
+ if (!!dataList) {
|
|
|
|
+ let option = {
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '3%',
|
|
|
|
+ right: '4%',
|
|
|
|
+ bottom: '3%',
|
|
|
|
+ containLabel: true,
|
|
|
|
+ },
|
|
|
|
+ xAxis: [
|
|
|
|
+ {
|
|
|
|
+ name: '日期',
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ data:
|
|
|
|
+ dataList.map((item) => {
|
|
|
|
+ return item.sendTime
|
|
|
|
+ }),
|
|
|
|
+ position: 'bottom',
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'value',
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '收入',
|
|
|
|
+ type: 'line',
|
|
|
|
+ smooth: true,
|
|
|
|
+ symbol: 'circle',
|
|
|
|
+ xAxisIndex: 0,
|
|
|
|
+ data:
|
|
|
|
+ dataList.map((item) => {
|
|
|
|
+ return item.totalFee
|
|
|
|
+ }),
|
|
|
|
+
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#00BFFF',
|
|
|
|
+ width: 2,
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: '#00BFFF',
|
|
|
|
+ borderWidth: 2,
|
|
|
|
+ borderColor: '#00BFFF',
|
|
|
|
+ },
|
|
|
|
+ id: 0,
|
|
|
|
+ }
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ return option
|
|
|
|
+ } else {
|
|
|
|
+ let optionTwo = {
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ formatter: function (params) {
|
|
|
|
+ // console.log(params)
|
|
|
|
+ if (
|
|
|
|
+ that.dataType == 3 &&
|
|
|
|
+ moment(that.dateValue[0]).format('YYYY-MM-DD') ==
|
|
|
|
+ moment(that.dateValue[1]).format('YYYY-MM-DD')
|
|
|
|
+ ) {
|
|
|
|
+ return `${params[0].marker}${params[0].name}时: ${params[0].value}`
|
|
|
|
+ } else {
|
|
|
|
+ return `${params[0].marker}${params[0].name}: ${params[0].value}`
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ left: '3%',
|
|
|
|
+ right: '4%',
|
|
|
|
+ bottom: '3%',
|
|
|
|
+ containLabel: true,
|
|
|
|
+ },
|
|
|
|
+ xAxis: [
|
|
|
|
+ {
|
|
|
|
+ id: 0,
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ data: todayList.map((item) => {
|
|
|
|
+ return item.time
|
|
|
|
+ }),
|
|
|
|
+ position: 'bottom',
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+
|
|
|
|
+ yAxis: {
|
|
|
|
+ type: 'value',
|
|
|
|
+ },
|
|
|
|
+ series: [
|
|
|
|
+ {
|
|
|
|
+ name: '今天',
|
|
|
|
+ type: 'line',
|
|
|
|
+ smooth: true,
|
|
|
|
+ symbol: 'circle',
|
|
|
|
+ xAxisIndex: 0,
|
|
|
|
+ data:
|
|
|
|
+ this.dataType == 0
|
|
|
|
+ ? this.mediaDimension === 'a'
|
|
|
|
+ ? todayList.map((item) => {
|
|
|
|
+ return item.cost
|
|
|
|
+ })
|
|
|
|
+ : todayList.map((item) => {
|
|
|
|
+ return item.charge
|
|
|
|
+ })
|
|
|
|
+ : todayList.map((item) => {
|
|
|
|
+ return item.count
|
|
|
|
+ }),
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#00BFFF',
|
|
|
|
+ width: 2,
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: '#00BFFF',
|
|
|
|
+ borderWidth: 2,
|
|
|
|
+ borderColor: '#00BFFF',
|
|
|
|
+ },
|
|
|
|
+ id: 0,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ }
|
|
|
|
+ return optionTwo
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.top-class {
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-family: cursive;
|
|
|
|
+ font-size: 28px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .top-left {
|
|
|
|
+ flex: 1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .top-right {
|
|
|
|
+ flex: 1;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: end;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-family: none;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.p-main-data {
|
|
|
|
+ margin: 0;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.flex-class {
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.top-sum {
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
+
|
|
|
|
+ ::v-deep .card-show {
|
|
|
|
+ text-align: center;
|
|
|
|
+
|
|
|
|
+ .p-title {
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ color: darkgray;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .p-title-1 {
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: darkgray;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ margin-right: 1px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ .p-main {
|
|
|
|
+ width: 100%;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .like-a {
|
|
|
|
+ color: cornflowerblue;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+::v-deep .el-form-item__label {
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+}
|
|
|
|
+</style>
|