casci

src/router.js

@@ -128,6 +128,23 @@ export default new Router({
         name: '学科详情'
       },]
     },
+    {
+      path: '/journal/casci',
+      name: 'CASCI数据统计',
+      icon: 'iconfont iconshuben',
+      component: () => import('./views/Home.vue'),
+      show: 0,
+      isLeaf: 1,
+      children: [{
+        path: '/journal/casci',
+        component: () => import('./views/journalQun/CASCI.vue'),
+        name: 'CASCI数据统计'
+      }, {
+        path: '/journal/casci/detail',
+        component: () => import('./views/journalQun/CASCIDetail.vue'),
+        name: 'CASCI数据详情'
+      },]
+    },
     
     {
       path: '/learning/activity',

src/views/journalQun/CASCI.vue

@@ -0,0 +1,365 @@
+<style lang="scss" scoped>
+
+</style>
+<template>
+  <section>
+    <p>CASCI数据统计</p>
+    <div class="content">
+      <div class="filter">
+        <el-form
+          size="small"
+          label-width="70px"
+          :inline="true"
+          label-position="left"
+        >
+          <el-form-item label="">
+            <el-input
+              clearable
+              placeholder="请输入信息标题"
+              v-model="form.name"
+              @clear="getData"
+            ></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="search">搜索</el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="form.date">
+              <el-option label="日榜" value="day"></el-option>
+              <el-option label="周榜" value="week"></el-option>
+              <el-option label="月榜" value="month"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-date-picker
+              v-if="form.date == 'day'"
+              v-model="form.timerange"
+              type="date"
+              placeholder="选择日期"
+            >
+            </el-date-picker>
+            <el-date-picker
+              v-if="form.date == 'week'"
+              v-model="form.timerange"
+              type="week"
+              format="yyyy 第 WW 周"
+              placeholder="选择周"
+            ></el-date-picker>
+            <el-date-picker
+              v-if="form.date == 'month'"
+              v-model="form.timerange"
+              type="month"
+              placeholder="选择月"
+            >
+            </el-date-picker>
+          </el-form-item>
+          <el-form-item style="float: right">
+            <el-button
+              @click="download"
+              plain
+              icon="el-icon-download"
+              type="primary"
+              >导出</el-button
+            >
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table
+        class="table"
+        :data="list"
+        height="57vh"
+        border
+        v-loading="loading"
+        default-expand-all
+        row-key="id"
+        style="width: 100%"
+        @sort-change="changeTableSort"
+      >
+        <el-table-column prop="rank" width="80" label="排名"> </el-table-column>
+        <el-table-column prop="img" label="期刊封面" width="120">
+          <template slot-scope="scope">
+            <img :src="scope.row.img" alt="" width="80" style="margin: 5px" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="统计资源数量(总)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="统计资源数量(公众号)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="总阅读量(次))" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="公众号阅读量(次)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="小程序阅读量(次)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="总点赞量(次)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="公众号点赞量(次)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="小程序点赞量(次)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="总转发量量(次)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="公众号转发量(次)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="小程序转发量(次)" sortable="custom">
+        </el-table-column>
+        <el-table-column prop="wxcode" label="CASCI" sortable="custom">
+        </el-table-column>
+        <el-table-column
+          prop="zip"
+          width="150"
+          align="center"
+          label="操作"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button type="text" @click="showCASCI(scope.row)"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <Page
+        ref="pageButton"
+        :current="form.page"
+        :page_size="form.page_size"
+        :total="total"
+        @pageChange="gopage"
+      />
+      <!--二维码上传-->
+      <el-dialog
+        class="fu-dialog"
+        :title="dialogTitle"
+        :close-on-click-modal="false"
+        :visible.sync="dialogVisible"
+      >
+        <el-form
+          size="small"
+          class="preview"
+          :inline="false"
+          label-width="100px"
+          :model="form1"
+          ref="form1"
+        >
+          <el-form-item label="上传二维码：" prop="img">
+            <el-upload
+              class="avatar-uploader"
+              action="/api/admin/uploadfile"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+            >
+              <img v-if="form1.qrcode" :src="form1.qrcode" class="avatar" />
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <p v-if="form1.qrcode" class="del" @click="delImg">删除</p>
+            <!-- <span style="font-size: 12px; color: #999999"
+              >建议图片尺寸为：210*160</span
+            > -->
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button
+            size="small"
+            type="normal"
+            @click="(dialogVisible = false), (form1 = {})"
+            >取消</el-button
+          >
+          <el-button size="small" type="primary" @click="save">确 定</el-button>
+        </span>
+      </el-dialog>
+      <el-dialog
+        class="fu-dialog"
+        title="导入期刊"
+        width="400px"
+        :close-on-click-modal="false"
+        :visible.sync="dialogVisible1"
+      >
+        <el-upload
+          class="upload-demo"
+          action="/api/admin/uploadfile"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess1"
+        >
+          <el-button size="small" type="primary">点击上传</el-button>
+          <div slot="tip" class="el-upload__tip">
+            只能上传.xls/.xlsx文件，且不超过500M
+          </div>
+        </el-upload>
+        <div>{{ file }}</div>
+        <span slot="footer" class="dialog-footer">
+          <el-button size="small" type="normal" @click="dialogVisible1 = false"
+            >取消</el-button
+          >
+          <el-button size="small" type="primary" @click="upload"
+            >确 定</el-button
+          >
+        </span>
+      </el-dialog>
+    </div>
+  </section>
+</template>
+<script>
+import Page from "../../components/Page";
+export default {
+  components: {
+    Page,
+  },
+  data() {
+    return {
+      //   edit:0,
+      form: {
+        name: "",
+        page: 1,
+        page_size: 20,
+        date: "day",
+        timerange: new Date(),
+      },
+      total: 1,
+      list: [{ name: "2333" }],
+      loading: false,
+      input: "",
+      dialogVisible: false,
+      dialogTitle: "",
+      dialogVisible1: false,
+      form1: { qrcode: "" },
+      file: "",
+    };
+  },
+  methods: {
+    changeTableSort(e){
+      let parm = {order_by:e.prop,order:e.order}
+      console.log(parm)
+    },
+    delImg() {
+      this.$set(this.form1, "qrcode", null);
+      this.$forceUpdate();
+    },
+    save() {
+      this.$refs["form1"].validate((valid) => {
+        if (valid) {
+          let parm = this.form1;
+          let id = this.form1.id;
+          this.$api.updateJournal(parm).then((res) => {
+            if (res.data.code == 0) {
+              this.$message({
+                type: "success",
+                message: "上传成功!",
+              });
+              this.dialogVisible = false;
+              this.getData();
+            } else {
+              this.$message.error("上传失败!");
+            }
+          });
+        }
+      });
+    },
+    upload() {
+      this.$api.upJournalData({ file: this.file }).then((res) => {
+        this.dialogVisible1 = false;
+        this.getData();
+        this.$message({
+          message: "上传成功",
+          type: "success",
+        });
+      });
+    },
+    download() {
+      this.$api.getJournalData().then((res) => {
+        var elink = document.createElement("a");
+        let blob = new Blob([res.data], {
+          type: "application/vnd.ms-excel,charset=UTF-8",
+        });
+        let objUrl = URL.createObjectURL(blob);
+        let file_name = decodeURIComponent(
+          res.headers["content-disposition"].split("=")[1]
+        );
+        console.log(file_name);
+        elink.download = file_name;
+        elink.style.display = "none";
+        elink.href = objUrl;
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+      });
+    },
+    showQrcode(row) {
+      // this.form1.journal_id = row.id;
+      this.form1.id = row.id;
+      this.form1.qrcode = row.qrcode;
+      this.dialogVisible = true;
+    },
+    showCASCI(row) {
+      this.$router.push({
+        path: "/journal/casci/detail",
+        query: { id: row.id },
+      });
+    },
+    //封面
+    handleAvatarSuccess(res, file) {
+      // this.form1.qrcode=file.response.data
+      this.$set(this.form1, "qrcode", file.response.data);
+    },
+    handleAvatarSuccess1(res, file) {
+      this.file = file.response.data;
+    },
+    gopage(size) {
+      if (size) {
+        this.form.page_size = size;
+      }
+      this.form.page = this.$refs.pageButton.page;
+      this.getData();
+    },
+    edit(row) {
+      this.$router.push({
+        path: "/journal/journal/add",
+        query: { id: row.id },
+      });
+    },
+    add() {
+      this.$router.push({ path: "/journal/journal/add" });
+    },
+    detail(id) {
+      this.$router.push({
+        path: "/company/detail",
+        query: { id: id, page: this.form.page, page_size: this.form.page_size },
+      });
+    },
+    search() {
+      this.getData();
+    },
+    getData() {
+      var parm = this.form;
+      this.loading = true;
+      this.$api.getJournalList(parm).then((res) => {
+        this.list = res.data.data.list;
+        this.total = res.data.data.total;
+        this.loading = false;
+      });
+    },
+    del(id) {
+      this.$confirm("确定删除吗?关联数据都会被删除!", "提示", {
+        type: "warning",
+      }).then(() => {
+        this.$api.delJournal({ id: id }).then((res) => {
+          this.$message({
+            message: "删除成功",
+            type: "success",
+          });
+          this.getData();
+        });
+      });
+    },
+  },
+  created() {
+    this.getData();
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      if (from.path.indexOf("add") >= 0) {
+        vm.getData();
+      }
+    });
+  },
+};
+</script>

