|
|
@@ -33,7 +33,7 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
- <el-button type="primary" @click="onSubmit">导出</el-button>
|
|
|
+ <el-button type="primary" @click="onExport">导出</el-button>
|
|
|
<el-button type="primary" @click="binding">绑定账号</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
@@ -41,31 +41,101 @@
|
|
|
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
|
<el-tab-pane label="传播数据" name="T1">
|
|
|
<el-table
|
|
|
- :data="tableData"
|
|
|
+ :data="disseminateData.list"
|
|
|
style="width: 100%"
|
|
|
:header-cell-style="{
|
|
|
backgroundColor: '#f4f5f7',
|
|
|
color: '#606266',
|
|
|
}"
|
|
|
+ ref="table1"
|
|
|
+ align="center"
|
|
|
+ empty-text="暂无数据"
|
|
|
+ @sort-change="e=>sort_change(e, 'disseminate')"
|
|
|
>
|
|
|
- <el-table-column prop="date" label="Date" width="180" />
|
|
|
- <el-table-column prop="name" label="Name" width="180" />
|
|
|
- <el-table-column prop="address" label="Address" />
|
|
|
+ <template
|
|
|
+ v-for="(item, i) in config.tableCol.agg[
|
|
|
+ btns[condition.platform].text
|
|
|
+ ]"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ :width="item.width"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :prop="item.key"
|
|
|
+ :label="item.label"
|
|
|
+ :sortable="item.sortable"
|
|
|
+ :sort-orders="
|
|
|
+ item.sortable ? ['ascending', 'descending', null] : []
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ {{
|
|
|
+ item.type == 'number'
|
|
|
+ ? formatter(scope.row[item.key])
|
|
|
+ : scope.row[item.key]
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
</el-table>
|
|
|
+ <el-pagination
|
|
|
+ @current-change="e => changePageDisseminate(e)"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-count="
|
|
|
+ Math.ceil(disseminateData.total / condition.disseminate.size) || 1
|
|
|
+ "
|
|
|
+ />
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="稿件数据" name="T2">
|
|
|
<el-table
|
|
|
- :data="tableData"
|
|
|
+ :data="manuscriptData.list"
|
|
|
style="width: 100%"
|
|
|
:header-cell-style="{
|
|
|
backgroundColor: '#f4f5f7',
|
|
|
color: '#606266',
|
|
|
}"
|
|
|
+ ref="table1"
|
|
|
+ align="center"
|
|
|
+ empty-text="暂无数据"
|
|
|
+ @sort-change="e=>sort_change(e, 'manuscript')"
|
|
|
>
|
|
|
- <el-table-column prop="date" label="Date" width="180" />
|
|
|
- <el-table-column prop="name" label="Name" width="180" />
|
|
|
- <el-table-column prop="address" label="Address" />
|
|
|
+ <template
|
|
|
+ v-for="(item, i) in config.tableCol.list[
|
|
|
+ btns[condition.platform].text
|
|
|
+ ]"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ :width="item.width"
|
|
|
+ show-overflow-tooltip
|
|
|
+ :prop="item.key"
|
|
|
+ :label="item.label"
|
|
|
+ :sortable="item.sortable"
|
|
|
+ :sort-orders="
|
|
|
+ item.sortable ? ['ascending', 'descending', null] : []
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <template #default="scope">
|
|
|
+ {{
|
|
|
+ item.type == 'number'
|
|
|
+ ? formatter(scope.row[item.key])
|
|
|
+ : scope.row[item.key]
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
</el-table>
|
|
|
+ <el-pagination
|
|
|
+ @current-change="e => changePageManuscript(e)"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-count="
|
|
|
+ Math.ceil(manuscriptData.total / condition.manuscript.size) || 1
|
|
|
+ "
|
|
|
+ />
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
@@ -73,10 +143,25 @@
|
|
|
|
|
|
<script setup>
|
|
|
import { ref } from 'vue';
|
|
|
+import { getAccountList, getUpdateTime, getAccountData } from '@/api/index';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import config from '../../config/index';
|
|
|
+import { formatter } from '../../utils/tool';
|
|
|
+
|
|
|
const condition = ref({
|
|
|
platform: 0,
|
|
|
keyword: '',
|
|
|
dt: [],
|
|
|
+ sort: '',
|
|
|
+ order: '',
|
|
|
+ manuscript: {
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
+ },
|
|
|
+ disseminate: {
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
+ },
|
|
|
});
|
|
|
const activeName = ref('T1');
|
|
|
const btns = [
|
|
|
@@ -122,41 +207,183 @@ const btns = [
|
|
|
},
|
|
|
];
|
|
|
|
|
|
-const tableData = ref([
|
|
|
- {
|
|
|
- date: '2016-05-03',
|
|
|
- name: 'Tom',
|
|
|
- address: 'No. 189, Grove St, Los Angeles',
|
|
|
- },
|
|
|
- {
|
|
|
- date: '2016-05-02',
|
|
|
- name: 'Tom',
|
|
|
- address: 'No. 189, Grove St, Los Angeles',
|
|
|
- },
|
|
|
- {
|
|
|
- date: '2016-05-04',
|
|
|
- name: 'Tom',
|
|
|
- address: 'No. 189, Grove St, Los Angeles',
|
|
|
- },
|
|
|
- {
|
|
|
- date: '2016-05-01',
|
|
|
- name: 'Tom',
|
|
|
- address: 'No. 189, Grove St, Los Angeles',
|
|
|
- },
|
|
|
-]);
|
|
|
+const manuscriptData = ref({ list: [], total: 0 });
|
|
|
+const disseminateData = ref({ list: [], total: 0 });
|
|
|
+
|
|
|
+let defaultTime = [];
|
|
|
|
|
|
const selectPlatform = (item, index) => {
|
|
|
condition.value.platform = index;
|
|
|
+ for (let i = 0; i < defaultTime.length; i++) {
|
|
|
+ const v = defaultTime[i];
|
|
|
+ if (v.platform === item.text) {
|
|
|
+ condition.value.dt = [v.dt, v.dt];
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 页码和条数重置
|
|
|
+ condition.value.sort = undefined;
|
|
|
+ condition.value.order = undefined;
|
|
|
+ condition.value.manuscript.page = 1;
|
|
|
+ condition.value.manuscript.size = 10;
|
|
|
+ condition.value.manuscript.total = 0;
|
|
|
+ condition.value.disseminate.page = 1;
|
|
|
+ condition.value.disseminate.size = 10;
|
|
|
+ condition.value.disseminate.total = 0;
|
|
|
+ getData();
|
|
|
};
|
|
|
const onSubmit = () => {
|
|
|
- console.log(condition.value);
|
|
|
+ getData();
|
|
|
};
|
|
|
|
|
|
-const binding = () =>{
|
|
|
- window.open('#/authorization','newwindow','toolbar=no,location=no,resizable=no,height=550,width=750,scrollbars=yes,left=380,top=100');
|
|
|
-}
|
|
|
+const sort_change = (e, type) => {
|
|
|
+ if (e.order) {
|
|
|
+ condition.value.sort = e.prop;
|
|
|
+ condition.value.order = e.order == 'descending' ? 1 : 0;
|
|
|
+ } else {
|
|
|
+ condition.value.sort = undefined;
|
|
|
+ condition.value.order = undefined;
|
|
|
+ }
|
|
|
+
|
|
|
+ if(type == 'manuscript') changePageManuscript();
|
|
|
+ else if(type == 'disseminate') changePageDisseminate();
|
|
|
+};
|
|
|
+
|
|
|
+const onExport = () => {
|
|
|
+ if (!condition.value.dt || condition.value.dt.length != 2) return;
|
|
|
+ let start = undefined;
|
|
|
+ let end = undefined;
|
|
|
+ if (condition.value.dt[0])
|
|
|
+ start = dayjs(condition.value.dt[0]).format('YYYY-MM-DD');
|
|
|
+ if (condition.value.dt[1])
|
|
|
+ end = dayjs(condition.value.dt[1]).format('YYYY-MM-DD');
|
|
|
+ let url =
|
|
|
+ config.base.origin + '/new-media/export?start=' + start + '&end=' + end;
|
|
|
+ if (this.formRael.sort) url += '&sort=' + this.formRael.sort;
|
|
|
+ window.open(url);
|
|
|
+};
|
|
|
+
|
|
|
+const binding = () => {
|
|
|
+ window.open(
|
|
|
+ '#/authorization',
|
|
|
+ 'newwindow',
|
|
|
+ 'toolbar=no,location=no,resizable=no,height=550,width=750,scrollbars=yes,left=380,top=100'
|
|
|
+ );
|
|
|
+};
|
|
|
|
|
|
const handleClick = () => {};
|
|
|
+
|
|
|
+const getData = () => {
|
|
|
+ let start = undefined;
|
|
|
+ let end = undefined;
|
|
|
+ if (condition.value.dt[0])
|
|
|
+ start = dayjs(condition.value.dt[0]).format('YYYY-MM-DD');
|
|
|
+ if (condition.value.dt[1])
|
|
|
+ end = dayjs(condition.value.dt[1]).format('YYYY-MM-DD');
|
|
|
+ getAccountList({
|
|
|
+ data: {
|
|
|
+ platform: btns[condition.value.platform].text,
|
|
|
+ start,
|
|
|
+ end,
|
|
|
+ page: condition.value.manuscript.page,
|
|
|
+ size: condition.value.manuscript.size,
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ manuscriptData.value.list = (res || []).map((v, i) => {
|
|
|
+ return {
|
|
|
+ ...v,
|
|
|
+ index: i + 1,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ manuscriptData.value.total = 1000;
|
|
|
+ });
|
|
|
+
|
|
|
+ getAccountData({
|
|
|
+ data: {
|
|
|
+ platform: btns[condition.value.platform].text,
|
|
|
+ start,
|
|
|
+ end,
|
|
|
+ page: condition.value.disseminate.page,
|
|
|
+ size: condition.value.disseminate.size,
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ disseminateData.value.list = (res || []).map((v, i) => {
|
|
|
+ return {
|
|
|
+ ...v,
|
|
|
+ index: i + 1,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ disseminateData.value.total = 1000;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const changePageDisseminate = e => {
|
|
|
+ if(e) condition.value.disseminate.page = e;
|
|
|
+ let start = undefined;
|
|
|
+ let end = undefined;
|
|
|
+ if (condition.value.dt[0])
|
|
|
+ start = dayjs(condition.value.dt[0]).format('YYYY-MM-DD');
|
|
|
+ if (condition.value.dt[1])
|
|
|
+ end = dayjs(condition.value.dt[1]).format('YYYY-MM-DD');
|
|
|
+ getAccountData({
|
|
|
+ data: {
|
|
|
+ platform: btns[condition.value.platform].text,
|
|
|
+ start,
|
|
|
+ end,
|
|
|
+ page: condition.value.disseminate.page,
|
|
|
+ size: condition.value.disseminate.size,
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ disseminateData.value.list = (res || []).map((v, i) => {
|
|
|
+ return {
|
|
|
+ ...v,
|
|
|
+ index: i + 1,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ disseminateData.value.total = 1000;
|
|
|
+ });
|
|
|
+ // 切页
|
|
|
+};
|
|
|
+
|
|
|
+const changePageManuscript = e => {
|
|
|
+ if(e) condition.value.manuscript.page = e;
|
|
|
+ let start = undefined;
|
|
|
+ let end = undefined;
|
|
|
+ if (condition.value.dt[0])
|
|
|
+ start = dayjs(condition.value.dt[0]).format('YYYY-MM-DD');
|
|
|
+ if (condition.value.dt[1])
|
|
|
+ end = dayjs(condition.value.dt[1]).format('YYYY-MM-DD');
|
|
|
+ getAccountList({
|
|
|
+ data: {
|
|
|
+ platform: btns[condition.value.platform].text,
|
|
|
+ start,
|
|
|
+ end,
|
|
|
+ page: condition.value.manuscript.page,
|
|
|
+ size: condition.value.manuscript.size,
|
|
|
+ },
|
|
|
+ }).then(res => {
|
|
|
+ manuscriptData.value.list = (res || []).map((v, i) => {
|
|
|
+ return {
|
|
|
+ ...v,
|
|
|
+ index: i + 1,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ manuscriptData.value.total = 1000;
|
|
|
+ });
|
|
|
+ // 切页
|
|
|
+};
|
|
|
+
|
|
|
+getUpdateTime({ data: {} }).then(res => {
|
|
|
+ defaultTime = res || [];
|
|
|
+ for (let i = 0; i < btns.length; i++) {
|
|
|
+ const v = btns[i];
|
|
|
+ if (v.text === defaultTime[0].platform) {
|
|
|
+ condition.value.dt = [defaultTime[0].dt, defaultTime[0].dt];
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ getData();
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
liyongli