Commit fc0d443bb7d89c7ac66d83e4f1df4d88433fda43
1 parent
d59b2d89e9
Exists in
master
app
Showing
6 changed files
with
377 additions
and
61 deletions
Show diff stats
src/views/application/Menu/analys.vue
| ... | ... | @@ -0,0 +1,61 @@ |
| 1 | +<template> | |
| 2 | + <el-table | |
| 3 | + :data="tableData3" | |
| 4 | + height="250" | |
| 5 | + border | |
| 6 | + style="width: 100%" | |
| 7 | + > | |
| 8 | + <el-table-column | |
| 9 | + prop="date" | |
| 10 | + label="日期" | |
| 11 | + width="180" | |
| 12 | + /> | |
| 13 | + <el-table-column | |
| 14 | + prop="name" | |
| 15 | + label="姓名" | |
| 16 | + width="180" | |
| 17 | + /> | |
| 18 | + <el-table-column | |
| 19 | + prop="address" | |
| 20 | + label="地址" | |
| 21 | + /> | |
| 22 | + </el-table> | |
| 23 | +</template> | |
| 24 | + | |
| 25 | +<script> | |
| 26 | +export default { | |
| 27 | + data() { | |
| 28 | + return { | |
| 29 | + tableData3: [{ | |
| 30 | + date: '2016-05-03', | |
| 31 | + name: '王小虎', | |
| 32 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 33 | + }, { | |
| 34 | + date: '2016-05-02', | |
| 35 | + name: '王小虎', | |
| 36 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 37 | + }, { | |
| 38 | + date: '2016-05-04', | |
| 39 | + name: '王小虎', | |
| 40 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 41 | + }, { | |
| 42 | + date: '2016-05-01', | |
| 43 | + name: '王小虎', | |
| 44 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 45 | + }, { | |
| 46 | + date: '2016-05-08', | |
| 47 | + name: '王小虎', | |
| 48 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 49 | + }, { | |
| 50 | + date: '2016-05-06', | |
| 51 | + name: '王小虎', | |
| 52 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 53 | + }, { | |
| 54 | + date: '2016-05-07', | |
| 55 | + name: '王小虎', | |
| 56 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 57 | + }] | |
| 58 | + } | |
| 59 | + } | |
| 60 | +} | |
| 61 | +</script> | ... | ... |
src/views/application/Menu/appList.vue
| ... | ... | @@ -0,0 +1,61 @@ |
| 1 | +<template> | |
| 2 | + <el-table | |
| 3 | + :data="tableData3" | |
| 4 | + height="250" | |
| 5 | + border | |
| 6 | + style="width: 100%" | |
| 7 | + > | |
| 8 | + <el-table-column | |
| 9 | + prop="date" | |
| 10 | + label="日期" | |
| 11 | + width="180" | |
| 12 | + /> | |
| 13 | + <el-table-column | |
| 14 | + prop="name" | |
| 15 | + label="姓名" | |
| 16 | + width="180" | |
| 17 | + /> | |
| 18 | + <el-table-column | |
| 19 | + prop="address" | |
| 20 | + label="地址" | |
| 21 | + /> | |
| 22 | + </el-table> | |
| 23 | +</template> | |
| 24 | + | |
| 25 | +<script> | |
| 26 | +export default { | |
| 27 | + data() { | |
| 28 | + return { | |
| 29 | + tableData3: [{ | |
| 30 | + date: '2016-05-03', | |
| 31 | + name: '王小虎', | |
| 32 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 33 | + }, { | |
| 34 | + date: '2016-05-02', | |
| 35 | + name: '王小虎', | |
| 36 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 37 | + }, { | |
| 38 | + date: '2016-05-04', | |
| 39 | + name: '王小虎', | |
| 40 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 41 | + }, { | |
| 42 | + date: '2016-05-01', | |
| 43 | + name: '王小虎', | |
| 44 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 45 | + }, { | |
| 46 | + date: '2016-05-08', | |
| 47 | + name: '王小虎', | |
| 48 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 49 | + }, { | |
| 50 | + date: '2016-05-06', | |
| 51 | + name: '王小虎', | |
| 52 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 53 | + }, { | |
| 54 | + date: '2016-05-07', | |
| 55 | + name: '王小虎', | |
| 56 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 57 | + }] | |
| 58 | + } | |
| 59 | + } | |
| 60 | +} | |
| 61 | +</script> | ... | ... |
src/views/application/Menu/orderList.vue
| ... | ... | @@ -0,0 +1,61 @@ |
| 1 | +<template> | |
| 2 | + <el-table | |
| 3 | + :data="tableData3" | |
| 4 | + height="250" | |
| 5 | + border | |
| 6 | + style="width: 100%" | |
| 7 | + > | |
| 8 | + <el-table-column | |
| 9 | + prop="date" | |
| 10 | + label="日期" | |
| 11 | + width="180" | |
| 12 | + /> | |
| 13 | + <el-table-column | |
| 14 | + prop="name" | |
| 15 | + label="姓名" | |
| 16 | + width="180" | |
| 17 | + /> | |
| 18 | + <el-table-column | |
| 19 | + prop="address" | |
| 20 | + label="地址" | |
| 21 | + /> | |
| 22 | + </el-table> | |
| 23 | +</template> | |
| 24 | + | |
| 25 | +<script> | |
| 26 | +export default { | |
| 27 | + data() { | |
| 28 | + return { | |
| 29 | + tableData3: [{ | |
| 30 | + date: '2016-05-03', | |
| 31 | + name: '王小虎', | |
| 32 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 33 | + }, { | |
| 34 | + date: '2016-05-02', | |
| 35 | + name: '王小虎', | |
| 36 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 37 | + }, { | |
| 38 | + date: '2016-05-04', | |
| 39 | + name: '王小虎', | |
| 40 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 41 | + }, { | |
| 42 | + date: '2016-05-01', | |
| 43 | + name: '王小虎', | |
| 44 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 45 | + }, { | |
| 46 | + date: '2016-05-08', | |
| 47 | + name: '王小虎', | |
| 48 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 49 | + }, { | |
| 50 | + date: '2016-05-06', | |
| 51 | + name: '王小虎', | |
| 52 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 53 | + }, { | |
| 54 | + date: '2016-05-07', | |
| 55 | + name: '王小虎', | |
| 56 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 57 | + }] | |
| 58 | + } | |
| 59 | + } | |
| 60 | +} | |
| 61 | +</script> | ... | ... |
src/views/application/Menu/userList.vue
| ... | ... | @@ -0,0 +1,61 @@ |
| 1 | +<template> | |
| 2 | + <el-table | |
| 3 | + :data="tableData3" | |
| 4 | + height="250" | |
| 5 | + border | |
| 6 | + style="width: 100%" | |
| 7 | + > | |
| 8 | + <el-table-column | |
| 9 | + prop="date" | |
| 10 | + label="日期" | |
| 11 | + width="180" | |
| 12 | + /> | |
| 13 | + <el-table-column | |
| 14 | + prop="name" | |
| 15 | + label="姓名" | |
| 16 | + width="180" | |
| 17 | + /> | |
| 18 | + <el-table-column | |
| 19 | + prop="address" | |
| 20 | + label="地址" | |
| 21 | + /> | |
| 22 | + </el-table> | |
| 23 | +</template> | |
| 24 | + | |
| 25 | +<script> | |
| 26 | +export default { | |
| 27 | + data() { | |
| 28 | + return { | |
| 29 | + tableData3: [{ | |
| 30 | + date: '2016-05-03', | |
| 31 | + name: '王小虎', | |
| 32 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 33 | + }, { | |
| 34 | + date: '2016-05-02', | |
| 35 | + name: '王小虎', | |
| 36 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 37 | + }, { | |
| 38 | + date: '2016-05-04', | |
| 39 | + name: '王小虎', | |
| 40 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 41 | + }, { | |
| 42 | + date: '2016-05-01', | |
| 43 | + name: '王小虎', | |
| 44 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 45 | + }, { | |
| 46 | + date: '2016-05-08', | |
| 47 | + name: '王小虎', | |
| 48 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 49 | + }, { | |
| 50 | + date: '2016-05-06', | |
| 51 | + name: '王小虎', | |
| 52 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 53 | + }, { | |
| 54 | + date: '2016-05-07', | |
| 55 | + name: '王小虎', | |
| 56 | + address: '上海市普陀区金沙江路 1518 弄' | |
| 57 | + }] | |
| 58 | + } | |
| 59 | + } | |
| 60 | +} | |
| 61 | +</script> | ... | ... |
src/views/application/appList.vue
| 1 | 1 | <template> |
| 2 | - <el-container class="app-container"> | |
| 3 | - <el-header> | |
| 4 | - 应用列表 | |
| 5 | - </el-header> | |
| 6 | - <el-main> | |
| 7 | - asd | |
| 8 | - </el-main> | |
| 9 | - <el-aside> | |
| 10 | - <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" /> | |
| 11 | - <el-tree | |
| 12 | - ref="tree2" | |
| 13 | - :data="data2" | |
| 14 | - :props="defaultProps" | |
| 15 | - :filter-node-method="filterNode" | |
| 16 | - class="filter-tree" | |
| 17 | - default-expand-all | |
| 18 | - /> | |
| 2 | + <el-container style="height: 853px; border: 1px solid #eee"> | |
| 3 | + <el-aside width="250px" style="background-color: rgb(238, 241, 246)"> | |
| 4 | + <el-menu :default-openeds="['1','2', '3']"> | |
| 5 | + <el-submenu index="1"> | |
| 6 | + <template slot="title"><i class="el-icon-message" />非常戴镜</template> | |
| 7 | + <el-menu-item v-for="(item,i) in nav_menu_data" :key="i" :index="item.name">{{ item.title }}</el-menu-item> | |
| 8 | + </el-submenu> | |
| 9 | + <el-submenu index="2"> | |
| 10 | + <template slot="title"><i class="el-icon-menu" />亚当光学</template> | |
| 11 | + <el-menu-item index="2-1">产品列表</el-menu-item> | |
| 12 | + <el-menu-item index="2-2">订单列表</el-menu-item> | |
| 13 | + <el-menu-item index="2-3">用户列表</el-menu-item> | |
| 14 | + <el-menu-item index="2-4">运行分析</el-menu-item> | |
| 15 | + </el-submenu> | |
| 16 | + <el-submenu index="3"> | |
| 17 | + <template slot="title"><i class="el-icon-setting" />秀野光学</template> | |
| 18 | + <el-menu-item index="3-1">产品列表</el-menu-item> | |
| 19 | + <el-menu-item index="3-2">订单列表</el-menu-item> | |
| 20 | + <el-menu-item index="3-3">用户列表</el-menu-item> | |
| 21 | + <el-menu-item index="3-4">运行分析</el-menu-item> | |
| 22 | + </el-submenu> | |
| 23 | + </el-menu> | |
| 19 | 24 | </el-aside> |
| 20 | 25 | |
| 26 | + <el-container> | |
| 27 | + <el-header style="text-align: center; font-size: 24px"> | |
| 28 | + <span>这里的title</span> | |
| 29 | + </el-header> | |
| 30 | + | |
| 31 | + <el-main> | |
| 32 | + <el-tabs v-model="activeName" tab-position="top" @tab-click="handleClick"> | |
| 33 | + <el-tab-pane label="产品列表" name="first"> | |
| 34 | + <el-table :data="prodListTableData" stripe> | |
| 35 | + <el-table-column prop="prodInfo" label="产品信息" width="340" /> | |
| 36 | + <el-table-column prop="prodTag" label="产品标签" width="340" /> | |
| 37 | + <el-table-column prop="stock" label="库存" width="340" /> | |
| 38 | + <el-table-column label="操作"> | |
| 39 | + <el-button type="text">从应用中删除</el-button> | |
| 40 | + </el-table-column> | |
| 41 | + </el-table> | |
| 42 | + </el-tab-pane> | |
| 43 | + <el-tab-pane label="订单列表" name="second"> | |
| 44 | + <el-table :data="prodListTableData" stripe> | |
| 45 | + <el-table-column prop="prodInfo" label="下单时间" width="220" /> | |
| 46 | + <el-table-column prop="prodTag" label="金额" width="220" /> | |
| 47 | + <el-table-column prop="stock" label="产品id" width="220" /> | |
| 48 | + <el-table-column prop="stock" label="订单号" width="220" /> | |
| 49 | + <el-table-column prop="stock" label="状态" width="220" /> | |
| 50 | + <el-table-column label="操作"> | |
| 51 | + <el-button type="text">从应用中删除</el-button> | |
| 52 | + </el-table-column> | |
| 53 | + </el-table> | |
| 54 | + </el-tab-pane> | |
| 55 | + <el-tab-pane label="用户列表" name="third"> | |
| 56 | + <el-table :data="prodListTableData" stripe> | |
| 57 | + <el-table-column prop="prodInfo" label="用户id" width="180" /> | |
| 58 | + <el-table-column prop="prodTag" label="加入时间" width="180" /> | |
| 59 | + <el-table-column prop="stock" label="引流人" width="180" /> | |
| 60 | + <el-table-column prop="stock" label="引流渠道" width="180" /> | |
| 61 | + <el-table-column prop="stock" label="消费额度" width="180" /> | |
| 62 | + <el-table-column prop="stock" label="访问时长" width="180" /> | |
| 63 | + <el-table-column prop="stock" label="带来流量" width="180" /> | |
| 64 | + <el-table-column label="操作"> | |
| 65 | + <el-button type="text">从应用中删除</el-button> | |
| 66 | + </el-table-column> | |
| 67 | + </el-table> | |
| 68 | + </el-tab-pane> | |
| 69 | + <el-tab-pane label="运营分析" name="fourth"> | |
| 70 | + <el-table :data="prodListTableData" stripe> | |
| 71 | + <el-table-column prop="prodInfo" label="产品信息" width="340" /> | |
| 72 | + <el-table-column prop="prodTag" label="产品标签" width="340" /> | |
| 73 | + <el-table-column prop="stock" label="库存" width="340" /> | |
| 74 | + <el-table-column label="操作"> | |
| 75 | + <el-button type="text">从应用中删除</el-button> | |
| 76 | + </el-table-column> | |
| 77 | + </el-table> | |
| 78 | + </el-tab-pane> | |
| 79 | + </el-tabs> | |
| 80 | + </el-main> | |
| 81 | + </el-container> | |
| 21 | 82 | </el-container> |
| 83 | + | |
| 22 | 84 | </template> |
| 23 | 85 | |
| 24 | 86 | <script> |
| 25 | 87 | export default { |
| 26 | - | |
| 27 | 88 | data() { |
| 28 | 89 | return { |
| 29 | - filterText: '', | |
| 30 | - data2: [{ | |
| 31 | - id: 1, | |
| 32 | - label: 'Level one 1', | |
| 33 | - children: [{ | |
| 34 | - id: 4, | |
| 35 | - label: 'Level two 1-1' }, | |
| 36 | - { | |
| 37 | - id: 10, | |
| 38 | - label: 'Level three 1-1-2' | |
| 39 | - } | |
| 40 | - ] | |
| 90 | + activeName: 'second', | |
| 91 | + path: '', | |
| 92 | + nav_menu_data: [{ | |
| 93 | + title: '产品列表', | |
| 94 | + path: '/Menu/appList' | |
| 41 | 95 | }, { |
| 42 | - id: 2, | |
| 43 | - label: 'Level one 2', | |
| 44 | - children: [{ | |
| 45 | - id: 5, | |
| 46 | - label: 'Level two 2-1' | |
| 47 | - }, { | |
| 48 | - id: 6, | |
| 49 | - label: 'Level two 2-2' | |
| 50 | - }] | |
| 96 | + title: '订单列表', | |
| 97 | + path: '/Menu/orderList' | |
| 51 | 98 | }, { |
| 52 | - id: 3, | |
| 53 | - label: 'Level one 3', | |
| 54 | - children: [{ | |
| 55 | - id: 7, | |
| 56 | - label: 'Level two 3-1' | |
| 57 | - }, { | |
| 58 | - id: 8, | |
| 59 | - label: 'Level two 3-2' | |
| 60 | - }] | |
| 99 | + title: '用户列表', | |
| 100 | + path: '/Menu/userList' | |
| 101 | + }, { | |
| 102 | + title: '运营分析', | |
| 103 | + path: '/Menu/analys' | |
| 61 | 104 | }], |
| 62 | - defaultProps: { | |
| 63 | - children: 'children', | |
| 64 | - label: 'label' | |
| 65 | - } | |
| 105 | + prodListTableData: [{ | |
| 106 | + prodInfo: 'pic', | |
| 107 | + prodTag: '非常带劲', | |
| 108 | + stock: '102' | |
| 109 | + }, | |
| 110 | + { | |
| 111 | + prodInfo: 'pic', | |
| 112 | + prodTag: '非常带劲', | |
| 113 | + stock: '4531' | |
| 114 | + }, | |
| 115 | + { | |
| 116 | + prodInfo: 'pic', | |
| 117 | + prodTag: '非常带劲', | |
| 118 | + stock: '531' | |
| 119 | + }, | |
| 120 | + { | |
| 121 | + prodInfo: 'pic', | |
| 122 | + prodTag: '非常带劲', | |
| 123 | + stock: '768' | |
| 124 | + }] | |
| 66 | 125 | } |
| 67 | 126 | }, |
| 68 | 127 | watch: { |
| 69 | - filterText(val) { | |
| 70 | - this.$refs.tree2.filter(val) | |
| 71 | - } | |
| 72 | 128 | }, |
| 73 | - | |
| 74 | - methods: { | |
| 75 | - filterNode(value, data) { | |
| 76 | - if (!value) return true | |
| 77 | - return data.label.indexOf(value) !== -1 | |
| 129 | + created() { | |
| 130 | + }, | |
| 131 | + method: { | |
| 132 | + onRouteChanged() { | |
| 133 | + const that = this | |
| 134 | + that.path = that.$route.path | |
| 135 | + }, | |
| 136 | + handleClick(tab, event) { | |
| 137 | + console.log(tab, event) | |
| 78 | 138 | } |
| 79 | 139 | } |
| 80 | 140 | } |
| 141 | + | |
| 81 | 142 | </script> |
| 82 | 143 | |
| 144 | +<style> | |
| 145 | + .el-header { | |
| 146 | + background-color: #B3C0D1; | |
| 147 | + color: #333; | |
| 148 | + line-height: 60px; | |
| 149 | + } | |
| 150 | + | |
| 151 | + .el-aside { | |
| 152 | + color: #333; | |
| 153 | + } | |
| 154 | +</style> | ... | ... |