zky-admin/src/views/Index.vue

<template>
  <section  v-if="this.role_id==1" class="index-content">
    <div class="index_header">
      <div class="header-item">
        <div class="item-img">
          <img src="../assets/book.png" alt="" />
          <span class="text">
            期刊总数 <br /><span class="count">{{
              form.journal_total
            }}</span></span
          >
        </div>
        <div class="item-img">
          <img src="../assets/network.png" alt="" />
          <span class="text">
            文章发布量 <br /><span class="count">{{
              form.article_total
            }}</span></span
          >
        </div>
      </div>
      <div class="header-item">
        <div class="item-text">
          <div>
            <span class="text">会议举办次数</span
            ><span class="count">{{ form.conference_total }}</span>
          </div>
          <div>
            <span class="text">活动举办次数</span>
            <span class="count">{{ form.activity_total }}</span>
          </div>
        </div>
        <div class="item-text">
          <div>
            <span class="text">总阅读次数</span
            ><span class="count">{{ form.article_readnum }}</span>
          </div>
          <div>
            <span class="text">转发次数</span
            ><span class="count">{{ form.article_forwardnum }}</span>
          </div>
        </div>
      </div>
      <div class="header-item" style="position: relative">
        <span style="position: absolute; top: 0; left: 5px; color: #666"
          >搜索热词</span
        >
        <wordcloud
          v-if="form.search_hot_word"
          style="width: 80%; height: 100px; margin-left: 20%"
          :data="form.search_hot_word"
          nameKey="name"
          :fontSize="[10, 24]"
          valueKey="value"
          :color="myColors"
          :showTooltip="false"
        >
        </wordcloud>
      </div>
    </div>
    <div class="index-main">
      <div class="main-item">
        <div class="item-title">期刊统计</div>
        <div class="item-more">查看更多>></div>
      </div>
      <div class="main-content">
        <div class="c1">
          <div class="c1-title">学科期刊分布</div>
          <div ref="subject" style="width: 100%; height: 250px"></div>
        </div>
        <div class="c2">
          <div class="c2-title">单位期刊统计</div>
          <div ref="company" style="width: 100%; height: 250px"></div>
        </div>
        <div class="c1">
          <div class="c1-title">期刊文章TOP5</div>
          <div ref="article" style="width: 100%; height: 250px"></div>
        </div>
      </div>
    </div>
    <div class="index-main">
      <div class="main-item">
        <div class="item-title">文章统计</div>
        <div class="item-more">查看更多>></div>
      </div>
      <div class="main-content">
        <div class="c1">
          <div class="c1-title">文章来源分析</div>
          <div ref="article_sorce" style="width: 100%; height: 250px"></div>
        </div>
        <div class="c2">
          <div class="c2-title">文章发布/时间统计</div>
          <div ref="article_time" style="width: 100%; height: 250px"></div>
        </div>
        <div class="c1">
          <div class="c1-title">文章阅读量TOP5</div>
          <div ref="article_ready" style="width: 100%; height: 250px">
            <div class="h2">
              <span>序号</span>
              <span>文章标题</span>
              <span>阅读次数</span>
            </div>
            <div
              class="con2"
              v-for="(item, index) in form.article_readnum_top5"
              :key="index"
            >
              <span>{{ index + 1 }}</span>
              <span class="a_title">{{ item.name }}</span>
              <span>{{ item.read_num }}</span>
            </div>
            <div></div>
          </div>
        </div>
      </div>
    </div>
    <div class="index-main">
      <div class="main-item">
        <div class="item-title">会议统计</div>
        <div class="item-more">查看更多>></div>
      </div>
      <div class="main-content">
        <div class="c1">
          <div class="c1-title">会议主办方统计</div>
          <div ref="meet_count" style="width: 100%; height: 250px"></div>
        </div>
        <div class="c1">
          <div class="c2-title">会议发布/时间统计</div>
          <div ref="meet_time" style="width: 100%; height: 250px"></div>
        </div>
      </div>
    </div>
  </section>
  <!-- 期刊管理员首页 -->
  <section v-else>
    <CASCI></CASCI>
  </section>
