Merge branch 'dev-data-analysis-20201123' into 'release'

添加用户路径分析 code reviewer: 张平添加用户路径分析 See merge request !5

Merge branch 'dev-data-analysis-20201123' into 'release'
添加用户路径分析 code reviewer: 张平添加用户路径分析 See merge request !5
0cb52391 · 张平 · 2325cf25 · 1ec55a5f · 0cb52391 · 0cb52391
--- a/package-lock.json
+++ b/package-lock.json
@@ -2767,6 +2767,14 @@
        "safer-buffer": "^2.1.0"
      }
    },
+    "echarts": {
+      "version": "4.9.0",
+      "resolved": "http://192.168.110.93:4873/echarts/-/echarts-4.9.0.tgz",
+      "integrity": "sha1-qbm6oD8Doqcx5jQMVb77V6nhNH0=",
+      "requires": {
+        "zrender": "4.3.2"
+      }
+    },
    "editorconfig": {
      "version": "0.13.3",
      "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-0.13.3.tgz",
@@ -8766,6 +8774,11 @@
          "dev": true
        }
      }
+    },
+    "zrender": {
+      "version": "4.3.2",
+      "resolved": "http://192.168.110.93:4873/zrender/-/zrender-4.3.2.tgz",
+      "integrity": "sha1-7HQy+UFcgsc1hLa3uMR+GwFiCcY="
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
    "dependencies": {
        "axios": "^0.18.0",
        "babel-polyfill": "^6.23.0",
+        "echarts": "^4.9.0",
        "element-ui": "^2.7.2",
        "vue": "^2.3.2",
        "vue-core-image-upload": "2.1.11",

--- a/src/common/env.js
+++ b/src/common/env.js
@@ -19,6 +19,7 @@ export const getAddress = () => {
    let ipAddress = "https://" + window.location.host;
    // let ipAddress = "http://localhost:8099";
    let env = getTestEnv(ipAddress);
+    let versionUrl = "";
    let preViewUrl = ""
    let qiniuImgUrl  = "";
    let qiniuFileUrl = '';
@@ -41,6 +42,7 @@ export const getAddress = () => {
    //本地
    if (ipAddress.indexOf("localhost") > -1 || ipAddress.indexOf("10.177.10.118") > -1 || ipAddress.indexOf("test-kf") > -1) {
        ipAddress = "http://localhost:7070";
+        versionUrl = 'https://dev-dev.yunqueyi.com';
        preViewUrl = "http://localhost:9090/#/template";
        qiniuImgUrl = "https://test1-file.yunqueyi.com";
        resource_url = "https://test-file.yunqueyi.com";
@@ -64,6 +66,7 @@ export const getAddress = () => {
        qiniuFileUrl = "http://dev-sc.yunqueyi.com/contents/admin/qiniu/token1";
        qiniuResourceUrl = "https://test1-videos.yunqueyi.com";
    } else if (isNotEmptyUtils(env)) {//测试test1 test2 uat
+        versionUrl = 'https://' + env + '-dev.yunqueyi.com';
        preViewUrl = "https://" + env + "-phome.yunqueyi.com" + "/template/#/template"
        qiniuFileUrl = "https://" + env + "-sc.yunqueyi.com" + "/contents/admin/qiniu/token1";
        qiniuImgUrl = "https://test1-file.yunqueyi.com";
@@ -97,6 +100,7 @@ export const getAddress = () => {
            lectureUrl = "https://" + env + "-sc.yunqueyi.com"
        }
    } else {//生产环境
+        versionUrl = 'https://dev.yunqueyi.com';
        preViewUrl = "https://phome.yunqueyi.com" + "/template/#/template"
        qiniuFileUrl = "https://sc.yunqueyi.com" + "/contents/admin/qiniu/token1";
        qiniuImgUrl = "https://files.yunqueyi.com";//qiniu存储域名
@@ -116,6 +120,7 @@ export const getAddress = () => {
        qiniuResourceUrl = "https://video.yunqueyi.com";//qiniu存储域名
        exam_url = "https://sc.yunqueyi.com/exams";
    }
+    localStorage.setItem("versionUrl",versionUrl);
    localStorage.setItem("preViewUrl",preViewUrl);
    localStorage.setItem("qiniuFileUrl", qiniuFileUrl);
    localStorage.setItem("qiniuImgUrl", qiniuImgUrl);

--- a/src/main.js
+++ b/src/main.js
@@ -5,9 +5,10 @@ import router from './router';
 import store from './vuex/store'
 import axios from 'axios';
 import ElementUI from 'element-ui';
+import echarts from 'echarts';
 import 'element-ui/lib/theme-chalk/index.css';    // 默认主题
 import {getAddress, loadCommonFilter} from './common/env'
-import vueFilter from './common/filter'
+import vueFilter from './common/filter';
 //加载环境变量
@@ -15,6 +16,7 @@ getAddress();
 loadCommonFilter();
 //加载elementUi
 Vue.use(ElementUI);
+Vue.prototype.$echarts = echarts;
 // Vue.use(vueXlsxTable, {rABS: false})
 if (localStorage.getItem("token")) {

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -31,13 +31,25 @@ export default new Router({
                    path: '/data-view',
                    component: resolve => require(['../views/sensitive-control/data-view.vue'], resolve)
                },
+                {  // 用户路径分析
+                    path: '/user-path',
+                    component: resolve => require(['../views/user-path/funnel.vue'], resolve)
+                },
+                {  // 用户路径分析--新增转化漏斗
+                    path: '/add-funnel',
+                    component: resolve => require(['../views/user-path/add-funnel.vue'], resolve)
+                },
+                {  // 用户路径分析--查看数据
+                    path: '/path-data',
+                    component: resolve => require(['../views/user-path/funnel-data.vue'], resolve)
+                },
            ]
        },
        {  // 短信中的 数据查看页面
            path: '/data-view-message',
            component: resolve => require(['../views/sensitive-control/data-view-message.vue'], resolve)
        },
    ]
 })
--- a/src/views/user-path/add-funnel.vue
+++ b/src/views/user-path/add-funnel.vue
--- a/src/views/user-path/funnel-data.vue
+++ b/src/views/user-path/funnel-data.vue
--- a/src/views/user-path/funnel.vue
+++ b/src/views/user-path/funnel.vue
+<template>
+    <div class="funnel-container">
+        <div class="funnel-title">漏斗分析</div>
+        <div class="funnel-content">
+            <div class="con">
+                <el-row :gutter="30" class="row search" type="flex" style="margin-bottom:0;">
+                    <el-form ref="form" :model="searchParam" label-suffix=":" style="width:100%;">
+                        <el-col :span="21">
+                            <el-form-item label="漏斗名称">
+                                <el-input v-model="searchParam.searchName" maxlength="20" placeholder="请输入漏斗名称" style="width:288px;"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="3" style="padding:0;text-align:right;padding-right:15px;">
+                            <el-button type="primary" size="small" @click="search(1)">搜索</el-button>
+                        </el-col>
+                    </el-form>
+                </el-row>
+                <div class="search-table-con">
+                    <el-row :gutter="10" class="row create-button" style="margin-right:0;">
+                        <el-button type="primary" size="small" @click="addData">+新增转化漏斗</el-button>
+                    </el-row>
+                    <!-- 表格 -->
+                    <el-table
+                        class="search-table"
+                        :data="tableData"
+                        style="width: 100%"
+                        :empty-text="tableText">
+                        <el-table-column prop="name" label="漏斗名称" min-width="140" align="center"></el-table-column>
+                        <el-table-column prop="stepStartName" label="起始步骤" min-width="140" align="center"></el-table-column>
+                        <el-table-column prop="stepEndName" label="转化目标" min-width="150" align="center"></el-table-column>
+                        <el-table-column label="操作" fixed="right" align="center" min-width="200">
+                            <template slot-scope="scope">
+                                <el-button type="primary" size="small" @click="visitData(scope.row)">查看数据</el-button>
+                                <el-button type="primary" size="small" @click="editColumn(scope.row)">编辑</el-button>
+                                <el-button type="danger" size="small" @click="deleteConfirm(scope.row)">删除</el-button>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                    <!-- 分页 -->
+                    <div class="pagination">
+                        <el-pagination
+                            background
+                            @size-change="handleSizeChange"
+                            @current-change="handleCurrentChange"
+                            :current-page="searchParam.pageNo"
+                            :page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
+                            :page-size="searchParam.pageSize"
+                            layout="total, sizes, prev, pager, next, jumper"
+                            :total="totalRows">
+                        </el-pagination>
+                    </div>
+                    <!-- 删除确认框 -->
+                    <el-dialog
+                    class="delete-dialog"
+                    :visible.sync="dialogVisible"
+                    width="30%">
+                        <span><i class="el-icon-circle-close" style="color: red"></i>确认要删除这条转化漏斗吗？</span>
+                        <span class="tip">删除该转化漏斗数据将不会保留</span>
+                        <span slot="footer" class="dialog-footer">
+                            <el-button @click="dialogVisible = false">取 消</el-button>
+                            <el-button type="primary" @click="confirm">确 定</el-button>
+                        </span>
+                    </el-dialog>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { openLoading, closeLoading } from "../../common/utils";
+export default {
+    data() {
+        return {
+            tableText: '暂未创建漏斗',
+            searchParam: {
+                searchName: '',
+                pageNo: 1,
+                pageSize: 15
+            },
+            totalRows: 0,
+            tableData: [],
+            dialogVisible: false,
+            deleteId: ''
+        }
+    },
+    mounted() {
+        this.search();
+    },
+    methods: {
+        // 封装一下请求通用的方法
+        getData(type, url, req, callback) {
+            openLoading(this);
+            this.$axios[type](localStorage.getItem("lectureUrl") + url, req)
+                .then(res => {
+                    closeLoading(this);
+                    let data = res.data;
+                    if (data.code == "000000") {
+                        if (callback) callback(data);
+                    } else {
+                        this.$message.error(data.message);
+                    }
+                })
+        },
+        search(param) {
+            if(param) this.searchParam.pageNo = 1;
+            let req = this.searchParam;
+            this.getData(
+                "get", `/session/funnel/list?searchName=${this.searchParam.searchName}&pageNo=${this.searchParam.pageNo}&pageSize=${this.searchParam.pageSize}`, {},
+                res => {
+                    this.tableData = res.data.data;
+                    this.totalRows = res.data.totalRows;
+                    if(this.tableData.length == 0) {
+                        this.tableText = param ? "暂无数据" : '暂未创建漏斗';
+                    }
+                }
+            );
+        },
+        // 新增漏斗
+        addData() {
+            this.$router.push({ path: 'add-funnel' });
+        },
+        // 查看数据
+        visitData(row) {
+            this.$router.push({ path: 'path-data', query: {id: row.id, name: row.name} });
+        },
+        // 编辑
+        editColumn(row) {
+            this.$router.push({ path: 'add-funnel',query: {id: row.id}});
+        },
+        // 删除确认框
+        deleteConfirm(row) {
+            this.dialogVisible = true;
+            this.deleteId = row.id;
+        },
+        confirm() {
+            this.getData(
+                "delete", `/session/funnel/remove/${this.deleteId}`, {},
+                res => {
+                    if(res.code == '000000') {
+                        this.dialogVisible = false;
+                        this.$message.success('删除成功');
+                        this.search();
+                    }
+                }
+            );
+        },
+        handleSizeChange(value) {
+            this.searchParam.pageSize = value;
+            this.search();
+        },
+        handleCurrentChange(value) {
+            this.searchParam.pageNo = value;
+            this.search();
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.funnel-container {
+    margin: -20px -40px;
+    .funnel-title {
+        height: 60px;
+        line-height: 60px;
+        padding-left: 40px;
+    }
+    .funnel-content {
+        background: #F2F2F4;
+        padding: 20px 0 20px 20px;
+        min-height: 83vh;
+        .con {
+            padding-bottom: 30px;
+            background: #fff;
+            min-height: 80vh;
+            .search {
+                padding: 20px 20px 0;
+                margin: 0 !important;
+                border-bottom: 1px solid #EDEDEE;
+            }
+            .search-table-con {
+                padding: 0 40px;
+                .create-button {
+                    margin-top: 20px;
+                }
+            }
+            .delete-dialog {
+                span{
+                    display: block;
+                    font-size: 16px;
+                    font-weight: 700;
+                    margin-left: 40px;
+                    i {
+                        display: inline-block;
+                        font-size: 20px;
+                        color: red;
+                        margin-right: 10px;
+                    }
+                }
+                span.tip {
+                    font-size: 14px;
+                    font-weight: 400;
+                    color: #aaa;
+                    margin: 15px 0 0 70px;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file