zm/tougao_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改期刊计数总量

Browse Source
This commit is contained in:
始于初见
2024-03-14 15:28:23 +08:00
parent e0ad4c4c96
commit ed2874252a
9 changed files with 1977 additions and 1926 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2258
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -32,6 +32,7 @@
"devDependencies": {
"@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-service": "^3.9.0",
"sass-loader": "^7.3.1",
"vue-template-compiler": "^2.6.10"
}
}

4
src/api/index.js
View File

@@ -16,8 +16,8 @@ axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded
//
const service = axios.create({
// baseURL: 'http://testtougao.tmrjournals.com/public/index.php/',
baseURL: 'http://www.tougao.com/',
// baseURL: '/',
// baseURL: 'http://www.tougao.com/', //测试本地 记得切换
baseURL: '/', //正式
});
const service_new = axios.create({

1180
src/components/common/Sidebar.vue
View File

File diff suppressed because it is too large Load Diff

156
src/components/common/journalArticleTable.vue Normal file
View File

@@ -0,0 +1,156 @@
<template>
<!-- 关于表格的操作 -->
<div v-if="tableData.length > 0">
<!-- 行的合并 列的合并 表头添加斜线 -->
<el-table :data="tableData" style="width: 100%" :header-cell-style="{ height: '22px !important' }" class="tableBox">
<el-table-column :label="this.$t(`journalArticleTable.time`)" align="right" width="130" fixed>
<el-table-column prop="name" :label="this.$t(`journalArticleTable.title`)" width="120">
<template slot-scope="scope">
<el-tooltip class="item" effect="dark" :content="scope.row.jabbr" placement="top-start">
<div>
{{ scope.row.abbr }}
</div>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="fenopda" v-for="(v, i) in timeData" :label="v" align="center" :prop="v" min-width="70"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableInfo: {},
timeData: [],
tableData: []
};
},
created() {
// 调用计算需要合并的行
this.getSpanArr(this.content);
},
methods: {
getTableInfo(type, data) {
this.tableData = data.tableData;
this.timeData = data.timeData;
},
getSpanArr(data) {
this.spanObj.oneArray = [];
let concatOne = 0;
data.forEach((item, index) => {
if (index === 0) {
this.spanObj.oneArray.push(1);
} else {
// 判断依据
// 前一个的code和后一个的code相同，则进行 行的合并
if (item.code === data[index - 1].code) {
this.spanObj.oneArray[concatOne] += 1;
this.spanObj.oneArray.push(0);
} else {
this.spanObj.oneArray.push(1);
concatOne = index;
}
}
});
},
// 注意：横向合并列 纵向合并行
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (row.code === 'wlgzcd' || row.code === 'nlgzcd') {
return {
rowspan: 1,
colspan: 6
};
} else {
const _row = this.spanObj.oneArray[rowIndex];
const _col = _row ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
}
// 要将其余的列给清除，否则其还会占用空间
if (
(row.code === 'wlgzcd' || row.code === 'nlgzcd') &&
(columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5)
) {
// 1和2列被合并,不清除的话,则后面的单元格都会错位
return {
rowspan: 0,
colspan: 0
};
}
},
// 第二行表头的隐藏
headMerge({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 2) {
return {
display: 'none'
};
}
}
}
};
</script>
<style scoped>
::v-deep .el-table thead.is-group th {
/* background: none !important; */
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
border-bottom: none !important;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
content: '' !important;
position: absolute !important;
width: 1px !important;
height: 85px !important; /*这里需要自己调整，根据td的宽度和高度*/
top: 0 !important;
left: 0 !important;
background-color: #fff !important;
opacity: 0.8 !important;
display: block !important;
transform: rotate(-56deg) !important; /*这里需要自己调整，根据线的位置*/
transform-origin: top !important;
}
::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
content: '' !important;
position: absolute !important;
width: 1px !important;
height: 105px !important; /*这里需要自己调整，根据td的宽度和高度*/
bottom: 0 !important;
right: 0 !important;
background-color: #fff !important;
opacity: 0.8 !important;
display: block !important;
transform: rotate(-57deg) !important; /*这里需要自己调整，根据线的位置*/
transform-origin: bottom !important;
}
::v-deep .el-table tr:nth-child(2n) {
background: #dcf3ff !important;
}
::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar {
width: 10px; /*滚动条宽度*/
height: 10px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar-track {
/* box-shadow: 0px 1px 3px #071e4a inset; */
border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: #f0f0f0; /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
box-shadow: 0px 1px 3px #bababa inset; /*滚动条的内阴影*/
border-radius: 10px; /*滚动条的圆角*/
background-color: #bababa; /*滚动条的背景颜色*/
}
</style>

11
src/components/common/langs/en.js
View File

@@ -127,6 +127,7 @@ const en = {
editorialBoard2:'Young Scientist Management',
editorialBoard3:'Journal Management',
chiefInspector:'Chief Inspector',
journalArticleCount:'Journal Article Count',
managingDirector:'Managing Director'
},
home: {
@@ -150,6 +151,16 @@ const en = {
role2: 'Editorial board',
role3: 'Reviewer',
role4: 'Youth editorial board',
},
journalArticleCount:{
yearTitle:'Total annual submission volume',
monthTitle:'Monthly submission volume',
dataTitle:'Submission volume',
},
journalArticleTable:{
title:'journal',
time:'time',
}
}

23
src/components/common/langs/zh.js
View File

@@ -51,7 +51,7 @@ const zh = {
reviewerimporterror: '导入失败列表',
monitor: '总监',
monitor1: '稿件情况',
document:'稿件列表',
document: '稿件列表',
chief: '主编管理',
chief1: '主编列表',
chief2: '期刊列表',
@@ -121,12 +121,13 @@ const zh = {
mailbox3: '模板管理',
tools: '辅助工具',
ReArticles: '被拒稿件', // 被拒稿件
editorialBoard:'编委管理',
editorialBoard1:'编委列表',
editorialBoard2:'青年科学家列表',
editorialBoard3:'期刊列表',
chiefInspector:'总监',
managingDirector:'总经理'
editorialBoard: '编委管理',
editorialBoard1: '编委列表',
editorialBoard2: '青年科学家列表',
editorialBoard3: '期刊列表',
chiefInspector: '总监',
journalArticleCount: '期刊文章计数总结',
managingDirector: '总经理'
},
home: {
authortop: '用户指南',
@@ -149,6 +150,14 @@ const zh = {
role2: '编委',
role3: '审稿人',
role4: '青年编委',
}, journalArticleCount: {
yearTitle: '年度总投稿量',
monthTitle: '月度投稿量', dataTitle: '投稿量',
},
journalArticleTable:{
title:'期刊',
time:'时间',
}
}

262
src/components/page/journalArticleCount.vue Normal file
View File

@@ -0,0 +1,262 @@
<template>
<div class="container" style="padding-bottom: 50px; width: 100%; height: auto">
<div style="width: 100%; height: 38vh; margin-bottom: 2vh; position: relative">
<i class="el-icon-refresh refresh" @click="getCharts('year')"></i>
<div id="yearchart" style="width: 100%; height: 100%"></div>
</div>
<div style="width: 100%; height: 44vh; position: relative; margin-bottom: 80px">
<i class="el-icon-refresh refresh" @click="getCharts('month')"></i>
<div id="monthchart" style="width: 100%; height: 100%"></div>
</div>
<div style="width: 100%; height: auto; margin-bottom: 50px">
<jAtableY type="year" ref="yearTableData"></jAtableY>
</div>
<div style="width: 100%; height: auto; margin-bottom: 50px !important">
<jAtableM type="month" ref="monthTableData"></jAtableM>
</div>
</div>
</template>
<script>
const jAtableY = () => import('@/components/common/journalArticleTable');
const jAtableM = () => import('@/components/common/journalArticleTable');
export default {
data() {
return {
loading: null
};
},
components: {
jAtableY,
jAtableM
},
async created() {
this.loading = this.$loading({
lock: true,
text: 'Loading...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
await this.getCharts('year');
await this.getCharts('month');
await this.getTableData();
this.$forceUpdate();
},
methods: {
handleRefresh() {},
async getEchartsData() {
await this.getCharts('year');
await this.getCharts('month');
this.$forceUpdate();
},
async getCharts(type) {
var optionsData = await this.getdata(type);
console.log('🚀 ~ getCharts ~ optionsData:', optionsData);
const chartBox = await this.$echarts.init(document.getElementById(`${type}chart`));
var option = {};
option = {
title: {
text: this.$t(`journalArticleCount.${type}Title`)
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
// legend: {
// data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
// },
toolbox: {
// feature: {
// // dataZoom: {
// // yAxisIndex: 'none'
// // },
// restore: {},
// }
},
dataZoom:
type == 'month'
? [
{
show: true,
realtime: true,
start: 1,
end: 100,
xAxisIndex: [0, 1]
},
{
type: 'inside',
realtime: true,
start: 1,
end: 100,
xAxisIndex: [0, 1]
}
]
: [],
grid: {
left: '3%',
right: '4%',
bottom: type == 'month' ? '20%' : '4%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLabel: {},
// axisLabel:
// type == 'year'
// ? {}
// : {
// interval: 0,
// rotate: 30
// },
boundaryGap: false,
data: optionsData.xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: this.$t(`journalArticleCount.dataTitle`),
type: 'line',
stack: 'Total',
areaStyle: {
opacity: 0.8,
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: type == 'year' ? 'rgb(0, 221, 255)' : 'rgb(0, 102, 153)'
},
{
offset: 1,
color: type == 'month' ? 'rgb(77, 119, 255)' : 'rgb(1, 191, 236)'
}
])
},
smooth: true,
emphasis: {
focus: 'series'
},
data: optionsData.seriesData
}
]
};
chartBox.clear();
chartBox.setOption(option, true);
// 根据页面大小自动响应图表大小
window.addEventListener('resize', function () {
chartBox.resize();
});
this.$forceUpdate();
},
// 获取文章列表数据
async getdata(type) {
var data = {};
var url = '';
if (type == 'month') {
url = '/api/Monitor/getArticleNumByMonth';
} else if (type == 'year') {
url = '/api/Monitor/getArticleNumByYear';
}
await this.$api
.post(url)
.then((res) => {
var that = this;
if (res.code == 0) {
console.log('🚀 ~ .then ~ res1998:' + type, res.data.articles);
var xAxisData = [];
var seriesData = [];
Object.entries(res.data.articles).forEach(([key, value]) => {
xAxisData.push(key);
seriesData.push(value);
data = { type: type, xAxisData: xAxisData, seriesData: seriesData };
});
}
})
.catch((err) => {
console.log(err);
});
return data;
},
// 获取文章列表数据
async getTableData() {
this.$nextTick(async () => {
await this.getTableDataInfo('year');
await this.getTableDataInfo('month');
});
},
async getTableDataInfo(type) {
var that = this;
var data = {};
var timeData = [];
var tableData = [];
var url = '';
if (type == 'month') {
url = '/api/Monitor/getArticleNumByMonthForJournal';
} else if (type == 'year') {
url = '/api/Monitor/getArticleNumByYearForJournal';
}
await this.$api
.post(url)
.then(async (res) => {
var that = this;
if (res.code == 0) {
for (let i in res.data.data) {
tableData.push({ ...res.data.data[i].journal, ...res.data.data[i].articles });
}
for (let i in res.data.data[0].articles) {
timeData.push(i);
}
data = { tableData: tableData, timeData: timeData };
}
})
.catch((err) => {
console.log(err);
this.loading = false;
});
console.log(data, type, '98999');
if (type == 'year') {
this.$refs.yearTableData.getTableInfo(type, data);
} else if (type == 'month') {
this.$refs.monthTableData.getTableInfo(type, data);
setTimeout(() => {
that.loading.close();
}, 100);
}
return data;
}
}
};
</script>
<style scoped>
.container {
padding: 20px;
box-sizing: border-box;
width: 100%;
height: 100%;
position: relative;
}
.refresh {
position: absolute;
top: 20px;
right: 0px;
z-index: 10;
}
</style>

8
src/router/index.js
View File

@@ -982,6 +982,14 @@ export default new Router({
title: 'Journals Management'
}
},
{
name:'journal-Article-Count',
path: '/journalArticleCount', // 超管单期刊列表
component: () => import('../components/page/journalArticleCount'),
meta: {
title: 'Journal Article Count'
}
},
{
path: '/404',
component: () => import( /* webpackChunkName: "404" */