期刊

src/components/page/PaperSubmitanalysis.vue

@@ -1,12 +1,14 @@
 <template>
-    <div class="container" style="padding-bottom: 50px; width: 100%; height: 100%" v-loading="loading" >
+    <div class="container" style="padding-bottom: 50px; width: 100%; height: 100%" v-loading="loading">
-        <div style="width: 100%; height: 38vh; margin-bottom: 2vh; position: relative">
+        <div style="display: flex; align-items: center; justify-content: space-between; width: 100%; height: 34vh; margin-bottom: 40px">
-            <i class="el-icon-refresh refresh" @click="getCharts('year')"></i>
+            <div style="width: 48%; height: 100%; margin-bottom: 2vh; position: relative">
-            <div id="yearchart" style="width: 100%; height: 100%"></div>
+                <i class="el-icon-refresh refresh" @click="getCharts('year')"></i>
-        </div>
+                <div id="yearchart" style="width: 100%; height: 100%"></div>
-        <div style="width: 100%; height: 44vh; position: relative; margin-bottom: 80px">
+            </div>
-            <i class="el-icon-refresh refresh" @click="getCharts('month')"></i>
+            <div style="width: 48%; height: 100%; position: relative">
-            <div id="monthchart" style="width: 100%; height: 100%"></div>
+                <i class="el-icon-refresh refresh" @click="getCharts('month')"></i>
+                <div id="monthchart" style="width: 100%; height: 100%"></div>
+            </div>
         </div>
 
         <div
