data item perm
This commit is contained in:
yulixing
parent
181760bf82
commit
aac69347df
@ -15,6 +15,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.18.0",
|
||||
"echarts": "^4.2.1",
|
||||
"element-ui": "^2.9.1",
|
||||
"install": "^0.12.2",
|
||||
"js-cookie": "2.2.0",
|
||||
@ -23,6 +24,7 @@
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"v-charts": "^1.19.0",
|
||||
"vue": "2.6.10",
|
||||
"vue-highlightjs": "^1.3.3",
|
||||
"vue-json-editor": "^1.3.0",
|
||||
|
||||
@ -7,3 +7,13 @@ export function getReport(params) {
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function getGameData(params) {
|
||||
return request({
|
||||
url: '/games/data/game-data',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
37
src/api/items.js
Normal file
37
src/api/items.js
Normal file
@ -0,0 +1,37 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// ---------------------------------------------- //
|
||||
|
||||
export function getGameItemList(params) {
|
||||
return request({
|
||||
url: '/games/item',
|
||||
method: 'get',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function saveGameItem(data) {
|
||||
return request({
|
||||
url: '/games/item',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function editGameItem(data) {
|
||||
return request({
|
||||
url: '/games/item',
|
||||
method: 'put',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function delGameItem(data) {
|
||||
return request({
|
||||
url: '/games/item',
|
||||
method: 'delete',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// ---------------------------------------------- //
|
||||
@ -11,6 +11,8 @@ import 'highlight.js/styles/github.css'
|
||||
|
||||
import '@/styles/index.scss' // global css
|
||||
|
||||
import VeLine from 'v-charts/lib/line.common'
|
||||
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
@ -30,6 +32,8 @@ import '@/permission' // permission control
|
||||
Vue.use(ElementUI, { locale })
|
||||
Vue.use(VueHighlightJS)
|
||||
|
||||
Vue.component(VeLine.name, VeLine)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
|
||||
@ -142,6 +142,12 @@ const gamesRouter = {
|
||||
name: 'GameDetailsAdUid',
|
||||
meta: {title: '广告码'},
|
||||
},
|
||||
{
|
||||
path: 'item',
|
||||
component: () => import('@/views/games/details/item'),
|
||||
name: 'GameDetailsItems',
|
||||
meta: {title: '道具'},
|
||||
},
|
||||
{
|
||||
path: 'mp/edit',
|
||||
component: () => import('@/views/games/details/mp/edit'),
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import axios from 'axios'
|
||||
import { MessageBox, Message } from 'element-ui'
|
||||
import {MessageBox, Message} from 'element-ui'
|
||||
import store from '@/store'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import {getToken} from '@/utils/auth'
|
||||
|
||||
// create an axios instance
|
||||
const service = axios.create({
|
||||
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
|
||||
withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 10000 // request timeout
|
||||
timeout: 10000, // request timeout
|
||||
})
|
||||
|
||||
// request interceptor
|
||||
@ -41,13 +41,13 @@ service.interceptors.response.use(
|
||||
* You can also judge the status by HTTP Status Code
|
||||
*/
|
||||
response => {
|
||||
const { data } = response
|
||||
const {data} = response
|
||||
|
||||
if (data.errcode !== 0) {
|
||||
Message({
|
||||
message: data.errmsg || 'error',
|
||||
message: data.response.data.errmsg || 'error',
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
duration: 5 * 1000,
|
||||
})
|
||||
return Promise.reject(data.errmsg || 'error')
|
||||
} else {
|
||||
@ -87,11 +87,11 @@ service.interceptors.response.use(
|
||||
// }
|
||||
},
|
||||
error => {
|
||||
console.log(error) // for debug
|
||||
console.log('err:', error.response.data) // for debug
|
||||
Message({
|
||||
message: error.message,
|
||||
message: error.response.data.errmsg,
|
||||
type: 'error',
|
||||
duration: 5 * 1000
|
||||
duration: 5 * 1000,
|
||||
})
|
||||
return Promise.reject(error)
|
||||
}
|
||||
|
||||
@ -240,6 +240,7 @@ export default {
|
||||
})
|
||||
.then(() => {
|
||||
delAdUid({
|
||||
uid: this.uid,
|
||||
_id: this.allUid[index]._id
|
||||
})
|
||||
.then(res => {
|
||||
|
||||
@ -4,83 +4,147 @@
|
||||
<el-form
|
||||
:inline="true"
|
||||
class="filter"
|
||||
:model="filterForm"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="平台">
|
||||
<el-select
|
||||
v-model="platform_id"
|
||||
@change="changePlatform"
|
||||
placeholder="请选择平台"
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in platformsArr"
|
||||
:key="item.platform.platform_id"
|
||||
:label="item.platform.name"
|
||||
:value="item.platform.platform_id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
align="right"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="changeDate"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型">
|
||||
<el-select
|
||||
v-model="isNew"
|
||||
@change="changeNew"
|
||||
placeholder="是否当日新用户"
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
label="非当日新用户"
|
||||
:value="0"
|
||||
/>
|
||||
<el-option
|
||||
label="当日新用户"
|
||||
:value="1"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
label="游戏"
|
||||
class="w-fill"
|
||||
>
|
||||
<el-input
|
||||
v-model="gameInfo.game_name"
|
||||
:disabled="true"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
label="平台"
|
||||
class="w-fill"
|
||||
prop="channelid"
|
||||
>
|
||||
<el-select
|
||||
v-model="filterForm.channelid"
|
||||
placeholder="请选择平台"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in platformsArr"
|
||||
:key="item.platform.platform_id"
|
||||
:label="item.platform.name"
|
||||
:value="item.platform.platform_id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
label="类型"
|
||||
class="w-fill"
|
||||
prop="method"
|
||||
>
|
||||
<el-select
|
||||
v-model="filterForm.method"
|
||||
placeholder="查询的数据类型"
|
||||
>
|
||||
<el-option
|
||||
label="非当日新用户"
|
||||
:value="0"
|
||||
/>
|
||||
<el-option
|
||||
label="当日新用户"
|
||||
:value="1"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
label="粒度"
|
||||
class="w-fill"
|
||||
prop="time_partice"
|
||||
>
|
||||
<el-select
|
||||
v-model="filterForm.time_partice"
|
||||
placeholder="查询的时间颗粒"
|
||||
>
|
||||
<el-option
|
||||
label="1 分钟"
|
||||
:value="0"
|
||||
/>
|
||||
<el-option
|
||||
label="5 分钟"
|
||||
:value="1"
|
||||
/>
|
||||
<el-option
|
||||
label="1 小时"
|
||||
:value="2"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item
|
||||
label="关键词"
|
||||
class="w-fill"
|
||||
prop="ad_channelid"
|
||||
>
|
||||
<el-input
|
||||
v-model="filterForm.ad_channelid"
|
||||
placeholder="广告上报的关键词"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
label="时段"
|
||||
class="w-fill"
|
||||
prop="date_range"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="filterForm.date_range"
|
||||
type="datetimerange"
|
||||
:picker-options="pickerOptions"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="changeDate"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form-item class="w-fill-tool">
|
||||
<div class="al-r">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="search"
|
||||
>查询</el-button>
|
||||
<el-button @click="resetForm('filterForm')">重置</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</el-form>
|
||||
<!-- filter end -->
|
||||
|
||||
<!-- 占位 -->
|
||||
<placeholder v-if="JSON.stringify(reportData) === '{}'" />
|
||||
<!-- 占位 end -->
|
||||
|
||||
<!-- 数据面板 -->
|
||||
<div class="data-panel">
|
||||
<div
|
||||
class="data-wrap"
|
||||
v-for="(val, key) in reportData"
|
||||
:key="key"
|
||||
>
|
||||
|
||||
<h2 v-if="val.length > 0">{{key.toUpperCase()}}</h2>
|
||||
<el-row :gutter="16">
|
||||
<el-col
|
||||
:span="6"
|
||||
v-for="(item, index) in val"
|
||||
:key="index"
|
||||
>
|
||||
<div class="data-box">
|
||||
<span class="title c-t-3">{{item.explan}}</span>
|
||||
<span class="key c-t-4">{{item.name}}</span>
|
||||
<span class="num">{{item.value}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<!-- data -->
|
||||
<div class="data">
|
||||
<ve-line :data="chartData"></ve-line>
|
||||
</div>
|
||||
<!-- 数据面板 end -->
|
||||
|
||||
<!-- data end -->
|
||||
|
||||
<!-- placeholder -->
|
||||
<div class="tip ">
|
||||
<placeholder />
|
||||
</div>
|
||||
<!-- placeholder end -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -89,7 +153,7 @@
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getGame, updateRC } from '@/api/games'
|
||||
import { getReport } from '@/api/data'
|
||||
import { getGameData } from '@/api/data'
|
||||
import getPageTitle from '@/utils/get-page-title'
|
||||
import { reject, Promise } from 'q'
|
||||
import { getToken } from '@/utils/auth'
|
||||
@ -105,11 +169,64 @@ export default {
|
||||
platform_id: '',
|
||||
platformsArr: [],
|
||||
gameInfo: {},
|
||||
permEdit: false,
|
||||
permPublish: false,
|
||||
date: '',
|
||||
isNew: 1,
|
||||
reportData: {}
|
||||
// filter
|
||||
filterForm: {
|
||||
gameid: '',
|
||||
channelid: '',
|
||||
ad_channelid: '',
|
||||
method: 0,
|
||||
time_partice: 0,
|
||||
time_begin: '',
|
||||
time_end: '',
|
||||
date_range: []
|
||||
},
|
||||
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])
|
||||
}
|
||||
},
|
||||
{
|
||||
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])
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// data
|
||||
// chartData: {
|
||||
// columns: ['日期', '访问用户', '下单用户', '下单率'],
|
||||
// rows: [
|
||||
// { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
|
||||
// { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
|
||||
// { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
|
||||
// { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
|
||||
// { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
|
||||
// { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
|
||||
// ]
|
||||
// }
|
||||
chartData: {
|
||||
columns: [],
|
||||
rows: []
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -160,6 +277,12 @@ export default {
|
||||
? this.platformsArr[0].platform.platform_id
|
||||
: ''
|
||||
}
|
||||
|
||||
this.filterForm.gameid = this.gameInfo.game_id
|
||||
this.filterForm.channelid = this.platformsArr[0]
|
||||
? this.platformsArr[0].platform.platform_id
|
||||
: ''
|
||||
|
||||
if (cb && cb instanceof Function) cb()
|
||||
}
|
||||
})
|
||||
@ -167,40 +290,41 @@ export default {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
getGameData() {},
|
||||
getData() {
|
||||
console.log({
|
||||
uid: this.uid,
|
||||
game_id: 1004, // TODO: this.gameInfo.game_id
|
||||
platform_id: this.platform_id, // TODO: this.platform_id
|
||||
date: this.date, // TODO: this.date
|
||||
isNew: this.isNew
|
||||
})
|
||||
getReport({
|
||||
uid: this.uid,
|
||||
game_id: 1004, // TODO: this.gameInfo.game_id
|
||||
platform_id: 6001, // TODO: this.platform_id
|
||||
date: this.date, // TODO: this.date
|
||||
isNew: this.isNew
|
||||
})
|
||||
this.filterForm.uid = this.uid
|
||||
getGameData(this.filterForm)
|
||||
.then(res => {
|
||||
const { data } = res
|
||||
const data = res.data
|
||||
if (data.errcode === 0) {
|
||||
this.reportData = data.result
|
||||
const nums = data.message.result[0]
|
||||
this.chartData.columns = ['日期', '数量']
|
||||
this.chartData.rows = []
|
||||
console.log(data)
|
||||
|
||||
for (const key in nums) {
|
||||
if (nums.hasOwnProperty(key)) {
|
||||
console.log('key')
|
||||
const num = nums[key]
|
||||
this.chartData.rows.push({
|
||||
日期: key,
|
||||
数量: num
|
||||
})
|
||||
}
|
||||
}
|
||||
console.log(JSON.stringify(this.chartData))
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.reportData = {}
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
changePlatform() {
|
||||
search() {
|
||||
this.getData()
|
||||
},
|
||||
changeDate() {
|
||||
this.getData()
|
||||
},
|
||||
changeNew() {
|
||||
this.getData()
|
||||
this.filterForm.time_begin = this.filterForm.date_range[0]
|
||||
this.filterForm.time_end = this.filterForm.date_range[1]
|
||||
},
|
||||
validForm(formName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
@ -208,47 +332,36 @@ export default {
|
||||
valid ? resolve() : reject()
|
||||
})
|
||||
})
|
||||
},
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-box {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
.title,
|
||||
.key,
|
||||
.num {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.key {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num {
|
||||
font-size: 72px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.btn-group >>> .el-button + .el-button {
|
||||
margin-left: 0;
|
||||
.w-fill {
|
||||
width: 100% !important;
|
||||
}
|
||||
.w-fill >>> .el-form-item__content {
|
||||
width: calc(100% - 80px);
|
||||
}
|
||||
.w-fill >>> .el-form-item__content .el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.w-fill >>> .el-form-item__content .el-date-editor--datetimerange {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-fill-tool {
|
||||
width: 100%;
|
||||
}
|
||||
.w-fill-tool >>> .el-form-item__content {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -9,29 +9,18 @@
|
||||
<el-menu-item :index="`/games/details/${uid}/info`">详情</el-menu-item>
|
||||
<!-- TODO: 开放数据页 -->
|
||||
<!-- <el-menu-item :index="`/games/details/${uid}/data`">数据</el-menu-item> -->
|
||||
<el-submenu v-if="uid !== 'new'" :index="`/games/details/${uid}/settings/index`">
|
||||
<el-submenu
|
||||
v-if="uid !== 'new'"
|
||||
:index="`/games/details/${uid}/settings/index`"
|
||||
>
|
||||
<template slot="title">配置</template>
|
||||
<el-menu-item
|
||||
:index="`/games/details/${uid}/settings/index`"
|
||||
>所有</el-menu-item>
|
||||
<el-menu-item
|
||||
:index="`/games/details/${uid}/settings/achievement`"
|
||||
>成就</el-menu-item>
|
||||
<el-menu-item
|
||||
:index="`/games/details/${uid}/settings/invitation`"
|
||||
>邀请</el-menu-item>
|
||||
<el-menu-item
|
||||
:index="`/games/details/${uid}/settings/red-envelope`"
|
||||
>红包</el-menu-item>
|
||||
<el-menu-item
|
||||
:index="`/games/details/${uid}/settings/sign`"
|
||||
>签到</el-menu-item>
|
||||
<el-menu-item
|
||||
:index="`/games/details/${uid}/settings/online`"
|
||||
>在线</el-menu-item>
|
||||
<el-menu-item
|
||||
:index="`/games/details/${uid}/settings/banner`"
|
||||
>banner</el-menu-item>
|
||||
<el-menu-item :index="`/games/details/${uid}/settings/index`">所有</el-menu-item>
|
||||
<el-menu-item :index="`/games/details/${uid}/settings/achievement`">成就</el-menu-item>
|
||||
<el-menu-item :index="`/games/details/${uid}/settings/invitation`">邀请</el-menu-item>
|
||||
<el-menu-item :index="`/games/details/${uid}/settings/red-envelope`">红包</el-menu-item>
|
||||
<el-menu-item :index="`/games/details/${uid}/settings/sign`">签到</el-menu-item>
|
||||
<el-menu-item :index="`/games/details/${uid}/settings/online`">在线</el-menu-item>
|
||||
<el-menu-item :index="`/games/details/${uid}/settings/banner`">banner</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item
|
||||
v-if="uid !== 'new'"
|
||||
@ -41,13 +30,23 @@
|
||||
v-if="uid !== 'new'"
|
||||
:index="`/games/details/${uid}/reward`"
|
||||
>客服奖励</el-menu-item>
|
||||
<el-menu-item v-if="uid !== 'new'" :index="`/games/details/${uid}/recommendation`">推荐</el-menu-item>
|
||||
<el-menu-item
|
||||
v-if="uid !== 'new'"
|
||||
:index="`/games/details/${uid}/recommendation`"
|
||||
>推荐</el-menu-item>
|
||||
|
||||
<el-submenu v-if="uid !== 'new'" :index="`/games/details/${uid}/ad-pos`">
|
||||
<el-submenu
|
||||
v-if="uid !== 'new'"
|
||||
:index="`/games/details/${uid}/ad-pos`"
|
||||
>
|
||||
<template slot="title">广告</template>
|
||||
<el-menu-item :index="`/games/details/${uid}/ad-pos`">广告位</el-menu-item>
|
||||
<el-menu-item :index="`/games/details/${uid}/ad-uid`">广告码</el-menu-item>
|
||||
</el-submenu>
|
||||
<el-menu-item
|
||||
v-if="uid !== 'new'"
|
||||
:index="`/games/details/${uid}/item`"
|
||||
>道具</el-menu-item>
|
||||
</el-menu>
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
293
src/views/games/details/item.vue
Normal file
293
src/views/games/details/item.vue
Normal file
@ -0,0 +1,293 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<div style="width: 60%;">
|
||||
<el-collapse
|
||||
v-model="activeNames"
|
||||
v-if="allItem.length > 0"
|
||||
>
|
||||
<el-collapse-item
|
||||
:name="index"
|
||||
v-for="(item, index) in allItem"
|
||||
:key="index"
|
||||
>
|
||||
<template slot="title">
|
||||
<svg-icon
|
||||
style="margin-right: 20px;"
|
||||
icon-class="del"
|
||||
@click.stop="delItem(index)"
|
||||
/>
|
||||
{{ `[${index+1}]${item.item_id || '道具 ID'}-${item.item_name || '道具名称'}`}}
|
||||
</template>
|
||||
<el-form
|
||||
:ref="`gameItem${index}`"
|
||||
:model="item"
|
||||
:rules="gameItemRules"
|
||||
style="width: 100%"
|
||||
label-width="100px"
|
||||
class="mgt-20 mgb-20"
|
||||
>
|
||||
<el-form-item
|
||||
label="道具 ID"
|
||||
prop="item_id"
|
||||
>
|
||||
<el-input
|
||||
v-model.number="item.item_id"
|
||||
style="width: 70%"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="道具名称"
|
||||
prop="item_name"
|
||||
>
|
||||
<el-input
|
||||
v-model.number="item.item_name"
|
||||
style="width: 70%"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-if="platform_id">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="saveItem(index)"
|
||||
>保存</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
@click="delItem(index)"
|
||||
>删除</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
||||
<div
|
||||
class="tip "
|
||||
v-else
|
||||
>
|
||||
<placeholder />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="btn-group"
|
||||
v-if="platform_id"
|
||||
>
|
||||
<el-button
|
||||
class="mgt-20 w100"
|
||||
@click="addItem"
|
||||
v-if="permEdit"
|
||||
>新增</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getGame } from '@/api/games'
|
||||
import {
|
||||
getGameItemList,
|
||||
saveGameItem,
|
||||
editGameItem,
|
||||
delGameItem
|
||||
} from '@/api/items'
|
||||
import getPageTitle from '@/utils/get-page-title'
|
||||
import Coordinate from '@/components/Coordinate'
|
||||
import Placeholder from '@/components/Placeholder'
|
||||
import { reject, Promise } from 'q'
|
||||
|
||||
export default {
|
||||
name: 'GameDetailsGameItem',
|
||||
data() {
|
||||
return {
|
||||
// common
|
||||
uid: '',
|
||||
type: 'normal',
|
||||
platform_id: '',
|
||||
platformsArr: [],
|
||||
gameInfo: {},
|
||||
permEdit: false,
|
||||
permPublish: false,
|
||||
hasList: false,
|
||||
// form
|
||||
gameItem: {},
|
||||
gameItemRules: {
|
||||
game_id: [
|
||||
{ required: true, message: '请填写游戏 ID', trigger: 'blur' }
|
||||
],
|
||||
item_id: [{ required: true, message: '请填写道具ID', trigger: 'blur' }],
|
||||
item_name: [
|
||||
{ required: true, message: '请填写道具名称', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
activeNames: [],
|
||||
defaultItem: {
|
||||
item_id: '',
|
||||
item_name: ''
|
||||
},
|
||||
allItem: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Coordinate,
|
||||
Placeholder
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
mounted() {
|
||||
this.uid = this.$route.params.uid
|
||||
this.type = this.$route.query.type ? this.$route.query.type : 'normal'
|
||||
this.permEdit =
|
||||
this.userInfo.permissions.includes(`${this.uid}-edit`) ||
|
||||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||||
this.userInfo.permissions.includes(`games-writeable`)
|
||||
this.permPublish =
|
||||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||||
this.userInfo.permissions.includes(`games-writeable`)
|
||||
this.getGameInfo(this.getGameItemList)
|
||||
},
|
||||
methods: {
|
||||
getGameInfo(cb) {
|
||||
getGame({ uid: this.uid })
|
||||
.then(res => {
|
||||
const { data } = res
|
||||
if (data.errcode === 0) {
|
||||
this.gameInfo = data.gameInfo
|
||||
this.platformsArr = data.gameInfo.platforms
|
||||
this.$route.meta.title = this.gameInfo.game_name
|
||||
document.title = getPageTitle(this.gameInfo.game_name)
|
||||
if (this.$route.query.platform_id) {
|
||||
this.platform_id = this.$route.query.platform_id
|
||||
} else {
|
||||
this.platform_id = this.platformsArr[0]
|
||||
? this.platformsArr[0].platform.platform_id
|
||||
: ''
|
||||
}
|
||||
this.defaultItem.game_id = this.gameInfo.game_id
|
||||
this.defaultItem.game_name = this.gameInfo.game_name
|
||||
this.defaultItem.platform_id = this.platform_id
|
||||
if (cb && cb instanceof Function) cb()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
getGameItemList() {
|
||||
getGameItemList({
|
||||
uid: this.uid,
|
||||
game_id: this.gameInfo.game_id
|
||||
})
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) {
|
||||
this.allItem = data.result
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
addItem() {
|
||||
const defaultItem = JSON.parse(JSON.stringify(this.defaultItem))
|
||||
this.activeNames.push(this.allItem.length)
|
||||
this.allItem.push(defaultItem)
|
||||
},
|
||||
delItem(index) {
|
||||
this.$confirm('是否要删除该游戏道具?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
delGameItem({
|
||||
_id: this.allItem[index]._id,
|
||||
uid: this.uid
|
||||
})
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) {
|
||||
this.$message.success('成功删除游戏道具！')
|
||||
this.allItem.splice(index, 1)
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message.info('已取消删除！')
|
||||
})
|
||||
},
|
||||
async saveItem(index) {
|
||||
const valid = await this.validForm(`gameItem${index}`)
|
||||
if (valid) {
|
||||
const itemInfo = JSON.parse(JSON.stringify(this.allItem[index]))
|
||||
|
||||
if (this.allItem[index]._id) {
|
||||
// 更新
|
||||
const self = this
|
||||
editGameItem({
|
||||
uid: this.uid,
|
||||
_id: itemInfo._id,
|
||||
game_id: this.gameInfo.game_id,
|
||||
item_id: itemInfo.item_id,
|
||||
item_name: itemInfo.item_name
|
||||
})
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) {
|
||||
this.$message.success('游戏道具修改成功！')
|
||||
this.$refs[`gameItem${index}`][0].clearValidate()
|
||||
this.getGameItemList()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
} else {
|
||||
// 新增
|
||||
|
||||
const self = this
|
||||
|
||||
saveGameItem({
|
||||
uid: this.uid,
|
||||
game_id: this.gameInfo.game_id,
|
||||
item_id: itemInfo.item_id,
|
||||
item_name: itemInfo.item_name
|
||||
})
|
||||
.then(res => {
|
||||
const data = res.data
|
||||
if (data.errcode === 0) {
|
||||
this.$message.success('游戏道具新增成功！')
|
||||
this.$refs[`gameItem${index}`][0].clearValidate()
|
||||
this.getGameItemList()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$message.error('请按要求填写表单！')
|
||||
}
|
||||
},
|
||||
validForm(formName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs[formName][0].validate(valid => {
|
||||
valid ? resolve(true) : reject()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.btn-group >>> .el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
255
src/views/games/details/report.vue
Normal file
255
src/views/games/details/report.vue
Normal file
@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<div class="main-content">
|
||||
<!-- filter -->
|
||||
<el-form
|
||||
:inline="true"
|
||||
class="filter"
|
||||
>
|
||||
<el-form-item label="平台">
|
||||
<el-select
|
||||
v-model="platform_id"
|
||||
@change="changePlatform"
|
||||
placeholder="请选择平台"
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in platformsArr"
|
||||
:key="item.platform.platform_id"
|
||||
:label="item.platform.name"
|
||||
:value="item.platform.platform_id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
v-model="date"
|
||||
align="right"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
style="width: 100%"
|
||||
value-format="yyyy-MM-dd"
|
||||
@change="changeDate"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户类型">
|
||||
<el-select
|
||||
v-model="isNew"
|
||||
@change="changeNew"
|
||||
placeholder="是否当日新用户"
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
label="非当日新用户"
|
||||
:value="0"
|
||||
/>
|
||||
<el-option
|
||||
label="当日新用户"
|
||||
:value="1"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- filter end -->
|
||||
|
||||
<!-- 占位 -->
|
||||
<placeholder v-if="JSON.stringify(reportData) === '{}'" />
|
||||
<!-- 占位 end -->
|
||||
|
||||
<!-- 数据面板 -->
|
||||
<div class="data-panel">
|
||||
<div
|
||||
class="data-wrap"
|
||||
v-for="(val, key) in reportData"
|
||||
:key="key"
|
||||
>
|
||||
|
||||
<h2 v-if="val.length > 0">{{key.toUpperCase()}}</h2>
|
||||
<el-row :gutter="16">
|
||||
<el-col
|
||||
:span="6"
|
||||
v-for="(item, index) in val"
|
||||
:key="index"
|
||||
>
|
||||
<div class="data-box">
|
||||
<span class="title c-t-3">{{item.explan}}</span>
|
||||
<span class="key c-t-4">{{item.name}}</span>
|
||||
<span class="num">{{item.value}}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据面板 end -->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import { getGame, updateRC } from '@/api/games'
|
||||
import { getReport } from '@/api/data'
|
||||
import getPageTitle from '@/utils/get-page-title'
|
||||
import { reject, Promise } from 'q'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import Placeholder from '@/components/Placeholder'
|
||||
|
||||
export default {
|
||||
name: 'GameDetailsData',
|
||||
data() {
|
||||
return {
|
||||
// common
|
||||
uid: '',
|
||||
token: '',
|
||||
platform_id: '',
|
||||
platformsArr: [],
|
||||
gameInfo: {},
|
||||
permEdit: false,
|
||||
permPublish: false,
|
||||
date: '',
|
||||
isNew: 1,
|
||||
reportData: {}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Placeholder
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['userInfo'])
|
||||
},
|
||||
mounted() {
|
||||
this.uid = this.$route.params.uid
|
||||
this.type = this.$route.query.type ? this.$route.query.type : 'normal'
|
||||
this.token = getToken()
|
||||
this.permEdit =
|
||||
this.userInfo.permissions.includes(`${this.uid}-edit`) ||
|
||||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||||
this.userInfo.permissions.includes(`games-writeable`)
|
||||
this.permPublish =
|
||||
this.userInfo.permissions.includes(`${this.uid}-publish`) ||
|
||||
this.userInfo.permissions.includes(`games-writeable`)
|
||||
|
||||
const now = new Date()
|
||||
const before = new Date(now.getTime() - 24 * 60 * 60 * 1000)
|
||||
|
||||
this.date = `${before.getFullYear()}-${(before.getMonth() + 1)
|
||||
.toString()
|
||||
.padStart(2, '0')}-${before
|
||||
.getDate()
|
||||
.toString()
|
||||
.padStart(2, '0')}`
|
||||
|
||||
this.getGameInfo(this.getData)
|
||||
},
|
||||
methods: {
|
||||
getGameInfo(cb) {
|
||||
const dataType = this.isDev ? 'dev' : 'pro'
|
||||
getGame({ uid: this.uid, data_type: dataType })
|
||||
.then(res => {
|
||||
const { data } = res
|
||||
if (data.errcode === 0) {
|
||||
this.gameInfo = data.gameInfo
|
||||
this.platformsArr = data.gameInfo.platforms
|
||||
this.$route.meta.title = this.gameInfo.game_name
|
||||
document.title = getPageTitle(this.gameInfo.game_name)
|
||||
if (this.$route.query.platform_id) {
|
||||
this.platform_id = this.$route.query.platform_id
|
||||
} else {
|
||||
this.platform_id = this.platformsArr[0]
|
||||
? this.platformsArr[0].platform.platform_id
|
||||
: ''
|
||||
}
|
||||
if (cb && cb instanceof Function) cb()
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
getData() {
|
||||
console.log({
|
||||
uid: this.uid,
|
||||
game_id: 1004, // TODO: this.gameInfo.game_id
|
||||
platform_id: this.platform_id, // TODO: this.platform_id
|
||||
date: this.date, // TODO: this.date
|
||||
isNew: this.isNew
|
||||
})
|
||||
getReport({
|
||||
uid: this.uid,
|
||||
game_id: 1004, // TODO: this.gameInfo.game_id
|
||||
platform_id: 6001, // TODO: this.platform_id
|
||||
date: this.date, // TODO: this.date
|
||||
isNew: this.isNew
|
||||
})
|
||||
.then(res => {
|
||||
const { data } = res
|
||||
if (data.errcode === 0) {
|
||||
this.reportData = data.result
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
this.reportData = {}
|
||||
console.log(err)
|
||||
})
|
||||
},
|
||||
changePlatform() {
|
||||
this.getData()
|
||||
},
|
||||
changeDate() {
|
||||
this.getData()
|
||||
},
|
||||
changeNew() {
|
||||
this.getData()
|
||||
},
|
||||
validForm(formName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.$refs[formName][0].validate(valid => {
|
||||
valid ? resolve() : reject()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.data-box {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
&:hover{
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
.title,
|
||||
.key,
|
||||
.num {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.key {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num {
|
||||
font-size: 72px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.btn-group >>> .el-button + .el-button {
|
||||
margin-left: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user