2024-04-17 报表前端

src/api/report/EcwReportPermission.js

+import request from '@/utils/request'
+//报表权限 lanbm 2024-04-15 add
+export function create(data) {
+  return request({
+    url: '/Report/EcwReportPermission/create',
+    method: 'post',
+    data: data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/Report/EcwReportPermission/update',
+    method: 'post',
+    data: data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: '/Report/EcwReportPermission/delete?id=' + id,
+    method: 'get'
+  })
+}
+
+export function getModel(id) {
+  return request({
+    url: '/Report/EcwReportPermission/get?id=' + id,
+    method: 'get'
+  })
+}
+
+//获取当前用户的报表权限 lanbm 2024-05-15 add
+export function getCurUserPermission() {
+  return request({
+    url: '/Report/EcwReportPermission/getCurUserPermission',
+    method: 'get'
+  })
+}
+
+
+export function getPageList(query) {
+  return request({
+    url: '/Report/EcwReportPermission/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function exportExcel(query) {
+  return request({
+    url: '/Report/EcwReportPermission/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/api/report/customeranalysis.js

+import request from '@/utils/request'
+
+// 获得测试分页
+export function getListPage(data) {
+  return request({
+    url: '/Report/CustomerAnalysis/getListPage',
+    method: 'post',
+    data
+  })
+}
+
+// 导出测试 Excel
+export function exportExcel(data) {
+  return request({
+    url: '/Report/CustomerAnalysis/exportExcel',
+    method: 'post',
+    data: data,
+    responseType: 'blob'
+  })
+}

src/api/report/customerreport.js

+import request from '@/utils/request'
+
+//lanbm 2024-03-31 add
+//获取报表统计结果
+export function getReportResult(data) {
+  return request({
+    url: '/Report/CustomerReport/getPageList',
+    method: 'post',
+    data
+  })
+}
+
+export function getBarData(data) {
+  return request({
+    url: '/Report/CustomerReport/getBarData',
+    method: 'post',
+    data: data
+  })
+}
+
+
+// 导出测试 Excel
+export function exportExcel(query) {
+  return request({
+    url: '/Report/CustomerReport/exportExcel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/api/report/salesanalysis.js

+import request from '@/utils/request'
+
+//lanbm 2024-03-31 add
+// 创建测试
+export function createTest(data) {
+  return request({
+    url: '/SalesAnalysis/test/create',
+    method: 'post',
+    data: data
+  })
+}
+
+// 更新测试
+export function updateTest(data) {
+  return request({
+    url: '/SalesAnalysis/test/update',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除测试
+export function deleteTest(id) {
+  return request({
+    url: '/SalesAnalysis/test/delete?id=' + id,
+    method: 'delete'
+  })
+}
+
+// 获得测试
+export function getTest(id) {
+  return request({
+    url: '/SalesAnalysis/test/get?id=' + id,
+    method: 'get'
+  })
+}
+
+// 获得测试分页
+export function getTestPage(query) {
+  return request({
+    url: '/SalesAnalysis/test/page',
+    method: 'get',
+    params: query
+  })
+}
+
+// 导出测试 Excel
+export function exportTestExcel(query) {
+  return request({
+    url: '/SalesAnalysis/test/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/api/report/salesreport.js

+import request from '@/utils/request'
+
+//查询运输方式体积货重量 lanbm 2024-04-01 add
+export function SalesReportCount(data) {
+  return request({
+    url: '/Report/SalesReport/SalesReportCount',
+    method: 'post',
+    data: data
+  })
+}
+
+//查询首次成交客户数量 lanbm 2024-04-01 add
+export function FirstCustomerCount(data) {
+  return request({
+    url: '/Report/SalesReport/FirstCustomerCount',
+    method: 'post',
+    data: data
+  })
+}
+
+//销售分析统计列表 lanbm 2024-04-01 add
+export function SalesReportList(data) {
+  return request({
+    url: '/Report/SalesReport/SalesReportList',
+    method: 'post',
+    data: data
+  })
+}
+
+// 导出测试 Excel
+export function exportTestExcel(query) {
+  return request({
+    url: '/SalesReport/test/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/api/report/vz.js

+import request from '@/utils/request'
+//报表V值设置参数 lanbm 2024-04-03 add
+export function create(data) {
+  return request({
+    url: '/ecwVz/vz/create',
+    method: 'post',
+    data: data
+  })
+}
+
+export function update(data) {
+  return request({
+    url: '/ecwVz/vz/update',
+    method: 'post',
+    data: data
+  })
+}
+
+export function del(id) {
+  return request({
+    url: '/ecwVz/vz/delete?id=' + id,
+    method: 'get'
+  })
+}
+
+export function getModel(id) {
+  return request({
+    url: '/ecwVz/vz/get?id=' + id,
+    method: 'get'
+  })
+}
+
+export function getPageList(query) {
+  return request({
+    url: '/ecwVz/vz/page',
+    method: 'get',
+    params: query
+  })
+}
+
+export function exportExcel(query) {
+  return request({
+    url: '/ecwVz/vz/export-excel',
+    method: 'get',
+    params: query,
+    responseType: 'blob'
+  })
+}

src/views/dashboard/SalesPanelGroup.vue

+<template>
+  <el-row :gutter="40" class="panel-group" v-if="data">
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="checkPermi(['member:user']) ? $router.push('/member/member-user') : $alert($t('暂无权限'))">
+        <div class="card-panel-icon-wrapper icon-people">
+          <svg-icon icon-class="peoples" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            {{$t('业绩总览')}}
+          </div>
+          <count-to :start-val="0" :end-val="data.memberCount" :duration="2600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="$router.push('/system/internalMessage/my-internal-message?status=0')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="message" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            {{$t('海运拼柜')}}
+          </div>
+          <count-to :start-val="0" :end-val="data.messageCount" :duration="3000" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="$router.push('/system/internalMessage/my-internal-message?status=0')">
+        <div class="card-panel-icon-wrapper icon-message">
+          <svg-icon icon-class="message" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            {{$t('专线空运')}}
+          </div>
+          <count-to :start-val="0" :end-val="data.messageCount" :duration="3000" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="$router.push('/task/todo')">
+        <div class="card-panel-icon-wrapper icon-money">
+          <svg-icon icon-class="date" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            {{$t('客户成交总览')}}
+          </div>
+          <count-to :start-val="0" :end-val="todoCount" :duration="3200" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>
+    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+      <div class="card-panel" @click="$router.push('/order/mine')">
+        <div class="card-panel-icon-wrapper icon-shopping">
+          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
+        </div>
+        <div class="card-panel-description">
+          <div class="card-panel-text">
+            {{$t('首次成交')}}
+          </div>
+          <count-to :start-val="0" :end-val="data.messageCount" :duration="3600" class="card-panel-num" />
+        </div>
+      </div>
+    </el-col>  
+  </el-row>
+</template>
+
+<script>
+import CountTo from 'vue-count-to'
+import {panelData} from '@/api/system/pannel'
+import {checkPermi} from '@/utils/permission'
+import {taskTodoCount} from '@/api/bpm/task'
+export default {
+  components: {
+    CountTo
+  },
+  props:['data1', 'data2'],
+  data(){
+    return {
+      data: null,
+      todoCount: 0
+    }
+  },
+  methods: {
+    handleSetLineChartData(type) {
+      this.$emit('handleSetLineChartData', type)
+    },
+    checkPermi
+  },
+  created(){
+    panelData().then(res => {
+      this.data = res.data
+    })
+
+    taskTodoCount().then(res => {
+      this.todoCount = res.data
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-group {
+  margin-top: 5px;
+
+  .card-panel-col {
+    margin-bottom: 8px;
+  }
+
+  .card-panel {
+    display: flex;
+    justify-content: space-between;
+    height: 108px;
+    cursor: pointer;
+    font-size: 12px;
+    position: relative;
+    overflow: hidden;
+    color: #666;
+    background: #fff;
+    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
+    border-color: rgba(0, 0, 0, .05);
+
+    &:hover {
+      .card-panel-icon-wrapper {
+        color: #fff;
+      }
+
+      .icon-people {
+        background: #40c9c6;
+      }
+
+      .icon-message {
+        background: #36a3f7;
+      }
+
+      .icon-money {
+        background: #f4516c;
+      }
+
+      .icon-shopping {
+        background: #34bfa3
+      }
+    }
+
+    .icon-people {
+      color: #40c9c6;
+    }
+
+    .icon-message {
+      color: #36a3f7;
+    }
+
+    .icon-money {
+      color: #f4516c;
+    }
+
+    .icon-shopping {
+      color: #34bfa3
+    }
+
+    .card-panel-icon-wrapper {
+      margin: 14px 0 0 14px;
+      padding: 5px;
+      transition: all 0.38s ease-out;
+      border-radius: 6px;
+    }
+
+    .card-panel-icon {
+      font-size: 48px;
+    }
+
+    .card-panel-description {
+      font-weight: bold;
+      margin: 5px;
+      margin-left: 0px;
+
+      .card-panel-text {
+        line-height: 18px;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 16px;
+        margin-bottom: 12px;
+      }
+
+      .card-panel-num {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (max-width:550px) {
+  .card-panel-description {
+    display: none;
+  }
+
+  .card-panel-icon-wrapper {
+    float: none !important;
+    width: 100%;
+    height: 100%;
+    margin: 0 !important;
+
+    .svg-icon {
+      display: block;
+      margin: 14px auto !important;
+      float: none !important;
+    }
+  }
+}
+</style>

src/views/report/customerreport/index.vue

+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="100px"
+    >
+      <el-form-item label="选择日期" prop="selDate">
+        <el-date-picker
+          v-model="queryParams.sDate"
+          type="month"
+          value-format="yyyy-MM"
+          clearable
+          placeholder="请输起始月"
+        />
+        <el-date-picker
+          v-model="queryParams.eDate"
+          type="month"
+          value-format="yyyy-MM"
+          clearable
+          placeholder="请输截止月"
+        />
+      </el-form-item>
+      <el-form-item label="同比年份" prop="duibiYear">
+        <el-date-picker
+          v-model="queryParams.duibiYear"
+          type="year"
+          value-format="yyyy"
+          placeholder="请选择同比年份"
+        />
+      </el-form-item>
+      <el-form-item label="部门" prop="deptid" v-show="showDept">
+        <treeselect
+          v-model="queryParams.deptid"
+          :options="deptOptions"
+          :show-count="true"
+          :placeholder="$t('请选择部门')"
+          :normalizer="normalizer"
+        />
+      </el-form-item>
+      <el-form-item
+        label="客户经理"
+        prop="salesmanid"
+        v-show="showCustomsManage"
+      >
+        <user-selector
+          manage
+          v-model="queryParams.salesmanid"
+          clearable
+          @change="handleQuery"
+          :prepend="{ id: 0, nickname: $t('未分配客户经理') }"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row>
+      <el-form size="small" :inline="true" label-width="150px">
+        <el-form-item label="">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="hhandleQueryAnalysis"
+            >更多</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <div
+      ref="mainBar"
+      :class="className"
+      :style="{ height: height, width: width }"
+    ></div>
+    <!--
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />-->
+  </div>
+</template>
+    
+<script>
+import UserSelector from "@/components/UserSelector";
+import Treeselect from "@riophae/vue-treeselect";
+//自定义目录数样式
+import "@/assets/styles/vue-treeselect.css";
+import { listSimpleDepts } from "@/api/system/dept";
+import * as echarts from "echarts";
+require("echarts/theme/macarons");
+import resize from "../../dashboard/mixins/resize";
+import { getReportResult } from "@/api/report/customerreport";
+import { getCurUserPermission } from "@/api/report/EcwReportPermission";
+import { MessageBox } from "element-ui";
+
+const CurDate = new Date();
+
+function currentTime() {
+  var date = new Date();
+  var year = date.getFullYear();
+  //月份从0~11，所以加一
+  let month = date.getMonth() + 1;
+  //如果格式是MM则需要此步骤，如果是M格式则此处注释掉
+  if (month >= 1 && month <= 9) {
+    month = "0" + month;
+  }
+  let strDate = year + "-" + month;
+  return strDate;
+}
+
+function getLastYear() {
+  //获取上一年份
+  var date = new Date();
+  date.setFullYear(date.getFullYear() - 1);
+  let year = date.getFullYear();
+  return year.toString();
+}
+
+export default {
+  name: "customerreport",
+  components: {
+    UserSelector,
+    Treeselect,
+  },
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: "chart",
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "1500px",
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 导出遮罩层
+      exportLoading: false,
+      // 总条数
+      total: 0,
+      // 显示搜索条件
+      showSearch: true,
+      showDept: true, //是否显示部门选择过滤条件
+      showCustomsManage: true, //是否显示客户经理过滤条件
+      deptOptions: undefined,
+      chart: null,
+      dateRangeCreateTime: [],
+      queryParams: {
+        sDate: CurDate.getFullYear() + "-01",
+        eDate: currentTime(), //结束日期
+        duibiYear: getLastYear(), //对比年份
+        deptid: undefined, //部门
+        salesmanid: undefined, //客户经理
+        pageNo: 1,
+        pageSize: 30,
+      },
+      //报表权限信息
+      objEcwReportPermission: {},
+    };
+  },
+  watch: {},
+  mounted() {
+    /*
+    this.$nextTick(() => {
+      this.initChart();
+    });*/
+  },
+  created() {
+    this.getTreeselect();
+
+    //获取当前用户报表权限
+    getCurUserPermission().then((response) => {
+      this.objEcwReportPermission = response.data;
+      if (this.objEcwReportPermission.permissionFw == 1) {
+        this.showCustomsManage = false;
+        this.showDept = false;
+        this.queryParams.salesmanid = this.objEcwReportPermission.userId;
+      }
+      //获取权限后再初始化统计图表
+      this.initChart();
+    });
+
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      var chartDom = this.$refs["mainBar"];
+      this.chart = echarts.init(chartDom, "macarons");
+      this.setOptions();
+    },
+    setOptions() {
+      this.loading = true;
+      getReportResult(this.queryParams).then((response) => {
+        //全部列表数据
+        this.total = response.data.total;
+        let resultList = response.data.resultList;
+        this.loading = false;
+        this.chart.setOption({
+          title: {
+            text: "客户贡献排名",
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow",
+            },
+            // 自定义提示框内容，使用回调函数
+            formatter: function (params) {
+              //params 是一个数组，数组中每个元素代表一个系列的数据信息
+              var result = "";
+              params.forEach(function (item) {
+                //var s=JSON.stringify(item);
+                //alert(s);
+                //在数据中查询
+                let vR = resultList.filter((r) => r.name === item.name);
+                result += "客户：" + item.name + "<br/>";
+                result += "客户经理部门：" + vR[0].deptname + "<br/>";
+                result += "总V值：" + item.value + "<br/>";
+                result += "海运V值：" + vR[0].sumvolume1 + "<br/>";
+                result += "空运V值：" + vR[0].sumweight3 + "<br/>";
+                result += "对比年份：" + vR[0].duibiYear + "<br/>";
+                result += "同比：" + vR[0].allsumvolumeTbMsg + "<br/>";
+                result += "环比：" + vR[0].allsumvolumeTbMsg + "<br/>";
+              });
+              return result;
+            },
+          },
+          legend: {},
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          xAxis: {
+            type: "value",
+            boundaryGap: [0, 0.5],
+          },
+          yAxis: response.data.objyAxis,
+          series: response.data.obSseries,
+        });
+      });
+    },
+    hhandleQueryAnalysis() {
+      this.$router.push("/member/customer_analysis");
+    },
+    handleQuery() {
+      //校验查询参数 lanbm 2024-04-07 add
+      if (this.queryParams.sDate == undefined) {
+        MessageBox("请输入起始月份。");
+        return;
+      }
+      if (this.queryParams.eDate == undefined) {
+        MessageBox("请输入截止月份。");
+        return;
+      }
+      if (this.queryParams.duibiYear == undefined) {
+        MessageBox("请输入对比年份。");
+        return;
+      }
+      //查询统计结果
+      this.initChart();
+    },
+    getList() {
+      //this.initChart();
+    },
+    resetQuery() {
+      this.queryParams = {
+        sDate: undefined, //开始日期
+        eDate: undefined, //结束日期
+        duibiYear: undefined, //对比年份
+        deptid: undefined, //部门
+        salesmanid: undefined, //客户经理
+        pageNo: 1,
+        pageSize: 30,
+      };
+    },
+    handleAdd() {},
+    handleExport() {},
+    /** 查询部门下拉树结构 + 岗位下拉 */
+    getTreeselect() {
+      listSimpleDepts().then((response) => {
+        // 处理deptOptions 参数
+        this.deptOptions = [];
+        this.deptOptions.push(...this.handleTree(response.data, "id"));
+      });
+    },
+    //格式化部门的下拉框
+    normalizer(node) {
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.children,
+      };
+    },
+  },
+};
+</script>
+      
\ No newline at end of file