src/views/journalQun/CASCIDetail.vue

@@ -0,0 +1,393 @@
+<style lang="scss" scoped>
+.tbl {
+  // border:1px solid #ccc;
+}
+.tbl tr {
+  height: 31px;
+}
+.tbl td {
+  padding: 5px;
+  border: 1px solid #ccc;
+}
+.title {
+  h3 {
+    margin: 20px 60px 0px 0px;
+    border-left: 3px solid rgb(21, 116, 224);
+    padding-left: 10px;
+    display: inline-block;
+  }
+}
+.journalAnalyse {
+  .countItem:last-child{
+    border:none;
+  }
+  .countItem {
+    position: relative;
+    margin: 40px 0px 40px 0px;
+    padding: 0px 40px 0px 20px;
+    border-right: 1px solid #ccc;
+    .red {
+      background: #f56262;
+    }
+    .hui {
+      background: #7ea1bb;
+    }
+    .blue {
+      background: #62b5f5;
+    }
+    .yellow {
+      background: #ffaf54;
+    }
+    .zi {
+      background: #9c76bf;
+    }
+    .llv {
+      background: #31d1d6;
+    }
+    .green {
+      background: #6ed495;
+    }
+    .hlv {
+      background: #66cccc;
+    }
+    .countCircle {
+      width: 100px;
+      border-radius: 100px;
+      height: 100px;
+      line-height: 100px;
+      text-align: center;
+      color: #fff;
+      font-size: 14px;
+      float: left;
+    }
+    h4 {
+      position: absolute;
+      top: 30px;
+      right: 20px;
+    }
+  }
+}
+// 图表
+.chartItem {
+  .content {
+    padding: 20px;
+  }
+}
+</style>
+<template>
+  <section>
+    <!-- <p><span @click="$router.go(-1)">中科院全刊 > </span>期刊详情</p> -->
+    <div class="content">
+      <div class="jDetail">
+        <img
+          :src="form.img"
+          alt=""
+          width="159"
+          height="210"
+          style="float: left"
+        />
+        <table
+          class="tbl"
+          cellpadding="0"
+          cellspacing="0"
+          width="80%"
+          style="float: left; margin-left: 45px"
+        >
+          <tr>
+            <td width="119" align="right">名称：</td>
+            <td>{{ form.name }}</td>
+          </tr>
+          <tr>
+            <td align="right">微信号：</td>
+            <td>{{ form.wxcode }}</td>
+          </tr>
+          <tr>
+            <td align="right">主办单位：</td>
+            <td>{{ form.organizer_name }}</td>
+          </tr>
+          <tr>
+            <td align="right">所属学科：</td>
+            <td>{{ form.subject_name }}</td>
+          </tr>
+          <tr>
+            <td align="right">简介：</td>
+            <td>{{ form.desc }}</td>
+          </tr>
+        </table>
+        <div style="clear: both; height: 0; content: ''"></div>
+      </div>
+      <!-- 期刊数据 -->
+      <div class="journalAnalyse">
+        <div class="title">
+          <h3>期刊数据</h3>
+          <el-date-picker
+            size="mini"
+            v-model="form.daterange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          >
+          </el-date-picker>
+        </div>
+        <el-row>
+          <el-col :span="3" class="countItem">
+            <div class="countCircle red">总阅读量</div>
+            <h4>99999</h4>
+          </el-col>
+          <el-col :span="3" class="countItem">
+            <div class="countCircle hui">公众号阅读量</div>
+            <h4>99999</h4>
+          </el-col>
+          <el-col :span="3" class="countItem">
+            <div class="countCircle blue">小程序阅读量</div>
+            <h4>99999</h4> </el-col
+          ><el-col :span="3" class="countItem">
+            <div class="countCircle yellow">转发量</div>
+            <h4>99999</h4>
+          </el-col>
+          <el-col :span="3" class="countItem">
+            <div class="countCircle zi">点赞数</div>
+            <h4>99999</h4>
+          </el-col>
+          <el-col :span="3" class="countItem">
+            <div class="countCircle llv">平均阅读量</div>
+            <h4>99999</h4>
+          </el-col>
+          <el-col :span="3" class="countItem">
+            <div class="countCircle green">CASCI</div>
+            <h4>99999</h4> </el-col
+          ><el-col :span="3" class="countItem">
+            <div class="countCircle hlv">排名</div>
+            <h4>99999</h4>
+          </el-col>
+        </el-row>
+      </div>
+      <!-- 近7日期刊数据趋势图 -->
+      <div class="chartItem top7JournalAnalyse">
+        <div class="title">
+          <h3>近7日期刊数据趋势图</h3>
+        </div>
+        <div class="content">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="总阅读数" name="1"></el-tab-pane>
+                <el-tab-pane label="公众号阅读量" name="2"></el-tab-pane>
+                <el-tab-pane label="小程序阅读量" name="3"></el-tab-pane>
+                <el-tab-pane label="转发数" name="4"></el-tab-pane>
+                <el-tab-pane label="点赞数" name="5"></el-tab-pane>
+              </el-tabs>
+              <div
+                class="chart1"
+                ref="chart1"
+                style="width: 100%; height: 250px"
+              ></div>
+            </el-col>
+            <el-col :span="12">
+              <el-tabs v-model="activeName1" @tab-click="handleClick">
+                <el-tab-pane label="总排名" name="first"></el-tab-pane>
+                <el-tab-pane label="CASCI" name="second"></el-tab-pane>
+              </el-tabs>
+              <div
+                class="chart2"
+                ref="chart2"
+                style="width: 100%; height: 250px"
+              ></div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <!-- 近30日期刊数据发布 -->
+      <div class="top30JournalAnalyse">
+        <div class="title">
+          <h3>近30日期刊数据发布</h3>
+        </div>
+        <div class="content">
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane label="总阅读数" name="1"></el-tab-pane>
+                <el-tab-pane label="公众号阅读量" name="2"></el-tab-pane>
+                <el-tab-pane label="小程序阅读量" name="3"></el-tab-pane>
+                <el-tab-pane label="转发数" name="4"></el-tab-pane>
+                <el-tab-pane label="点赞数" name="5"></el-tab-pane>
+              </el-tabs>
+              <div
+                class="chart3"
+                ref="chart3"
+                style="width: 100%; height: 250px"
+              ></div>
+            </el-col>
+            <el-col :span="12">
+              <el-tabs v-model="activeName1" @tab-click="handleClick">
+                <el-tab-pane label="总排名" name="first"></el-tab-pane>
+                <el-tab-pane label="CASCI" name="second"></el-tab-pane>
+              </el-tabs>
+              <div
+                class="chart4"
+                ref="chart4"
+                style="width: 100%; height: 250px"
+              ></div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <!-- 近30日发布资源TOP10 -->
+      <div class="top30JournalAnalyse">
+        <div class="title">
+          <h3>近30日发布资源TOP10</h3>
+        </div>
+      </div>
+      <div class="content">
+        <el-table
+          :data="nealyTop30Data"
+          style="width: 100%">
+          <el-table-column
+            prop="name"
+            label="名称"
+            width="width">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="来源"
+            width="width">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="阅读量"
+            width="width">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="转发量"
+            width="width">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="点赞数"
+            width="width">
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label="操作"
+            width="width">
+            <template slot-scope="scope">
+                <el-button type="primary" @click="preview(scope.row)"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </section>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      form: {},
+      activeName: "",
+      activeName1: "",
+      nealyTop30Data:[]
+    };
+  },
+  methods: {
+    handleClick() {},
+    preview(){},
+    getData() {
+      this.loading = true;
+      // 期刊详情
+      let id = this.$route.query.id;
+      if (id) {
+        this.$api.showJournal({ id: id }).then((res) => {
+          this.form = res.data.data;
+          this.oldActivityList = res.data.data.old_activity;
+          this.newActivityList = res.data.data.new_activity;
+          this.goodArticleList = res.data.data.good_article;
+        });
+      }
+    },
+    // 初始化图表
+    initCharts() {
+      let option1 = {
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: "line",
+          },
+        ],
+      };
+      //
+      let option2 = {
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: "line",
+          },
+        ],
+      };
+      //
+      let option3 = {
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [150, 230, 224, 218, 135, 147, 260],
+            type: "line",
+          },
+        ],
+      };
+      //
+      let option4 = {
+        xAxis: {
+          type: "category",
+          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+        },
+        yAxis: {
+          type: "value",
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: "bar",
+          },
+        ],
+      };
+
+      var chart1 = this.$echarts.init(this.$refs.chart1);
+      var chart2 = this.$echarts.init(this.$refs.chart2);
+      var chart3 = this.$echarts.init(this.$refs.chart3);
+      var chart4 = this.$echarts.init(this.$refs.chart4);
+      chart1.setOption(option1);
+      chart2.setOption(option2);
+      chart3.setOption(option3);
+      chart4.setOption(option4);
+    },
+  },
+  created() {
+    this.getData();
+  },
+  mounted() {
+    this.initCharts();
+  },
+};
+</script>