yrxzy/src/views/journalQun/CASCI.vue

<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-radio-group v-model="form.date">
              <el-radio-button label="day">日报</el-radio-button>
              <el-radio-button label="week">周报</el-radio-button>
              <el-radio-button label="month">月报</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.date == 'day'">
            <el-date-picker
              v-model="form.day_value"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item v-if="form.date == 'week'">
            <el-select style="width:220px" v-model="form.week_value" placeholder="选择周">
                <el-option
                  v-for="item in weeks"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item v-if="form.date == 'month'">
            <el-date-picker style="width:220px"
              v-model="form.month_value"
              type="month"
              value-format="yyyy-MM"
              placeholder="选择月"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
          </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="journal_img" label="期刊封面" width="120">
          <template slot-scope="scope">
            <img
              :src="scope.row.journal_img"
              alt=""
              width="80"
              style="margin: 5px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="journal_name" label="期刊名称">
        </el-table-column>
        <el-table-column
          prop="article_count"
          label="统计资源数量(总)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="article_count_mp"
          label="统计资源数量(公众号)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="article_count_xcx"
          label="统计资源数量(小程序)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="read_num"
          label="总阅读量(次))"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="read_num_mp"
          label="公众号阅读量(次)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="read_num_xcx"
          label="小程序阅读量(次)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="zhuanfa_num"
          label="总转发量量(次)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="zhuanfa_num_mp"
          label="公众号转发量(次)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="zhuanfa_num_xcx"
          label="小程序转发量(次)"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          prop="casci"
          label="CASCI"
          sortable="custom"
          fixed="right"
        >
        </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",
        day_value: '',
        week_value: '',
        month_value: '',
      },
      total: 1,
      list: [{ name: "2333" }],
      loading: false,
      input: "",
      dialogVisible: false,
      dialogTitle: "",
      dialogVisible1: false,
      form1: { qrcode: "" },
      file: "",
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date() - 1000 * 60 * 60 * 24;
        },
      },
      order_by: "casci",
      order: "descending",
      weeks:[]
    };
  },
  methods: {
    changeTableSort(e) {
      let parm = { order_by: e.prop, order: e.order };
      this.order_by = e.prop;
      this.order = e.order;
      this.getData();
    },
    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() {
      var parm = { ...this.form };
      parm.timerange = parm.timerange.join(",");
      parm.order_by = this.order_by;
      parm.order = this.order;
      this.$api.downloadCASCI(parm).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.journal_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 };
      parm.order_by = this.order_by;
      parm.order = this.order;
      parm.week_value=parm.week_value.replace(' 至 ',',')
      this.loading = true;
      this.$api.getCASCIList(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();
        });
      });
    },
    getTimer() {
      let time = new Date() // 获取当前时间
      let nowTime = time.getTime()
      let day = time.getDay()
      let oneDayTime = 24 * 60 * 60 * 1000; // 一周的时间
      let MondayTime = nowTime - (day - 1) * oneDayTime; //显示当前周一
      let SundayTime = nowTime + (7 - day) * oneDayTime; //显示当前周日
      let setlist = [] // 初始化一个空数组 准备装食物--你好骚啊
      for (let i = 0; i < 365*3; i++) {
        // 这块我不知道怎么回事一直会有重复的push进去，后面做了去重，可以放心食用，当然也可以优化一下
        setlist.push(this.setTime(MondayTime) + ' 至 ' + this.setTime(SundayTime)) // this.setTime()在下面 放心食用
        // 重点 push完，赶紧让它获取上一周的时间 oneDayTime上面有写
        time = new Date(time - oneDayTime)
        nowTime = time.getTime()
        day = time.getDay()
        MondayTime = nowTime - (day - 1) * oneDayTime; //显示当前周一
        SundayTime = nowTime + (7 - day) * oneDayTime; //显示当前周日
      }
      let list = [...new Set(setlist)] // 简单去重一下
      list.shift()
      this.weeks=list
      this.form.week_value=list[0]
    },
    setTime(time) {
      // 将time时间戳 先格式化一下
      let date = new Date(time)
      let yy = date.getFullYear()
      let m = date.getMonth() + 1
      let day = date.getDate()
      let str = yy + '-' + (m < 10 ? '0' + m : m) + '-' + (day < 10 ? '0' + day : day)
      return str
    }
  },
  created() {
    var y = new Date().getFullYear() ,m=(new Date().getMonth() + 1) ,d=new Date().getDate();
    m = m > 9 ? m : '0' + m;
    d = d > 9 ? d : '0' + d;
    this.form.day_value=y+'-'+m+'-'+d;
    this.form.month_value=y+'-'+m;
    this.getTimer()
    this.getData();
    
    // console.log(this.$date.getCurrWeek(new Date()));
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path.indexOf("add") >= 0) {
        vm.getData();
      }
    });
  },
};
</script>