|
|
@@ -7,100 +7,289 @@
|
|
|
</div>
|
|
|
<!-- <el-card shadow="hover"> -->
|
|
|
<el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
|
|
|
- <el-tab-pane label="销售业绩" name="1">
|
|
|
- <!-- 搜索 -->
|
|
|
- <el-form :inline="true" size="small" v-model="listQuery1">
|
|
|
- <el-form-item label="合同编号">
|
|
|
- <el-input v-model="listQuery1.contractNo" placeholder="合同编号" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="客户姓名">
|
|
|
- <el-input v-model="listQuery1.customerName" placeholder="客户姓名" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="线索编号">
|
|
|
- <el-input v-model="listQuery1.leadNo" placeholder="线索编号" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="订单编号">
|
|
|
- <el-input v-model="listQuery1.orderNo" placeholder="订单编号" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="跟进人姓名">
|
|
|
- <el-input v-model="listQuery1.followName" placeholder="跟进人姓名" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="服务模式">
|
|
|
- <el-select
|
|
|
- v-model="listQuery1.serviceModel"
|
|
|
- clearable
|
|
|
-
|
|
|
- placeholder="服务模式"
|
|
|
- >
|
|
|
- <el-option v-for="(value,key) in servantModelList" :key="key" :label="value" :value="key"></el-option>
|
|
|
- </el-select>
|
|
|
-
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="合同状态">
|
|
|
-
|
|
|
- <el-select
|
|
|
- v-model="listQuery1.state"
|
|
|
- placeholder="合同状态"
|
|
|
- clearable
|
|
|
-
|
|
|
- >
|
|
|
- <el-option value="1" label="待签署"></el-option>
|
|
|
- <el-option value="2" label="已签署（待审核）"></el-option>
|
|
|
- <el-option value="3" label="已取消"></el-option>
|
|
|
- <el-option value="4" label="签署完成"></el-option>
|
|
|
- </el-select>
|
|
|
-
|
|
|
-
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item>
|
|
|
- <el-button icon="el-icon-search" type="primary" plan @click="querySearch1">查询</el-button>
|
|
|
- <el-button type="primary" icon="el-icon-download" @click="downloadServant1" v-per="'nannyDataDownload1'">导出</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ <el-tab-pane label="全部三嫂数据" name="1">
|
|
|
+ <div class="top-data">
|
|
|
+ <div class="data-left">
|
|
|
+ <div class="data-left-item">
|
|
|
+ <div class="data-left-item-title">本月累计业绩</div>
|
|
|
+ <div class="data-left-item-value1">
|
|
|
+ {{ nannyData.dyYjMoney }}￥
|
|
|
+ </div>
|
|
|
+ <div class="data-left-item-value2">
|
|
|
+ <span
|
|
|
+ class="green"
|
|
|
+ :class="{ red: nannyData.dyTbZbType == 0 }"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="greena"
|
|
|
+ :class="{ reda: nannyData.dyTbZbType == 0 }"
|
|
|
+ >{{ nannyData.dyTbZb }}%</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="data-right-item">
|
|
|
+ <div class="data-right-item-title">
|
|
|
+ 全量线索量：{{ nannyData.dyXsCount }}
|
|
|
+ </div>
|
|
|
+ <div class="data-right-item-title">
|
|
|
+ 全量线索订单：{{ nannyData.dyDdCount }}
|
|
|
+ </div>
|
|
|
+ <div class="data-right-item-title">
|
|
|
+ 月平均客单价：{{ nannyData.dyKdMoney }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="data-right">
|
|
|
+ <div class="data-left-item" style="width: 50%;">
|
|
|
+ <div class="data-left-item-title">上月累计业绩</div>
|
|
|
+ <div class="data-left-item-value1">
|
|
|
+ {{ nannyData.syYjMoney }}￥
|
|
|
+ </div>
|
|
|
+ <div class="data-left-item-value2">
|
|
|
+ <span
|
|
|
+ class="green"
|
|
|
+ :class="{ red: nannyData.syTbZbType == 0 }"
|
|
|
+ ></span>
|
|
|
+ <span class="greena" :class="{ red: nannyData.syTbZbType == 0 }"
|
|
|
+ >{{ nannyData.syTbZb }}%</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="data-right-item">
|
|
|
+ <div class="data-right-item-title">
|
|
|
+ 全量线索量：{{ nannyData.syXsCount }}
|
|
|
+ </div>
|
|
|
+ <div class="data-right-item-title">
|
|
|
+ 全量线索订单：{{ nannyData.syDdCount }}
|
|
|
+ </div>
|
|
|
+ <div class="data-right-item-title">
|
|
|
+ 月平均客单价：{{ nannyData.syKdMoney }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 列表数据 -->
|
|
|
+ <div class="middle-data">
|
|
|
+ <div class="middle-data-box">
|
|
|
+ <div class="middle-data-box-left">
|
|
|
+ <img src="https://jzmall.lifejingzhi.com/file/jzreport/xs.png" />
|
|
|
+ </div>
|
|
|
+ <div class="middle-data-box-right">
|
|
|
+ <div style="color: #999;">今日全量线索</div>
|
|
|
+ <div class="middle-data-box-right-value">
|
|
|
+ {{ nannyData.jrXsCount }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="green"
|
|
|
+ :class="{ red: nannyData.jrSxTbType == 0 }"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="greena"
|
|
|
+ :class="{ reda: nannyData.jrSxTbType == 0 }"
|
|
|
+ >{{ nannyData.jrSxTbZb }}%</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middle-data-box">
|
|
|
+ <div class="middle-data-box-left">
|
|
|
+ <img src="https://jzmall.lifejingzhi.com/file/jzreport/dd.png" />
|
|
|
+ </div>
|
|
|
+ <div class="middle-data-box-right">
|
|
|
+ <div style="color: #999;">全量线索订单</div>
|
|
|
+ <div class="middle-data-box-right-value">
|
|
|
+ {{ nannyData.jrDdCount }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="green"
|
|
|
+ :class="{ red: nannyData.jrDdCountTbType == 0 }"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="greena"
|
|
|
+ :class="{ reda: nannyData.jrDdCountTbType == 0 }"
|
|
|
+ >{{ nannyData.jrDdCountTbZb }}%</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middle-data-box">
|
|
|
+ <div class="middle-data-box-left">
|
|
|
+ <img src="https://jzmall.lifejingzhi.com/file/jzreport/zhl.png" />
|
|
|
+ </div>
|
|
|
+ <div class="middle-data-box-right">
|
|
|
+ <div style="color: #999;">全量线索转化率</div>
|
|
|
+ <div class="middle-data-box-right-value">
|
|
|
+ {{ nannyData.jrXszhl }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="green"
|
|
|
+ :class="{ red: nannyData.jrXszhlTbType == 0 }"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="greena"
|
|
|
+ :class="{ reda: nannyData.jrXszhlTbType == 0 }"
|
|
|
+ >{{ nannyData.jrXszhlTbZb }}%</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middle-data-box">
|
|
|
+ <div class="middle-data-box-left">
|
|
|
+ <img src="https://jzmall.lifejingzhi.com/file/jzreport/zyj.png" />
|
|
|
+ </div>
|
|
|
+ <div class="middle-data-box-right">
|
|
|
+ <div style="color: #999;">今日总业绩</div>
|
|
|
+ <div class="middle-data-box-right-value">
|
|
|
+ {{ nannyData.jrYjMoney }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="green"
|
|
|
+ :class="{ red: nannyData.jrYjMoneyTbType == 0 }"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="greena"
|
|
|
+ :class="{ reda: nannyData.jrYjMoneyTbType == 0 }"
|
|
|
+ >{{ nannyData.jrYjMoneyTbZb }}%</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="middle-data-box">
|
|
|
+ <div class="middle-data-box-left">
|
|
|
+ <img src="https://jzmall.lifejingzhi.com/file/jzreport/kdj.png" />
|
|
|
+ </div>
|
|
|
+ <div class="middle-data-box-right">
|
|
|
+ <div style="color: #999;">今日均客单价</div>
|
|
|
+ <div class="middle-data-box-right-value">
|
|
|
+ {{ nannyData.jrKdMoney }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span
|
|
|
+ class="green"
|
|
|
+ :class="{ red: nannyData.jrKdMoneyTbType == 0 }"
|
|
|
+ ></span>
|
|
|
+ <span
|
|
|
+ class="greena"
|
|
|
+ :class="{ reda: nannyData.jrKdMoneyTbType == 0 }"
|
|
|
+ >{{ nannyData.jrKdMoneyTbZb }}%</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <el-table :data="listData1" border style="width: 100%" class="table">
|
|
|
- <el-table-column prop="leadId" label="线索id" width="50px" fixed="left"></el-table-column>
|
|
|
- <el-table-column prop="leadNo" label="线索编号" width="120px" ></el-table-column>
|
|
|
- <el-table-column prop="contractNo" label="合同编号" ></el-table-column>
|
|
|
- <el-table-column prop="sourceName" label="来源名称" ></el-table-column>
|
|
|
- <el-table-column prop="orderNo" label="订单编号" ></el-table-column>
|
|
|
- <el-table-column prop="serviceModel" label="服务模式"></el-table-column>
|
|
|
- <el-table-column prop="createTime" label="创建日期"></el-table-column>
|
|
|
- <el-table-column prop="state" label="合同状态"></el-table-column>
|
|
|
- <el-table-column prop="payFee" label="订单关联凭证支付金额"></el-table-column>
|
|
|
- <el-table-column prop="contractFee" label="居间服务费用"></el-table-column>
|
|
|
- <el-table-column prop="refundFee" label="订单关联凭证退款金额"></el-table-column>
|
|
|
- <el-table-column prop="serviceBeginDate" label="服务开始日期"></el-table-column>
|
|
|
- <el-table-column prop="serviceEndDate" label="服务结束日期"></el-table-column>
|
|
|
- <el-table-column prop="resignDate" label="解约时间"></el-table-column>
|
|
|
- <el-table-column prop="firstShanghuDate" label="首次上户时间"></el-table-column>
|
|
|
- <el-table-column prop="createUserName" label="跟进人"></el-table-column>
|
|
|
- <el-table-column prop="customerName" label="客户姓名"></el-table-column>
|
|
|
- <el-table-column prop="approveTime" label="审核时间"></el-table-column>
|
|
|
+ <div class="charts-data">
|
|
|
+ <div class="charts-data-left">
|
|
|
+ <div class="chart-title">
|
|
|
+ <div class="chart-title-left">城市数据汇总</div>
|
|
|
+ <div class="chart-title-right">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="cityDateType"
|
|
|
+ size="mini"
|
|
|
+ @input="cityDateChange"
|
|
|
+ >
|
|
|
+ <el-radio-button label="1">昨日</el-radio-button>
|
|
|
+ <el-radio-button label="2">当月</el-radio-button>
|
|
|
+ <el-radio-button label="3">上月</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chart-title chart-title1">
|
|
|
+ <div class="chart-yeji">
|
|
|
+ <el-tabs v-model="cityDataType" @tab-click="cityDataChange">
|
|
|
+ <el-tab-pane label="业绩" name="1"></el-tab-pane>
|
|
|
+ <el-tab-pane label="订单量" name="2"></el-tab-pane>
|
|
|
+ <el-tab-pane label="客单价" name="3"></el-tab-pane>
|
|
|
+ <el-tab-pane label="线索量" name="4"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- <el-table-column prop="effectiveDistribution" label="是否有效分配">
|
|
|
- <template slot-scope="scope">
|
|
|
- <span v-if="scope.row.effectiveDistribution==1">是</span>
|
|
|
- <span v-if="scope.row.effectiveDistribution==0">否</span>
|
|
|
- </template>
|
|
|
- </el-table-column> -->
|
|
|
+ <div>
|
|
|
+ <el-select
|
|
|
+ v-model="channel"
|
|
|
+ clearable
|
|
|
+ placeholder="全部渠道"
|
|
|
+ @change="handleSelectChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in sourceList"
|
|
|
+ :key="item.id"
|
|
|
+ :value="item.sourceName"
|
|
|
+ :label="item.sourceName"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ ref="charts"
|
|
|
+ id="mains"
|
|
|
+ style="width: 100%; height: 440px; margin-top: 10px"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="charts-data-right" s>
|
|
|
+ <div class="chart-title chart-title2">
|
|
|
+ <div class="chart-title-left">服务分类</div>
|
|
|
+ <div class="chart-title-right">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="serviceOrderType"
|
|
|
+ size="mini"
|
|
|
+ @input="serviceOrderChange"
|
|
|
+ >
|
|
|
+ <el-radio-button label="1">昨日</el-radio-button>
|
|
|
+ <el-radio-button label="2">当月</el-radio-button>
|
|
|
+ <el-radio-button label="3">上月</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex;">
|
|
|
+ <div
|
|
|
+ class="box"
|
|
|
+ ref="chartContainer"
|
|
|
+ id="main"
|
|
|
+ style="width: 50%; height: 440px"
|
|
|
+ ></div>
|
|
|
+ <div class="table" style="width: 50%;height: 440px;">
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ :highlight-current-row="false"
|
|
|
+ :stripe="false"
|
|
|
+ >
|
|
|
+ <el-table-column width="20">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div
|
|
|
+ class="color-block"
|
|
|
+ :style="{
|
|
|
+ backgroundColor: colors[scope.$index % colors.length]
|
|
|
+ }"
|
|
|
+ ></div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
|
|
|
- </el-table>
|
|
|
-
|
|
|
- <!-- 分页 -->
|
|
|
- <pagination
|
|
|
- :total="total1"
|
|
|
- :page.sync="currentPage1"
|
|
|
- :limit.sync="pageSize1"
|
|
|
- @pagination="querySearch1"
|
|
|
- />
|
|
|
+ <el-table-column prop="serviceModel">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="margin-left: 10px">{{
|
|
|
+ scope.row.serviceModel
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="kdj" label="客单价" width="80">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="count" label="成单数量" width="80">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="payAmount" label="签约金额" width="80">
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-tab-pane>
|
|
|
-
|
|
|
</el-tabs>
|
|
|
|
|
|
<!-- </el-card> -->
|
|
|
@@ -113,102 +302,482 @@ import url from "@/script/baseUrl.js";
|
|
|
import Service from "../script/api/service";
|
|
|
import globalData from "@/components/common/globaldata/global.data.vue";
|
|
|
import commutil from "@/components/common/globaldata/commutil.data.vue";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import { data } from "jquery";
|
|
|
// import addTrainHisDia from './components/addTrainHisDia';
|
|
|
export default {
|
|
|
components: { Pagination },
|
|
|
+ computed: {
|
|
|
+ colors() {
|
|
|
+ return this.option.color;
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- activeTab:'1',
|
|
|
- listData1: [],
|
|
|
- total1: 0,
|
|
|
- pageSize1: 20,
|
|
|
- currentPage1: 1, //当前页
|
|
|
- listQuery1: {
|
|
|
- contractNo: "",
|
|
|
- customerName:'',
|
|
|
- leadNo:'',
|
|
|
- orderNo:'',
|
|
|
- followName:'',
|
|
|
- serviceModel:'',
|
|
|
- state:'',
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- servantModelList:commutil.serviceModelMap,
|
|
|
-
|
|
|
- pickerOptions: {
|
|
|
- shortcuts: [
|
|
|
- {
|
|
|
- text: "最近一周",
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
- picker.$emit("pick", [start, end]);
|
|
|
- }
|
|
|
+ activeTab: "1",
|
|
|
+ serviceOrderType: 3,
|
|
|
+ cityDateType: 3,
|
|
|
+ cityDataType: "1",
|
|
|
+ channel: "",
|
|
|
+ channelId: "",
|
|
|
+ charts: null,
|
|
|
+ options: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ // 坐标轴指示器，坐标轴触发有效
|
|
|
+ type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ grid: {
|
|
|
+ left: "4%",
|
|
|
+ right: "10%",
|
|
|
+ bottom: "0%",
|
|
|
+ top: "0%", //去掉标题，图表整体往上移动
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "value",
|
|
|
+ show: false, //直接设置show|的属性的话x轴的轴线和垂直于它的网格线以及x轴数据会一起显示隐藏，这里需要全部隐藏包括所以直接show，如果需要单独给它们设置显示隐藏详见以下设置
|
|
|
+ bottom: 2,
|
|
|
+ boundaryGap: ["0%", "1%"] //留白大小，坐标轴1边留白,横向柱状图的右侧label**人不会超出宽度被隐藏
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ boundaryGap: ["0%", "1%"], //留白大小，坐标轴1边留白
|
|
|
+ axisLabel: {
|
|
|
+ fontSize: 12,
|
|
|
+ fontWeight: 800,
|
|
|
+ interval: 0,
|
|
|
+ margin: 10
|
|
|
},
|
|
|
- {
|
|
|
- text: "最近半个月",
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
|
|
|
- picker.$emit("pick", [start, end]);
|
|
|
- }
|
|
|
+ type: "category",
|
|
|
+ data: [],
|
|
|
+ axisTick: {
|
|
|
+ //y轴刻度线
|
|
|
+ show: false
|
|
|
},
|
|
|
+ axisLine: {
|
|
|
+ //y轴轴线
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
{
|
|
|
- text: "最近一月",
|
|
|
- onClick(picker) {
|
|
|
- const end = new Date();
|
|
|
- const start = new Date();
|
|
|
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
|
|
- picker.$emit("pick", [start, end]);
|
|
|
- }
|
|
|
+ name: "",
|
|
|
+ top: 10,
|
|
|
+ color: "#00A6FC",
|
|
|
+ type: "bar",
|
|
|
+ stack: "总量",
|
|
|
+ barCategoryGap: 2,
|
|
|
+ itemStyle: {
|
|
|
+ //通常情况下：
|
|
|
+ normal: {
|
|
|
+ //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
|
|
|
+ color: function(params) {
|
|
|
+ var colorList = [
|
|
|
+ ["#1CAEFE", "#EEF1F2"],
|
|
|
+ ["#1CAEFE", "#EEF1F2"],
|
|
|
+ ["#1CAEFE", "#EEF1F2"],
|
|
|
+ ["#1CAEFE", "#EEF1F2"],
|
|
|
+ ["#1CAEFE", "#EEF1F2"],
|
|
|
+ ["#1CAEFE", "#EEF1F2"],
|
|
|
+ ["#1CAEFE", "#EEF1F2"],
|
|
|
+ ["#1CAEFE", "#EEF1F2"]
|
|
|
+ ];
|
|
|
+ var index = params.dataIndex;
|
|
|
+ if (params.dataIndex >= colorList.length) {
|
|
|
+ index = params.dataIndex - colorList.length;
|
|
|
+ }
|
|
|
+ return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: colorList[index][0]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: colorList[index][1]
|
|
|
+ }
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ formatter: "{c}",
|
|
|
+ right: "3%",
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: 400,
|
|
|
+ fontSize: 14,
|
|
|
+ color: "#069AE6"
|
|
|
+ },
|
|
|
+ position: "right"
|
|
|
+ },
|
|
|
+ //设置柱的宽度
|
|
|
+ barWidth: 18,
|
|
|
+ data: []
|
|
|
}
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ chartInstance: null,
|
|
|
+ option: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter:"{b}:{d}%"
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ left: "left",
|
|
|
+ top: "center",
|
|
|
+ data: []
|
|
|
+ },
|
|
|
+ color: [
|
|
|
+ "#FFD3D3",
|
|
|
+ "#FF9797",
|
|
|
+ "#9E79FF",
|
|
|
+ "#FA9BFF",
|
|
|
+ "#B9DEFF",
|
|
|
+ "#BAFFDC",
|
|
|
+ "#FFEBBA"
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ radius: "50%",
|
|
|
+ label: {
|
|
|
+ formatter: "{b}: {d}%"
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ citydata: null,
|
|
|
+ serviceData: null,
|
|
|
+ nannyData: {},
|
|
|
+ sourceList: [],
|
|
|
+ cityType: ""
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- this.querySearch1();
|
|
|
-
|
|
|
+ this.initBarChart();
|
|
|
+ this.initPieChart();
|
|
|
+ this.getNannyData();
|
|
|
+ this.getSource();
|
|
|
+ this.getCityData();
|
|
|
+ this.getServiceData();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.disposePieChart();
|
|
|
+ this.disposeBarChart();
|
|
|
},
|
|
|
methods: {
|
|
|
- querySearch1() {
|
|
|
- let temp=this.listQuery1;
|
|
|
- temp.pageNo=this.currentPage1;
|
|
|
- temp.pageSize=this.pageSize1;
|
|
|
- temp.exportFlag=false;
|
|
|
- Service.$axiosSansaoContractList(temp)
|
|
|
+ getSource() {
|
|
|
+ Service.$axiosGetSource()
|
|
|
.then(res => {
|
|
|
- this.listData1 = res.data.data.list;
|
|
|
- this.total1 = res.data.data.total;
|
|
|
+ this.sourceList = res.data.data;
|
|
|
})
|
|
|
.catch(err => {
|
|
|
console.log(err);
|
|
|
});
|
|
|
},
|
|
|
-
|
|
|
- downloadServant1() {
|
|
|
- let temp=this.listQuery1;
|
|
|
- temp.exportFlag=true;
|
|
|
- Service.$axiosSansaoContractListExport(temp)
|
|
|
-
|
|
|
+ getNannyData() {
|
|
|
+ Service.$axiosGetNannyData()
|
|
|
+ .then(res => {
|
|
|
+ this.nannyData = res.data.data;
|
|
|
+ // console.log(res.data.data);
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
},
|
|
|
- handleTabClick(tab){
|
|
|
-
|
|
|
+ getCityData() {
|
|
|
+ let params = {
|
|
|
+ dateType: this.cityDateType,
|
|
|
+ dataType: this.cityDataType,
|
|
|
+ channelId: this.channelId
|
|
|
+ };
|
|
|
+ Service.$axiosGetNannyCityStation(params)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.errno == 0) {
|
|
|
+ this.options.yAxis.data = res.data.data.cityList.reverse();
|
|
|
+ this.options.series[0].data = res.data.data.data.reverse();
|
|
|
+ if(this.cityDataType==1){
|
|
|
+ this.options.series[0].name="业绩"
|
|
|
+ }else if(this.cityDataType==2){
|
|
|
+ this.options.series[0].name="订单量"
|
|
|
+ }else if(this.cityDataType==3){
|
|
|
+ this.options.series[0].name="客单价"
|
|
|
+ }else if(this.cityDataType==4){
|
|
|
+ this.options.series[0].name="线索量"
|
|
|
+ }
|
|
|
+ this.initBarChart();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getServiceData() {
|
|
|
+ let params = {
|
|
|
+ dateType: this.serviceOrderType
|
|
|
+ };
|
|
|
+ Service.$axiosGetNannyServiceMode(params)
|
|
|
+ .then(res => {
|
|
|
+ if (res.data.errno == 0) {
|
|
|
+ // console.log("服务模式", res.data.data);
|
|
|
+ // console.log("服务模式1", res.data.data.serviceModelZb);
|
|
|
+ // console.log("服务模式2", res.data.data.serviceModel);
|
|
|
+ this.tableData = res.data.data.serviceModel.reverse();
|
|
|
+ this.option.series[0].data = res.data.data.serviceModelZb.reverse();
|
|
|
+ this.initPieChart();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {});
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
|
|
|
+ cityDataChange(tab, event) {
|
|
|
+ console.log("cityDataType", this.cityDataType);
|
|
|
+ this.getCityData();
|
|
|
+ },
|
|
|
+ cityDateChange(val) {
|
|
|
+ console.log(this.cityDateType);
|
|
|
+ this.getCityData();
|
|
|
+ },
|
|
|
+ //选中的渠道id
|
|
|
+ handleSelectChange(newValue) {
|
|
|
+ // newValue是当前选中的sourceName
|
|
|
+ const selectedOption = this.sourceList.find(
|
|
|
+ item => item.sourceName === newValue
|
|
|
+ );
|
|
|
+ if (selectedOption) {
|
|
|
+ const id = selectedOption.id;
|
|
|
+ console.log("选中项的ID是:", id);
|
|
|
+ this.channelId = id;
|
|
|
+ console.log(this.channelId);
|
|
|
+ this.getCityData();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ serviceOrderChange(val) {
|
|
|
+ // console.log(val);
|
|
|
+ console.log(this.serviceOrderType);
|
|
|
+ this.getServiceData();
|
|
|
+ },
|
|
|
+ handleTabClick(tab) {},
|
|
|
+ initPieChart() {
|
|
|
+ this.chartInstance = echarts.init(this.$refs.chartContainer);
|
|
|
+ this.chartInstance.setOption(this.option);
|
|
|
+ },
|
|
|
+ disposePieChart() {
|
|
|
+ if (this.chartInstance) {
|
|
|
+ this.chartInstance.dispose();
|
|
|
+ this.chartInstance = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ initBarChart() {
|
|
|
+ this.charts = echarts.init(this.$refs.charts);
|
|
|
+ this.charts.setOption(this.options);
|
|
|
+ },
|
|
|
+ disposeBarChart() {
|
|
|
+ if (this.charts) {
|
|
|
+ this.charts.dispose();
|
|
|
+ this.charts = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
.crumbs {
|
|
|
- margin: 0 0 10px 0;
|
|
|
+ margin: 0 0 10px 0;
|
|
|
+}
|
|
|
+.data-left::after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 2px;
|
|
|
+ background-color: #cecece;
|
|
|
+ height: 160px;
|
|
|
+}
|
|
|
+.el-tabs__content {
|
|
|
+ background-color: #f3f5f6;
|
|
|
+}
|
|
|
+
|
|
|
+.green {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border: 8px solid transparent;
|
|
|
+ border-bottom: 8px solid green;
|
|
|
+}
|
|
|
+.greena {
|
|
|
+ color: green;
|
|
|
+}
|
|
|
+.red {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border: 8px solid transparent;
|
|
|
+ border-top: 8px solid red;
|
|
|
+ margin-top: 4px;
|
|
|
+ position: relative;
|
|
|
+ top: 6px;
|
|
|
+}
|
|
|
+.reda {
|
|
|
+ color: red;
|
|
|
+}
|
|
|
+.top-data {
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30px 50px;
|
|
|
+}
|
|
|
+.data-left,
|
|
|
+.data-right {
|
|
|
+ display: flex;
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+.data-left-item-title {
|
|
|
+ color: #999;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+.data-left-item-value1 {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ margin: 15px 0 12px;
|
|
|
+}
|
|
|
+.data-left-item {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.data-right-item {
|
|
|
+ width: 50%;
|
|
|
+ text-align: left;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+.data-left-item-value2 {
|
|
|
+ color: green;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+.middle-data {
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 20px auto;
|
|
|
+ padding: 30px 40px;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.middle-data-box {
|
|
|
+ width: 20%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.middle-data-box-left {
|
|
|
+ width: 100px;
|
|
|
+ height: 80px;
|
|
|
+}
|
|
|
+.middle-data-box-left img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.middle-data-box-right {
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 50%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.middle-data-box-right-value {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 24px;
|
|
|
+ margin: 15px 0 12px;
|
|
|
+}
|
|
|
+.charts-data {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.charts-data-left,
|
|
|
+.charts-data-right {
|
|
|
+ width: 49%;
|
|
|
+ height: 580px;
|
|
|
+ background-color: #fff;
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+.chart-title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ padding-left: 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.chart-title1 {
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ height: 42px;
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.chart-title2 {
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+.chart-title-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.chart-yeji {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ width: 200px;
|
|
|
+ height: 30px;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.el-table .el-table__row {
|
|
|
+ height: 50px; /* 举例：设置行高为50px */
|
|
|
+}
|
|
|
+.el-table {
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(205, 236, 247, 0.1) !important;
|
|
|
+}
|
|
|
+.el-table th,
|
|
|
+.el-table tr {
|
|
|
+ background-color: rgba(205, 236, 247, 0.1) !important;
|
|
|
+}
|
|
|
+.el-table .el-table__row {
|
|
|
+ height: 58px;
|
|
|
+ background: rgba(205, 236, 247, 0.1);
|
|
|
+}
|
|
|
+.color-block {
|
|
|
+ width: 10px; /* 颜色块的宽度 */
|
|
|
+ height: 10px; /* 颜色块的高度 */
|
|
|
+ display: inline-block; /* 内联块级元素 */
|
|
|
+ border-radius: 50%;
|
|
|
+}
|
|
|
+.blue {
|
|
|
+ background-color: #20b5eb;
|
|
|
+}
|
|
|
+
|
|
|
+.el-select > .el-input {
|
|
|
+ display: block;
|
|
|
+ width: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-radio-button .el-radio-button__inner {
|
|
|
+ width: 100px;
|
|
|
+}
|
|
|
+.chart-yeji .el-tabs__nav-wrap::after {
|
|
|
+ position: static !important;
|
|
|
+}
|
|
|
+.el-tabs__active-bar {
|
|
|
+ background-color: transparent !important;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
