big_data_ott/src/views/AppReport/App.vue

<template>
  <div class="SingleDay">
    <el-breadcrumb>
      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
      <el-breadcrumb-item>app数据报送</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <el-card class="box-card">
      <el-row :gutter="10">
        <el-col :span="16">
          <el-form :model="form" label-width="auto">
            <el-form-item label="周期">
              <span v-text="form.dateRange"></span>
            </el-form-item>
            <el-form-item label="客户端日活数">
              <el-input v-model="form.clientOnlineUser" />
            </el-form-item>
            <el-form-item label="端外H5日活数">
              <el-input v-model="form.webOnlineUser" />
            </el-form-item>
            <el-form-item label="客户端日人均使用时长(毫秒)">
              <el-input v-model="form.clientAvgDuration" />
            </el-form-item>
            <el-form-item>
              <el-popconfirm title="确认更新数据?" @confirm="onSubmitOptimize">
                <template #reference>
                  <el-button type="primary">修改数据</el-button>
                </template>
              </el-popconfirm>
              <el-popconfirm title="确认提交数据?" @confirm="onUploadData">
                <template #reference>
                  <el-button type="primary">上报数据</el-button>
                </template>
              </el-popconfirm>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-form label-width="auto">
            <el-form-item label=" ">
              <span style="color: #fff">1</span>
            </el-form-item>
            <el-form-item label="客户端日活数">
              <span v-text="form.rawClientOnlineUser"></span>
            </el-form-item>
            <el-form-item label="端外H5日活数">
              <span v-text="form.rawWebOnlineUser"></span>
            </el-form-item>
            <el-form-item label="客户端日人均使用时长(毫秒)">
              <span v-text="form.rawClientAvgDuration"></span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  appReportList,
  appReportUpdate,
  appReportUpload
} from '@/api/portrait';

import { ElMessage } from 'element-plus';
import 'element-plus/lib/theme-chalk/el-message.css';
export default {
  name: 'Report',
  data() {
    return {
      form: {
        clientOnlineUser: 0,
        webOnlineUser: 0,
        clientAvgDuration: 0,
        month: '',
        id: '',
        rawClientAvgDuration: 0,
        rawClientOnlineUser: 0,
        rawWebOnlineUser: 0
      },
      t: undefined
    };
  },
  mounted() {
    appReportList().then(res => {
      this.form = res;
    });
  },
  computed: {},
  methods: {
    onSubmitOptimize() {
      let userinfo = JSON.parse(parent.localStorage.userinfo || '{}');
      if (!userinfo.loginname) {
        ElMessage({
          message: '请登录后再试',
          type: 'error'
        });
        return;
      }
      if (this.t) clearTimeout(this.t);
      this.t = setTimeout(() => {
        this.t = clearTimeout(this.t);
        const { id, clientOnlineUser, webOnlineUser, clientAvgDuration } =
          this.form;
        appReportUpdate({
          id,
          loginName: userinfo.loginname || '',
          clientOnlineUser,
          webOnlineUser,
          clientAvgDuration
        })
          .then(() => {
            ElMessage({
              message: '成功',
              type: 'success'
            });
          })
          .catch(err => {
            ElMessage({
              message: err.message || '请重试',
              type: 'error'
            });
          });
      }, 200);
    },
    onUploadData() {
      let userinfo = JSON.parse(parent.localStorage.userinfo || '{}');
      if (!userinfo.loginname) {
        ElMessage({
          message: '请登录后再试',
          type: 'error'
        });
        return;
      }
      if (this.t) clearTimeout(this.t);
      this.t = setTimeout(() => {
        this.t = clearTimeout(this.t);
        const { id } = this.form;
        appReportUpload({
          id,
          loginName: userinfo.loginname || ''
        })
          .then(() => {
            ElMessage({
              message: '成功',
              type: 'success'
            });
          })
          .catch(err => {
            ElMessage({
              message: err.message || '请重试',
              type: 'error'
            });
          });
      }, 200);
    }
  },
  components: {}
};
</script>

<style>
.SingleDay {
  margin: 10px 15px;
}
.SingleDay .nowrap .cell {
  white-space: nowrap;
}
</style>