</template>
<script>
import echarts from "echarts";
import wordcloud from "vue-wordcloud";
import CASCI from '../components/CASCI'
export default {
  data() {
    return {
      //   chartData: [],
      form: {},
      list: [
        { article_header: "中国生态效率时空演化研究", count: "132" },
        { article_header: "中国生态效率时空演化研究", count: "132" },
        { article_header: "中国生态效率时空演化研究", count: "132" },
        { article_header: "中国生态效率时空演化研究", count: "132" },
        { article_header: "中国生态效率时空演化研究", count: "132" },
      ],
      myColors: ["#1f77b4", "#629fc9", "#94bedb", "#c9e0ef"],
      role_id:1
    };
  },
  components: {
    wordcloud,
    CASCI
  },
  computed: {},
  methods: {
    getEcharts() {
      var myChart = this.$echarts.init(this.$refs.subject);
      var myChart1 = this.$echarts.init(this.$refs.company);
      var myChart2 = this.$echarts.init(this.$refs.article);

      var myChart3 = this.$echarts.init(this.$refs.article_sorce);
      var myChart4 = this.$echarts.init(this.$refs.article_time);
      var myChart5 = this.$echarts.init(this.$refs.meet_count);
      var myChart6 = this.$echarts.init(this.$refs.meet_time);
      // 学科期刊
      let option = {
        backgroundColor: "#fff",

        // title: {
        //     text: 'Customized Pie',
        //     left: 'center',
        //     top: 20,
        //     textStyle: {
        //         color: '#ccc'
        //     }
        // },
        color: ["#9379ff", "#62A2FF", "#FFD053", "#FF9F41", "#FF542C"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        // visualMap: {
        //     show: false,
        //     min: 80,
        //     max: 600,
        //     inRange: {
        //         colorLightness: [0, 1]
        //     }
        // },
        series: [
          {
            name: "期刊数量",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            // data: [
            //   { value: 335, name: "直接访问" },
            //   { value: 310, name: "邮件营销" },
            //   { value: 274, name: "联盟广告" },
            //   { value: 235, name: "视频广告" },
            //   { value: 400, name: "搜索引擎" },
            // ].sort(function (a, b) {
            //   return a.value - b.value;
            // }),
            data: this.form.subject_journal.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",
            label: {
              color: "rgba(102, 102, 102,1)",
              fontSize: 14,
            },
            labelLine: {
              lineStyle: {
                color: "rgba(000, 000, 000, 0.1)",
              },
              smooth: 0.2,
              length: 8,
              length2: 5,
            },
            itemStyle: {
              // color: '#c23531',
              // shadowBlur: 200,
              // shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 单位期刊统计
      let option1 = {
        color: ["#5066FF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // data: ["Mon", "Tue", "Wed", "Thu"],
            data: this.form.organizer_journal_x,

            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#D4D8EE",
                width: 2,
                type: "dotted",
              },
            },
            axisLabel: {
              formatter: function (val) {
                // return "中国科"; //对每个标签处理后的结果（通过js字符串方法处理）
                return val;
              },
              // x轴字体颜色
              textStyle: {
                color: "#999999",
                // lineHeight: 20,
                fontSize: 12,
              },
              align: "center",
              // padding:[10,0 ,0,-40],
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            boundaryGap: ["0%", "20%"],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#666666", //更改坐标轴文字颜色
                fontSize: 14, //更改坐标轴文字大小
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            // data:['0' , '100' , '200' , '300,400]
          },
        ],
        series: [
          {
            name: "期刊数量",
            type: "bar",
            barWidth: "40%",
            // data: [10, 52, 200, 334],
            data: this.form.organizer_journal_y,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [10, 10, 10, 10],
              },
            },
          },
        ],
      };
      // 期刊文章前5
      let option2 = {
        // title: {
        //     text: '世界人口总量',
        //     subtext: '数据来自网络'
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        // legend: {
        //     data: ['2011年', '2012年']
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          show: false,
          // boundaryGap: ['0', '50%']
        },
        yAxis: {
          // show:false,
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          //   data: ["应用物理", "应用物理", "应用物理", "应用物理", "应用物理"],
          data: this.form.journal_article_x,
        },
        series: [
          // {
          //     name: '2011年',
          //     type: 'bar',
          //     data: [18203, 23489, 29034, 104970, 131744]
          // },
          {
            name: "文章数量",
            type: "bar",
            // data: [19325, 23438, 31000, 121594, 134141],
            data: this.form.journal_article_y,
            barWidth: "30%",
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [10, 10, 10, 10],
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#FF852C",
                  },
                  {
                    offset: 1,
                    color: "#FFCF29",
                  },
                ]),
                label: {
                  show: true, //开启显示
                  position: "right", //在上方显示
                  textStyle: {
                    //数值样式
                    color: "#666666",
                    fontSize: 14,
                  },
                },
              },
            },
          },
        ],
      };
      // 文章来源分布
      let option3 = {
        backgroundColor: "#fff",

        // title: {
        //     text: 'Customized Pie',
        //     left: 'center',
        //     top: 20,
        //     textStyle: {
        //         color: '#ccc'
        //     }
        // },
        color: ["#FA9022", "#DCDB01", "#8C70F8", "#34A6FE", "#2A4AD1"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        // visualMap: {
        //     show: false,
        //     min: 80,
        //     max: 600,
        //     inRange: {
        //         colorLightness: [0, 1]
        //     }
        // },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            // data: [
            //   { value: 335, name: "直接访问" },
            //   { value: 310, name: "邮件营销" },
            //   { value: 274, name: "联盟广告" },
            //   { value: 235, name: "视频广告" },
            //   { value: 400, name: "搜索引擎" },
            // ].sort(function (a, b) {
            //   return a.value - b.value;
            // }),
            // data:this.form.journal_article.sort(function(a,b){return a.value-b.value}),
            data: this.form.journal_article,
            roseType: "radius",
            label: {
              color: "rgba(102, 102, 102,1)",
              fontSize: 14,
            },
            labelLine: {
              lineStyle: {
                color: "rgba(000, 000, 000, 0.1)",
              },
              smooth: 0.2,
              length: 8,
              length2: 5,
            },
            itemStyle: {
              // color: '#c23531',
              // shadowBlur: 200,
              // shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function (idx) {
              return Math.random() * 200;
            },
          },
        ],
      };
      // 文章分布/时间统计
      let option4 = {
        color: "#FFB81E",
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#D4D8EE",
              width: 2,
              // type:'dotted',
            },
          },
          //   data: ["1", "2", "3", "", "", "", ""],
          data: this.form.pubtime_article_x,
          axisLabel: {
            formatter: function (val) {
              //   return "中国科学院成都生物研究所  中国科学院成都生物研究所"; //对每个标签处理后的结果（通过js字符串方法处理）
              return val;
            },
            // x轴字体颜色
            textStyle: {
              color: "#999999",
              // lineHeight: 20,
              // fontSize: 12
            },
            align: "left",
            // padding:[10,0 ,0,-40],
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
            interval: 100,
          },
          axisLine: {
            show: false,
          },
          boundaryGap: ["0%", "30%"],
        },
        series: [
          {
            // data: [50, 200, 20, 300, 150, 300, 100],
            data: this.form.pubtime_article_y,
            type: "line",
            symbol: "none", //取消折点圆圈
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#FFC765", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            smooth: true,
          },
        ],
      };
      // 会议主办方统计
      let option5 = {
        color: ["#5066FF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // data: ["", "", "", "", "", ""],
            data: this.form.organizer_conference_x,

            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#D4D8EE",
                width: 2,
                type: "dotted",
              },
            },
            axisLabel: {
              formatter: function (val) {
                // return "中国科"; //对每个标签处理后的结果（通过js字符串方法处理）
                return val;
              },
              // x轴字体颜色
              textStyle: {
                color: "#999999",
                // lineHeight: 20,
                fontSize: 12,
              },
              align: "center",
              // padding:[10,0 ,0,-40],
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            boundaryGap: ["0%", "20%"],
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#666666", //更改坐标轴文字颜色
                fontSize: 14, //更改坐标轴文字大小
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
            // data:['0' , '100' , '200' , '300,400]
          },
        ],
        series: [
          {
            name: "会议数量",
            type: "bar",
            barWidth: "40%",
            // data: [50, 52, 200, 334, 45, 190, 240],
            data: this.form.organizer_conference_y,
            itemStyle: {
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [10, 10, 10, 10],
              },
            },
          },
        ],
      };
      // 会议发布/时间统计
      let option6 = {
        color: "#FFB81E",
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: "#D4D8EE",
              width: 2,
              // type:'dotted',
            },
          },
          //   data: ["1", "1", "1", "1", "1", "1", "1"],
          data: this.form.pubtime_conference_x,
          axisLabel: {
            formatter: function (val) {
              return val;
            },
            // x轴字体颜色
            textStyle: {
              color: "#999999",
              // lineHeight: 20,
              // fontSize: 12
            },
            align: "left",
            // padding:[10,0 ,0,-40],
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
            },
          },
          axisTick: {
            show: false,
            interval: 100,
          },
          axisLine: {
            show: false,
          },
          boundaryGap: ["0%", "30%"],
        },
        series: [
          {
            // data: [50, 200, 20, 300, 150, 300, 100],
            data: this.form.pubtime_conference_y,
            type: "line",
            symbol: "none", //取消折点圆圈
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#FFC765", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ffffff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            smooth: true,
          },
        ],
      };
      myChart.setOption(option);
      myChart1.setOption(option1);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
      myChart4.setOption(option4);
      myChart5.setOption(option5);
      myChart6.setOption(option6);
    },
    getData() {
      this.$api.getIndexData({}).then((res) => {
        this.form = res.data.data;
        this.form.search_hot_word = this.form.search_hot_word.concat(
          this.form.search_hot_word
        );
        let organizer_journal_x = [];
        let organizer_journal_y = [];
        let journal_article_x = [];
        let journal_article_y = [];
        let pubtime_article_x = [];
        let pubtime_article_y = [];
        let organizer_conference_x = [];
        let organizer_conference_y = [];
        let pubtime_conference_x = [];
        let pubtime_conference_y = [];
        this.form.organizer_journal.forEach((item, index) => {
          organizer_journal_x.push(item.name);
          organizer_journal_y.push(item.value);
        });
        this.form.journal_article_top5.forEach((item, index) => {
          journal_article_x.push(item.journal_name);
          journal_article_y.push(item.count);
        });
        this.form.pubtime_article.forEach((item, index) => {
          pubtime_article_x.push(item.publish_time);
          pubtime_article_y.push(item.count);
        });
        this.form.organizer_conference.forEach((item, index) => {
          organizer_conference_x.push(item.organizer_name);
          organizer_conference_y.push(item.count);
        });
        this.form.pubtime_conference.forEach((item, index) => {
          pubtime_conference_x.push(item.publish_time);
          pubtime_conference_y.push(item.count);
        });
        this.form.organizer_journal_x = organizer_journal_x;
        this.form.organizer_journal_y = organizer_journal_y;
        this.form.journal_article_x = journal_article_x.reverse();
        this.form.journal_article_y = journal_article_y.reverse();
        this.form.pubtime_article_x = pubtime_article_x;
        this.form.pubtime_article_y = pubtime_article_y;
        this.form.organizer_conference_x = organizer_journal_x;
        this.form.organizer_conference_y = organizer_journal_y;
        this.form.pubtime_conference_x = pubtime_conference_x;
        this.form.pubtime_conference_y = pubtime_conference_y;
        this.getEcharts();
      });
    },
  },
  mounted() {},
  beforeCreate(){
    this.$api.getAccountInfo().then((res) => {
      this.role_id = res.data.data.role_id;
      // this.getData();
      // var color = [];
      // for (let i = 0; i < 5; i++) {
      //   let c =
      //     "rgb(" +
      //     [
      //       Math.round(Math.random() * 160),
      //       Math.round(Math.random() * 160),
      //       Math.round(Math.random() * 160),
      //     ].join(",") +
      //     ")";
      //   color.push(c);
      // }
      // this.myColors = color;
    });
  },
  created() {
    this.$api.getAccountInfo().then((res) => {
      this.role_id = res.data.data.role_id;
      this.getData();
      var color = [];
      for (let i = 0; i < 5; i++) {
        let c =
          "rgb(" +
          [
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
          ].join(",") +
          ")";
        color.push(c);
      }
      this.myColors = color;
    });
  },
};
</script>
<style lang='scss' scoped>
section {
  // width:100%;
  .index_header {
    background: #ffffff;
    height: 102px;
    border-radius: 10px;
    display: flex;
    align-items: center;

    .header-item {
      flex: 1;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      height: 56px;
      &:not(:last-child) {
        border-right: 1px solid #d8d8d8;
      }
      .text {
        font-size: 16px;
        color: #666666;
      }
      .count {
        font-size: 32px;
      }
      .item-img {
        display: flex;
        img {
          width: 56px;
          height: 56px;
          margin-right: 30px;
        }
        .text {
          position: relative;
          top: -8px;
        }
        .count {
          color: #208cfe;
          position: relative;
          bottom: -11px;
        }
      }
      .item-text {
        & > div {
          display: flex;
          align-items: center;
          .text {
            width: 120px;
          }
        }
      }
    }
  }
  .index-main {
    background: #ffffff;
    border-radius: 10px;
    margin-top: 20px;
    padding: 20px;
    .main-item {
      position: relative;
      .item-title {
        font-size: 18px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 20px;
      }
      .item-more {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 14px;
        color: #3895fe;
      }
    }
    .main-content {
      display: flex;
      & > div:not(:last-child) {
        border-right: 1px solid #eee;
      }
      .c1 {
        flex: 1;
        .h2 {
          font-size: 14px;
          color: #999999;
          height: 40px;
          line-height: 40px;
          width: 80%;
          span:nth-of-type(2) {
            margin-left: 20px;
          }
          span:last-child {
            float: right;
          }
        }
        .con2 {
          font-size: 14px;
          color: #333333;
          height: 36px;
          line-height: 36px;
          background: #fafafa;
          border-radius: 7px;
          margin-bottom: 8px;
          padding: 0 10px;
          display: flex;
          width: 80%;
          &:nth-of-type(2) {
            color: #ef3d3d;
          }
          &:nth-of-type(3) {
            color: #fdad23;
          }
          &:nth-of-type(4) {
            color: #56ccf6;
          }
          span:nth-of-type(2) {
            margin-left: 20px;
          }
          span:last-child {
            float: right;
          }
          .a_title {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 80%;
          }
        }
      }
      .c2 {
        flex: 1.5;
      }
      .c1,
      .c2 {
        width: 100%;
        // flex:1;
        padding: 10px;
        box-sizing: border-box;
      }
      .c1-title,
      .c2-title {
        font-size: 15px;
        font-weight: bold;
        color: #666666;
        // margin-top:20px;
      }
    }
  }
}
</style>