data item perm

package.json

@@ -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",

src/api/data.js

@@ -7,3 +7,13 @@ export function getReport(params) {
     params,
   })
 }
+
+export function getGameData(params) {
+  return request({
+    url: '/games/data/game-data',
+    method: 'get',
+    params,
+  })
+}
+
+

src/api/items.js

@@ -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,
+    })
+  }
+  
+  // ---------------------------------------------- //

src/main.js

@@ -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({

src/router/modules/games.js

@@ -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'),

src/utils/request.js

@@ -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)
   }

src/views/games/details/adUid.vue

@@ -240,6 +240,7 @@ export default {
       })
         .then(() => {
           delAdUid({
+            uid: this.uid,
             _id: this.allUid[index]._id
           })
             .then(res => {

src/views/games/details/data.vue

@@ -4,83 +4,147 @@
     <el-form
       :inline="true"
       class="filter"
+      :model="filterForm"
+      label-width="80px"
     >
-      <el-form-item label="平台">
+
-        <el-select
+      <el-row :gutter="16">
-          v-model="platform_id"
+        <el-col :span="6">
-          @change="changePlatform"
+          <el-form-item
-          placeholder="请选择平台"
+            label="游戏"
-          class="w100"
+            class="w-fill"
-        >
+          >
-          <el-option
+            <el-input
-            v-for="item in platformsArr"
+              v-model="gameInfo.game_name"
-            :key="item.platform.platform_id"
+              :disabled="true"
-            :label="item.platform.name"
+            ></el-input>
-            :value="item.platform.platform_id"
+          </el-form-item>
-          />
+        </el-col>
-        </el-select>
+        <el-col :span="6">
-      </el-form-item>
+          <el-form-item
-      <el-form-item label="日期">
+            label="平台"
-        <el-date-picker
+            class="w-fill"
-          v-model="date"
+            prop="channelid"
-          align="right"
+          >
-          type="date"
+            <el-select
-          placeholder="选择日期"
+              v-model="filterForm.channelid"
-          style="width: 100%"
+              placeholder="请选择平台"
-          value-format="yyyy-MM-dd"
+            >
-          @change="changeDate"
+              <el-option
-        >
+                v-for="item in platformsArr"
-        </el-date-picker>
+                :key="item.platform.platform_id"
-      </el-form-item>
+                :label="item.platform.name"
-      <el-form-item label="用户类型">
+                :value="item.platform.platform_id"
-        <el-select
+              />
-          v-model="isNew"
+            </el-select>
-          @change="changeNew"
+          </el-form-item>
-          placeholder="是否当日新用户"
+        </el-col>
-          class="w100"
+        <el-col :span="6">
-        >
+          <el-form-item
-          <el-option
+            label="类型"
-            label="非当日新用户"
+            class="w-fill"
-            :value="0"
+            prop="method"
-          />
+          >
-          <el-option
+            <el-select
-            label="当日新用户"
+              v-model="filterForm.method"
-            :value="1"
+              placeholder="查询的数据类型"
-          />
+            >
-        </el-select>
+              <el-option
-      </el-form-item>
+                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 -->
 
-    <!-- 占位 -->
+    <!-- data -->
-    <placeholder v-if="JSON.stringify(reportData) === '{}'" />
+    <div class="data">
-    <!-- 占位 end -->
+      <ve-line :data="chartData"></ve-line>
-
-    <!-- 数据面板 -->
-    <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 -->
+
+    <!-- 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,
+      // filter
-      permPublish: false,
+      filterForm: {
-      date: '',
+        gameid: '',
-      isNew: 1,
+        channelid: '',
-      reportData: {}
+        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({
+      this.filterForm.uid = this.uid
-        uid: this.uid,
+      getGameData(this.filterForm)
-        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
+          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()
+      this.filterForm.time_begin = this.filterForm.date_range[0]
-    },
+      this.filterForm.time_end = this.filterForm.date_range[1]
-    changeNew() {
-      this.getData()
     },
     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 {
+.w-fill {
-  margin-left: 0;
+  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>
 

src/views/games/details/index.vue

@@ -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
+        <el-menu-item :index="`/games/details/${uid}/settings/index`">所有</el-menu-item>
-          :index="`/games/details/${uid}/settings/index`"
+        <el-menu-item :index="`/games/details/${uid}/settings/achievement`">成就</el-menu-item>
-        >所有</el-menu-item>
+        <el-menu-item :index="`/games/details/${uid}/settings/invitation`">邀请</el-menu-item>
-        <el-menu-item
+        <el-menu-item :index="`/games/details/${uid}/settings/red-envelope`">红包</el-menu-item>
-          :index="`/games/details/${uid}/settings/achievement`"
+        <el-menu-item :index="`/games/details/${uid}/settings/sign`">签到</el-menu-item>
-        >成就</el-menu-item>
+        <el-menu-item :index="`/games/details/${uid}/settings/online`">在线</el-menu-item>
-        <el-menu-item
+        <el-menu-item :index="`/games/details/${uid}/settings/banner`">banner</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>

src/views/games/details/item.vue

@@ -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>
+
+

src/views/games/details/report.vue

@@ -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>
+
+