gengx

src/components/Monthly/Monthly.vue

@@ -109,7 +109,7 @@
                                     <span style="font-size:18px;font-weight:540;color: #676767">欢迎推荐和自荐项目！</span>
                                     <br/><br/>
                                 </div>
-                                <el-button type="info" @click="getProjectNum()" style="margin-top:37px">推荐项目</el-button>
+                                <el-button type="info" @click="backtoHome()" style="margin-top:37px">查看项目</el-button>
                                 <br/><br/>
                             </el-card>
                         </el-col>
@@ -121,6 +121,8 @@
         </div>
         <RightTools></RightTools>
 
+
+
     </div>
 
 </template>
@@ -128,11 +130,15 @@
 <script>
 import axios from 'axios'
 import RightTools from "@/components/Home/RightTools.vue";
+import Vue from "vue";
 export default {
     name: "MonthlyComponent",
     components: {RightTools},
     data(){
         return{
+            // 月刊标号海报：
+            MonPage:'3',
+            currentImg:'',
             // 项目总数
             ProjectNum:0,
             //期刊总数：
@@ -147,14 +153,25 @@ export default {
     },
     // 初始化渲染页面
     mounted(){
+        // 绘制最新月刊
+        this.addTextEvent();
+        // // 填充画布：
+        this.$nextTick(() => {
+            this.drawPage();
+        });
         this.getMonely();
         this.getProjectNum();
         this.getLabel();
     },
     methods: {
-        test(){
+        drawPage(){
+            var that = this;
+            var fac = document.getElementsByClassName("3");
+            fac.style.backgroundImage = that.currentImg;
+        },
+        test(index){
           var that = this;
-          console.log(that.selectlabelItem);
+          console.log(index);
         },
         goBack() {
             window.history.go(-1);
@@ -238,7 +255,45 @@ export default {
                     duration:700,
                 });
             }
-
+        },
+        openPublishProjects(){
+            if(this.$cookie.get('username')){
+                this.openPublishProject=true;
+            }else{
+                Vue.prototype.$notify.error({
+                    title: '错误',
+                    message: "请先登录!",
+                    offset: 50
+                });
+            }
+        },
+        backtoHome(){
+            let pathInfo = this.$router.resolve({
+                path: '/Home',
+                query:{
+                }
+            })
+            window.open(pathInfo.href, '_self');
+        },
+        addTextEvent() {
+            var _this = this
+            let canvas = document.createElement("canvas");
+            canvas.width = 600;
+            canvas.height = 400;
+            let myImage = new Image();
+            myImage.src = "../../assets/images/最新月刊.png";  // 需要添加文字的图片
+            myImage.crossOrigin = "Anonymous";
+            let context = canvas.getContext("2d");
+            myImage.onload = function () {
+                context.drawImage(myImage, 0, 0, canvas.width, canvas.height);
+                context.font = "20px Courier New";
+                context.fillStyle = 'red'
+                // context.textAlign = 'end' //文字右对齐
+                context.fillText("我是写入的文字", 250, 350);  // 文字的内容和位置
+                let base64 = canvas.toDataURL("image/png"); // "image/png" 这里注意一下
+                console.log(_this.currentImg);
+                _this.currentImg = base64
+            }
         }
     }
 }
@@ -260,17 +315,25 @@ export default {
 }
 
 .el-carousel__item{
+    //width:480px;
+}
+
+.el-carousel__item:nth-child(3n) {
+    background-size: cover;
+    width:500px;
+    background-image: url("../../assets/images/Post2.png");
+}
+
+.el-carousel__item:nth-child(3n+1) {
+    background-size: cover;
     width:450px;
-}
-
-.el-carousel__item:nth-child(2n) {
-    background-size: cover;
     background-image: url("../../assets/svg/WebsiteBanner.svg");
 }
 
-.el-carousel__item:nth-child(2n+1) {
+.el-carousel__item:nth-child(3n+2) {
     background-size: cover;
-    background-image: url("../../assets/svg/WebsiteBanner.svg");
+    width:450px;
+    background-image: url("../../assets/images/最新月刊.png");
 }
 .card_style{
     height:390px;

src/components/Monthly/MonthlyDetail.vue

@@ -271,7 +271,6 @@ export default {
                 that.MonType=[];
                 that.MonTypePro=[];
                 Object.keys(that.MonList).forEach(key=>{
-                    that.MonType.push(key);
                     that.MonTypePro.push(that.MonList[key]);
                 })
                 console.log(that.MonList);

src/components/System/AdminHome.vue

@@ -26,7 +26,7 @@
             </div>
             <div style="margin-top: 20px">
                 <el-card class="box-card" style="border: none">
-                    <div id="Echart_1">
+                    <div ref="echart1" style="width:300px;height:300px">
 
                     </div>
                 </el-card>
@@ -155,12 +155,18 @@
                 </el-card>
             </div>
 <!--            eChart 图-->
-            <div style="margin-top: 23px;margin-left: 40px">
+            <div style="margin-top: 23px;margin-left: 40px;">
-                <el-card style="border: none">
+                <el-card style="border: none;height:450px">
-                    <div id="echart_2" style="width: 20vw;height: 30vh">
+                    <el-tabs v-model="activeName" @tab-click="handleClick">
+                        <el-tab-pane label="日期统计" name="first">日期统计</el-tab-pane>
+                        <el-tab-pane label="月度统计" name="second">月度统计</el-tab-pane>
+                        <el-tab-pane label="年度统计" name="third">年度统计</el-tab-pane>
+                    </el-tabs>
+                    <div ref="echart2" style="width: 20vw;height: 30vh">
 
                     </div>
                 </el-card>
+                <el-button @click="test()"></el-button>
             </div>
         </div>
     </div>
@@ -177,6 +183,10 @@ Vue.prototype.$echarts = echarts;
 export default {
     data() {
         return {
+            Myechart1:'',
+            Myechart2:'',
+            Myoption1:{},
+            Myoption2:{},
             userTotal:null,
             projectTotal:null,
             loginTime:'',
@@ -184,6 +194,18 @@ export default {
             CategoryTotal:'',
             CommentTotal:'',
             AdminTotal:'',
+            // 日期目录：
+            datecate:[],
+            // 月份目录:
+            Moncate:[],
+            // 年份目录：
+            Yearcate:[],
+            // 日期折线单元：
+            dateLine:[],
+            // 月份折线单元：
+            monLine:[],
+            // 年份折线单元：
+            yearLine:[],
             date:[],
             Month:[],
             Year:[],
@@ -191,6 +213,14 @@ export default {
         }
     },
     methods: {
+        initEchart(){
+            // var that = this;
+            // that.Myechart1 = that.$echarts.init(that.$refs.echart1);
+            // that.Myechart2 = that.$echarts.init(that.$refs.echart2);
+        },
+        test(){
+            this.getProjectByTime();
+        },
         getAdminLoginTime(){
             var that=this;
             axios({
@@ -229,6 +259,7 @@ export default {
                 }
             }).then((res)=>{
                 that.projectTotal=res.data;
+                console.log(that.projectTotal);
             });
         },
         getArticleTotal(){
@@ -297,200 +328,101 @@ export default {
                 that.date=res.data.Date;
                 that.Month=res.data.Month;
                 that.Year=res.data.Year;
-                console.log(that.date)
+                Object.keys(that.date).forEach(key=>{
+                    that.datecate.push(that.date[key]['date']);
+                    let num = parseInt(that.date[key]['num']);
+                    let datefac = {"value":num,"date":that.date[key]['date'],"type":"line"};
+                    console.log(datefac);
+                    that.dateLine.push(datefac);
+                })
+                console.log(that.dateLine);
+                console.log(that.datecate);
             });
         },
         eChartPic1(){
-            var myChart =this.$echarts.init(document.getElementById('echart_2'));
+            // 按日期折线图：
-            const cols = ['#3BDBDB', '#6CEBEB', '#C2FFFF', '#FFFFFF']
+            var that = this;
-            var data = this.date;
+            that.Myoption1 = {
-            var data2 = this.Month;
+                //dataZoom-inside 内置型数据区域缩放组件 所谓内置 1平移：在坐标系中滑动拖拽进行数据区域平移。2缩放：PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同;移动端：在移动端触屏上，支持两指滑动缩放。
-            var data3 = this.Year;
+                dataZoom: [{
-            var xData = [],
+                    type: 'inside', //1平移 缩放
-                yData = [], xData2 = [],
+                    throttle: '50', //设置触发视图刷新的频率。单位为毫秒（ms）。
-                yData2 = [], xData3 = [],
+                    minValueSpan: 6, //用于限制窗口大小的最小值,在类目轴上可以设置为 5 表示 5 个类目
-                yData3 = [];
+                    start: 1, //数据窗口范围的起始百分比 范围是：0 ~ 100。表示 0% ~ 100%。
-            data.map(function (a) {
+                    end: 50, //数据窗口范围的结束百分比。范围是：0 ~ 100。
-                xData.push(a.date);
+                    zoomLock: true, //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
-                yData.push(a.num);
+                }],
-            });
+                // 主要用来控制图表四周留白
-            data2.map(function (a) {
-                xData2.push(a.date);
-                yData2.push(a.num);
-            });
-            data3.map(function (a) {
-                xData3.push(a.date);
-                yData3.push(a.num);
-            });
-
-            let unit = '个'
-            var option = {
-                // backgroundColor: '#FFF',
-                animation: false,
                 grid: {
-                    top: '4%',
+                    left: '15%',
-                    left: '2%',
+                    top: '10%',
-                    right: '2%',
-                    bottom: '2%',
-                    containLabel: true,
                 },
+                // 提示框组件
                 tooltip: {
-                    trigger: 'axis',
+                    trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
-                    backgroundColor: '#FFF',
+                    backgroundColor: '#377CFF', //提示框浮层的背景颜色。
-                    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3)',
+                    axisPointer: { //去掉移动的指示线
-                    axisPointer: {
+                        type: 'none'
-                        type: 'shadow'
+                    },
+                    // 自定义提示框内容
+                    formatter: function (params) {
+                        var text = params[0].data.date + ': ' + params[0].data.value
+                        return text;
                     }
                 },
-
+                //直角坐标系 grid 中的 x 轴，
-                xAxis: [{
+                xAxis: {
-                    type: 'category',
+                    type: 'category', //'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
-                    axisLabel: {
+                    // 坐标轴轴线相关设置
-                        show: true,
-                    },
                     axisLine: {
-                        show: false,
                         lineStyle: {
-                            color: '#8c8c8c',
+                            color: '#E5E5E5', // 坐标轴线线的颜色。
                         }
                     },
+                    // 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
+                    axisLabel: {
+                        //  是否显示坐标刻度标签(这了指是否显示x轴上的月份)
+                        show: true,
+                        // 标签文字的颜色
+                        color: '#999'
+                    },
+                    //x轴刻度线设置
                     axisTick: {
-                        show: false,
+                        "show": false
-                        alignWithLabel: true,
                     },
-                    splitLine: {
+                    // 类目数据，在类目轴（type: 'category'）中有效。
-                        show: false,
+                    data: that.datecate,
-                    },
-                    data: xData,
                 },
-                ],
+                //直角坐标系 grid 中的 y 轴，
-                yAxis: [{
+                yAxis: {
-                    name: '数量(' + unit + ')',
+                    type: 'value', //'value' 数值轴，适用于连续数据。
-                    type: 'value',
+                    // 坐标轴轴线相关设置
-                    // max: this.setCeil(this.tz_filetransfer_dTotal),
+                    axisLine: {
-                    // interval: this.setCeil(this.tz_filetransfer_dTotal)/10,//间隔
+                        show: false //y轴线消失
-                    // min: 0,
+                    },
+                    // 坐标轴刻度标签(类目,简单说就是x轴上的内容)的相关设置
                     axisLabel: {
                         show: true,
-                        color: 'rgba(255, 255, 255,.8)',
+                        // 标签文字的颜色
-                    },
+                        color: '#999'
-                    axisLine: {
-                        show: false,
-                        lineStyle: {
-                            color: '#8c8c8c',
-                        }
                     },
+                    //y轴刻度线设置
                     axisTick: {
-                        show: false,
+                        "show": false
-                        alignWithLabel: true,
-                    },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#888888',
-                        },
                     },
+                    splitNumber: 5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整.在类目轴中无效。
                 },
-                ],
+                series: that.dateLine,
-                dataZoom: [
+            };
-                    {
+            that.Myechart1.setOption(that.Myoption1,true);
-                        type: 'inside', //无滑动条内置缩放   type: 'slider', //缩放滑动条
+            // 图表大小变动从新渲染，动态自适应
-                        show: true, //开启
+        },
-                        // yAxisIndex: [0], //Y轴滑动
+        eChartPic2(){
-                        //  xAxisIndex: [0],//X轴滑动
-                        start: 1, //初始化时，滑动条宽度开始标度
-                        end: 10, //初始化时，滑动条宽度结束标度
-                    },
-                ],
-                series: [{
-                    name: '数量',
-                    type: 'line',
-                    symbolSize: 1,
-                    symbol: 'circle',
-                    smooth: true,
-                    yAxisIndex: 0,
-                    showSymbol: false,
-                    lineStyle: {
-                        width: 3,
-                        color: cols[1],
-                    },
-                    itemStyle: {
-                            color: cols[1],
-                            areaStyle: {
-                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                                    offset: 0.4,
-                                    color: 'rgba(194, 255, 255,0.1)',
-                                },
-                                    {
-                                        offset: 1,
-                                        color: 'rgba(108, 235, 235,0.9)',
-                                    },
-                                ]),
-                            },
 
-                    },
-                    data: yData,
-                },
-                ],
-            }
-            myChart.setOption(option);
-            //图表大小变动从新渲染，动态自适应
-            window.addEventListener("resize", function () {
-                myChart.resize();
-            });
-            myChart.resize({
-              width: 647,
-              height: 147
-            });
-            let lastdiff = 0
-            myChart.on('dataZoom', function (params) {
-                let start = params.batch[0].start
-                let end = params.batch[0].end
-                let diff = end - start
-                // mircodiff > 1，说明是放大而不是拖拽
-                let mircodiff = Math.abs(diff - lastdiff)
-                if (diff < 30 && mircodiff > 1) {
-                    // 放大之后的操作
-                    let option = myChart.getOption()
-
-                    // option.xAxis[0].axisLabel.rotate = 0 // 当缩放程度小于40的时候让字体倾斜为0
-
-                    option.xAxis[0].data = xData;
-
-                    option.series[0].data = yData;
-
-                    myChart.clear()
-                    myChart.setOption(option, true)
-
-                } else if (diff > 50 && mircodiff > 1) {
-                    // 放大之后的操作
-                    let option = myChart.getOption()
-
-                    // option.xAxis[0].axisLabel.rotate = 0 // 当缩放程度小于40的时候让字体倾斜为0
-
-                    option.xAxis[0].data = xData2;
-
-                    option.series[0].data = yData2;
-
-                    myChart.clear()
-                    myChart.setOption(option, true)
-                }
-                if (diff >= 80 && mircodiff > 1) {
-                    // 缩小回去的操作
-                    let option = myChart.getOption()
-                    // option.xAxis[0].axisLabel.rotate = 50  // 当缩放程度大于40的时候让字体开始倾斜
-
-                    option.xAxis[0].data = xData3;
-
-                    option.series[0].data = yData3;
-
-                    myChart.clear()
-                    myChart.setOption(option, true)
-                }
-                lastdiff = diff;
-            });
         }
     },
+    //  初始化Echart
+
     mounted() {
         this.getUserTotal();
         this.getProjectTotal();
@@ -500,8 +432,9 @@ export default {
         this.getAdminTotal();
         this.getCategoryTotal();
         this.getProjectByTime();
+        this.Myechart1 = this.$echarts.init(this.$refs.echart1);
+        this.Myechart2 = this.$echarts.init(this.$refs.echart2);
         this.eChartPic1();
-
     }
 }
 </script>