@@ -55,7 +57,18 @@ const jAtableM = () => import('@/components/common/journalArticleTable');
 export default {
     data() {
         return {
-            loading: false
+            loading: false,
+            yearData: {},
+            monthData: {},
+            JournalYearData: [],
+            JournalMonthData: [],
+            user_id: localStorage.getItem('U_id'),
+            urlList: {
+                year: 'api/Monitor/getArticleNumByYearForEditor',
+                month: 'api/Monitor/getArticleNumByMonthForEditor',
+                Journalyear: 'api/Monitor/getArticleNumByYearAndJournalForEditor',
+                Journalmonth: 'api/Monitor/getArticleNumByMonthAndJournalForEditor'
+            }
         };
     },
     components: {
@@ -70,12 +83,16 @@ export default {
         //     spinner: 'el-icon-loading',
         //     background: 'rgba(0, 0, 0, 0.7)'
         // });
+        await this.getData('year');
+        await this.getData('month');
+        await this.getJournalData('year');
+        await this.getJournalData('month');
         await this.getCharts('year');
         await this.getCharts('month');
         await this.getTableData();
-
         this.$forceUpdate();
     },
+    async mounted() {},
     methods: {
         handleRefresh() {},
         async getEchartsData() {
@@ -85,7 +102,6 @@ export default {
         },
         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 = {};
@@ -93,15 +109,69 @@ export default {
                 title: {
                     text: this.$t(`journalArticleCount.${type}Title`)
                 },
+                // tooltip: {
+                //     trigger: 'axis',
+                //     axisPointer: {
+                //         type: 'cross',
+                //         label: {
+                //             backgroundColor: '#6a7985'
+                //         }
+                //     }
+                // },
+
                 tooltip: {
                     trigger: 'axis',
-                    axisPointer: {
+                    // formatter函数动态修改tooltip样式
-                        type: 'cross',
+                    formatter: function (params) {
-                        label: {
+                        var that = this;
-                            backgroundColor: '#6a7985'
+                        console.log('params at line 430:', params);
+                        if (params) {
+                            var htmlStr = '';
+                            // htmlStr += params[0].name.replace(/\-/g, '/') + '<br/>'; //x轴的名称
+
+                            if (params[0].axisIndex == 0) {
+                                htmlStr += '<div>';
+                                htmlStr += `${params[0].name} `;
+                                //圆点后面显示的文本
+                                for (var i = 0; i < params.length; i++) {
+                                    var param = params[i]; // 存一份item项
+                                    console.log('param at line 404:', param);
+
+                                    var value = param.value; //y轴值
+                                    var color = param.color; //图例颜色
+                                    var journalStr = ``;
+                                    param.data.otherInfo.forEach((e) => {
+                                        journalStr +=
+                                            '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' +
+                                            color +
+                                            ';"></span>' +
+                                            `<span>${e.key} : ${e.value}</span><br/>`;
+                                    });
+
+                                    htmlStr += `${param.seriesName}: ${value}`; //2023年
+
+                                    htmlStr += `<p style='border-bottom:1px solid #b0b0b0;margin:5px 0;'></p>`;
+                                    htmlStr += journalStr;
+                                    htmlStr += '</div>';
+                                }
+                            }
+
+                            return htmlStr;
+                        } else {
+                            return;
                         }
+                    },
+                    backgroundColor: '#fff',
+                    borderWidth: 1,
+                    borderColor: '#ccc',
+                    padding: 10,
+                    textStyle: {
+                        color: '#000',
+                        fontSize: 12,
+                        align: 'left'
                     }
                 },
+
                 //   legend: {
                 //     data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                 //   },
@@ -113,6 +183,18 @@ export default {
                     //   restore: {},
                     // }
                 },
+                label: {
+                    formatter: '',
+
+                    rich: {
+                        b: {
+                            color: '#4C5058',
+                            fontSize: 12,
+                            fontWeight: 'bold',
+                            lineHeight: 10
+                        }
+                    }
+                },
                 dataZoom:
                     type == 'month'
                         ? [
@@ -192,37 +274,102 @@ export default {
             });
             this.$forceUpdate();
         },
-
+        async getData(type) {
-        // 获取文章列表数据
-        async getdata(type) {
-            var data = {};
             var url = '';
             if (type == 'month') {
-                url = '/api/Monitor/getArticleNumByMonth';
+                url = this.urlList.month;
             } else if (type == 'year') {
-                url = '/api/Monitor/getArticleNumByYear';
+                url = this.urlList.year;
             }
             await this.$api
-                .post(url)
+                .post(url, {
+                    user_id: this.user_id
+                })
                 .then((res) => {
                     var that = this;
                     if (res.code == 0) {
-                        console.log('🚀 ~ .then ~ res1998:' + type, res.data.articles);
+                        if (type == 'month') {
-                        var xAxisData = [];
+                            this.monthData = res.data.articles;
-                        var seriesData = [];
+                        } else if (type == 'year') {
-                        Object.entries(res.data.articles).forEach(([key, value]) => {
+                            this.yearData = res.data.articles;
-                            xAxisData.push(key);
+                        }
-                            seriesData.push(value);
-
-                            data = { type: type, xAxisData: xAxisData, seriesData: seriesData };
-                        });
                     }
                 })
                 .catch((err) => {
                     console.log(err);
                 });
+        },
+        // 获取文章列表数据
+        async getdata(type) {
+            var data = {};
+            var optionJournalData = [];
+            var optionData = [];
+            console.log('...this.JournalMonthData at line 308:', this.JournalMonthData);
+            if (type == 'month') {
+                optionJournalData = [...this.JournalMonthData];
+
+                optionData = this.monthData;
+            } else if (type == 'year') {
+                optionJournalData = [...this.JournalYearData];
+                optionData = this.yearData;
+            }
+
+            var xAxisData = [];
+            var seriesData = [];
+
+            console.log('optionJournalData at line 291:', optionData);
+            Object.entries(optionData).forEach(([key, value]) => {
+                xAxisData.push(key);
+                console.log('key at line 294:', key);
+                var otherInfo = optionJournalData.map((e) => {
+                    for (let i in e.value) {
+                        if (i == key) {
+                            console.log('e at line 299:', e.value[i]);
+                            return {
+                                key: e.key,
+                                value: e.value[i].split('/')[0]
+                            };
+                        }
+                    }
+                });
+
+                seriesData.push({ value: value, otherInfo: otherInfo });
+
+                data = { type: type, xAxisData: xAxisData, seriesData: seriesData };
+            });
+
             return data;
         },
+        async getJournalData(type) {
+            var data = {};
+            var url = '';
+            if (type == 'month') {
+                url = this.urlList.Journalmonth;
+            } else if (type == 'year') {
+                url = this.urlList.Journalyear;
+            }
+
+            await this.$api
+                .post(url, {
+                    user_id: this.user_id
+                })
+                .then((res) => {
+                    var that = this;
+                    if (res.code == 0) {
+                        data = res.data.data.map((e) => {
+                            return { key: e.journal.abbr, value: e.articles, jabbr: e.journal.jabbr };
+                        });
+                        if (type == 'month') {
+                            this.JournalMonthData = data;
+                        } else if (type == 'year') {
+                            this.JournalYearData = data;
+                        }
+                    }
+                })
+                .catch((err) => {
+                    console.log(err);
+                });
+        },
         // 获取文章列表数据
         async getTableData() {
             this.$nextTick(async () => {
@@ -235,32 +382,29 @@ export default {
             var data = {};
             var timeData = [];
             var tableData = [];
+
             var url = '';
             if (type == 'month') {
-                url = '/api/Monitor/getArticleNumByMonthForJournal';
+                for (let i in this.monthData) {
-            } else if (type == 'year') {
+                    console.log('i at line 386:', i);
-                url = '/api/Monitor/getArticleNumByYearForJournal';
+                    timeData.push(i);
-            }
+                }
-            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) {
+                tableData = this.JournalMonthData.map((e) => {
-                            timeData.push(i);
+                    console.log('e at line 394:', e);
-                        }
+                    return { ...e.value, abbr: e.key, jabbr: e.jabbr };
-
-                        data = { tableData: tableData, timeData: timeData };
-                    }
-                })
-                .catch((err) => {
-                    console.log(err, '989898');
-                    this.loading = false;
                 });
+            } else if (type == 'year') {
+                for (let i in this.yearData) {
+                    console.log('i at line 386:', i);
+                    timeData.push(i);
+                }
+                tableData = this.JournalYearData.map((e) => {
+                    console.log('e at line 394:', e);
+                    return { ...e.value, abbr: e.key, jabbr: e.jabbr };
+                });
+            }
+            data = { tableData: tableData, timeData };
             console.log(data, type, '98999');
             if (type == 'year') {
                 this.$refs.yearTableData.getTableInfo(type, data);

vue.config.js

@@ -72,9 +72,9 @@ module.exports = {
 				// target: 'https://www.tmrjournals.cn',
 				// target: 'http://www.tougao.com/public/index.php/',
 				// target: 'http://www.tougao.com/',
-				// target: 'http://192.168.110.110/tougao/public/index.php/',
+				target: 'http://192.168.110.110/tougao/public/index.php/',
 				// target: 'http://api.tmrjournals.com/public/index.php/',//正式
-				target: 'https://submission.tmrjournals.com/',//正式
+				// target: 'https://submission.tmrjournals.com/',//正式
 				changeOrigin: true,
 				pathRewrite: {
 					'^/api': ''