HM21St_Page_Manager/src/views/data_center/index.vue

<template>
  <div class="manage-root organize-manage">
    <Header />
    <div class="manage-root-contain">
      <nav-menu
        class="manage-root-contain-left"
        :activeMenuIndex="activeMenuIndex"
      ></nav-menu>
      <div class="manage-root-contain-right personnel-manage-right">
        <div class="top">
          <span>数据中心</span>
          <b>{{ queryTime }}</b>
        </div>
        <div class="day-stat-data" v-if="curDayStatData">
          <div class="day-item" v-if="curDayStatData.person_count">
            <div class="day-item-left">
              <p>用户总数</p>
              <span
                >{{ curDayStatData.person_count.total_count | formatNumber
                }}<b>人</b></span
              >
            </div>
            <div class="day-item-center">
              <p>较上周</p>
              <span
                :class="[
                  curDayStatData.person_count.add_count_pre_week > 0
                    ? 'add'
                    : curDayStatData.person_count.add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.person_count.add_count_pre_week > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.person_count.add_count_pre_week === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{ curDayStatData.person_count.add_count_pre_week }}</a>
              </span>
            </div>
            <div class="day-item-right">
              <p>较上月</p>
              <span
                :class="[
                  curDayStatData.person_count.add_count_pre_week > 0
                    ? 'add'
                    : curDayStatData.person_count.add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.person_count.add_count_pre_month > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.person_count.add_count_pre_month === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{ curDayStatData.person_count.add_count_pre_month }}</a>
              </span>
            </div>
          </div>
          <div class="day-item" v-if="curDayStatData.org_count">
            <div class="day-item-left">
              <p>机构总数</p>
              <span
                >{{ curDayStatData.org_count.total_count | formatNumber
                }}<b>个</b></span
              >
            </div>
            <div class="day-item-center">
              <p>较上周</p>
              <span
                :class="[
                  curDayStatData.org_count.add_count_pre_week > 0
                    ? 'add'
                    : curDayStatData.org_count.add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.org_count.add_count_pre_week > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.org_count.add_count_pre_week === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{ curDayStatData.org_count.add_count_pre_week }}</a>
              </span>
            </div>
            <div class="day-item-right">
              <p>较上月</p>
              <span
                :class="[
                  curDayStatData.org_count.add_count_pre_week > 0
                    ? 'add'
                    : curDayStatData.org_count.add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.org_count.add_count_pre_month > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.org_count.add_count_pre_month === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{ curDayStatData.org_count.add_count_pre_month }}</a>
              </span>
            </div>
          </div>
          <div class="day-item" v-if="curDayStatData.course_play_person_count">
            <div class="day-item-left">
              <p>累计上课人数</p>
              <span
                >{{
                  curDayStatData.course_play_person_count.total_count
                    | formatNumber
                }}<b>人</b></span
              >
            </div>
            <div class="day-item-center">
              <p>较上周</p>
              <span
                :class="[
                  curDayStatData.course_play_person_count.add_count_pre_week > 0
                    ? 'add'
                    : curDayStatData.course_play_person_count
                        .add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.course_play_person_count.add_count_pre_week >
                    0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.course_play_person_count
                          .add_count_pre_week === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{
                  curDayStatData.course_play_person_count.add_count_pre_week
                }}</a>
              </span>
            </div>
            <div class="day-item-right">
              <p>较上月</p>
              <span
                :class="[
                  curDayStatData.course_play_person_count.add_count_pre_week > 0
                    ? 'add'
                    : curDayStatData.course_play_person_count
                        .add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.course_play_person_count
                      .add_count_pre_month > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.course_play_person_count
                          .add_count_pre_month === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{
                  curDayStatData.course_play_person_count.add_count_pre_month
                }}</a>
              </span>
            </div>
          </div>
          <div class="day-item" v-if="curDayStatData.course_play_count">
            <div class="day-item-left">
              <p>累计上课人次</p>
              <span
                >{{ curDayStatData.course_play_count.total_count | formatNumber
                }}<b>人次</b></span
              >
            </div>
            <div class="day-item-center">
              <p>较上周</p>
              <span
                :class="[
                  curDayStatData.course_play_count.add_count_pre_week > 0
                    ? 'add'
                    : curDayStatData.course_play_count.add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.course_play_count.add_count_pre_week > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.course_play_count.add_count_pre_week ===
                        0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{ curDayStatData.course_play_count.add_count_pre_week }}</a>
              </span>
            </div>
            <div class="day-item-right">
              <p>较上月</p>
              <span
                :class="[
                  curDayStatData.course_play_count.add_count_pre_week > 0
                    ? 'add'
                    : curDayStatData.course_play_count.add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.course_play_count.add_count_pre_month > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.course_play_count.add_count_pre_month ===
                        0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{
                  curDayStatData.course_play_count.add_count_pre_month
                }}</a>
              </span>
            </div>
          </div>
          <div class="day-item" v-if="curDayStatData.article_reading_duration">
            <div class="day-item-left">
              <p>平台总阅读时长</p>
              <span
                >{{
                  Math.ceil(
                    curDayStatData.article_reading_duration.total_duration /
                      3600
                  ) | formatNumber
                }}<b>时</b></span
              >
            </div>
            <div class="day-item-center">
              <p>较上周</p>
              <span
                :class="[
                  curDayStatData.article_reading_duration
                    .add_duration_pre_week > 0
                    ? 'add'
                    : curDayStatData.article_reading_duration
                        .add_duration_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.article_reading_duration
                      .add_duration_pre_week > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.article_reading_duration
                          .add_duration_pre_week === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{
                  curDayStatData.article_reading_duration.add_duration_pre_week
                }}</a>
              </span>
            </div>
            <div class="day-item-right">
              <p>较上月</p>
              <span
                :class="[
                  curDayStatData.article_reading_duration
                    .add_duration_pre_month > 0
                    ? 'add'
                    : curDayStatData.article_reading_duration
                        .add_duration_pre_month === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.article_reading_duration
                      .add_duration_pre_month > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.article_reading_duration
                          .add_duration_pre_month === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{
                  curDayStatData.article_reading_duration.add_duration_pre_month
                }}</a>
              </span>
            </div>
          </div>
          <div
            class="day-item"
            v-if="curDayStatData.article_reading_word_count"
          >
            <div class="day-item-left">
              <p>平台总阅读词数</p>
              <span
                >{{
                  curDayStatData.article_reading_word_count.total_count
                    | formatNumber
                }}<b>词</b></span
              >
            </div>
            <div class="day-item-center">
              <p>较上周</p>
              <span
                :class="[
                  curDayStatData.article_reading_word_count.add_count_pre_week >
                  0
                    ? 'add'
                    : curDayStatData.article_reading_word_count
                        .add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.article_reading_word_count
                      .add_count_pre_week > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.article_reading_word_count
                          .add_count_pre_week === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{
                  curDayStatData.article_reading_word_count.add_count_pre_week
                }}</a>
              </span>
            </div>
            <div class="day-item-right">
              <p>较上月</p>
              <span
                :class="[
                  curDayStatData.article_reading_word_count.add_count_pre_week >
                  0
                    ? 'add'
                    : curDayStatData.article_reading_word_count
                        .add_count_pre_week === 0
                    ? 'flat'
                    : 'down',
                ]"
              >
                <img
                  :src="
                    curDayStatData.article_reading_word_count
                      .add_count_pre_month > 0
                      ? require('../../assets/caret-up.png')
                      : curDayStatData.article_reading_word_count
                          .add_count_pre_month === 0
                      ? require('../../assets/caret-flat.png')
                      : require('../../assets/caret-down.png')
                  "
                />
                <a>{{
                  curDayStatData.article_reading_word_count.add_count_pre_month
                }}</a>
              </span>
            </div>
          </div>
        </div>
        <div class="echart-box">
          <div class="echart-require">
            <el-cascader
              size="medium"
              :props="props"
              collapse-tags
              clearable
              :options="$provinceCityList"
              v-model="selectedOptions"
              class="cascader-option"
            >
            </el-cascader>
            <el-date-picker
              v-model="dataValue"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-button type="primary" size="small" @click="searchStatDaily"
              >查询</el-button
            >
          </div>
          <div class="echart-item-box">
            <div class="echart-item" id="echart1"></div>
            <div class="echart-item" id="echart2"></div>
            <div class="echart-item" id="echart3"></div>
            <div class="echart-item" id="echart4"></div>
            <div class="echart-item" id="echart5"></div>
            <div class="echart-item" id="echart6"></div>
          </div>
          <div class="read-info" v-if="readInfo">
            <!-- <span>文章数：{{ readInfo.article_count }}篇</span> -->
            <el-button
              type="primary"
              size="small"
              @click="handleExport"
              :loading="exportLoading"
              >导出阅读数据</el-button
            >
          </div>
          <el-table
            :data="articleList"
            v-loading="tableLoading"
            stripe
            @sort-change="handleSort"
            :default-sort="dataSort"
          >
            <el-table-column
              type="index"
              label="#"
              width="60"
              :index="(pageNumber - 1) * pageSize + 1"
            >
            </el-table-column>
            <el-table-column
              prop="person_name"
              sortable="custom"
              label="人员姓名"
              width="100"
            >
            </el-table-column>
            <el-table-column
              prop="article_title"
              sortable="custom"
              label="文章"
            >
            </el-table-column>
            <el-table-column
              prop="goods_type"
              sortable="custom"
              width="100"
              label="类型"
            >
              <template slot-scope="scope">
                <span
                  class="items-type"
                  :style="{
                    background: goodsTypeListCss[scope.row.goods_type]
                      ? goodsTypeListCss[scope.row.goods_type].bg
                      : '',
                    color: goodsTypeListCss[scope.row.goods_type]
                      ? goodsTypeListCss[scope.row.goods_type].color
                      : '',
                  }"
                  >{{ goodsTypeListCss[scope.row.goods_type].text }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="study_phase_name"
              sortable="custom"
              label="学段"
              width="81"
            >
            </el-table-column>
            <el-table-column
              prop="issue_no_name"
              sortable="custom"
              label="来源"
              width="197"
            >
            </el-table-column>
            <el-table-column prop="words" label="词数/长度" width="140">
              <template slot-scope="scope">
                {{
                  scope.row.article_diff_word_count +
                  "/" +
                  scope.row.article_word_count
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="duration"
              sortable="custom"
              label="阅读时长"
              width="140"
            >
              <template slot-scope="scope">
                {{ formatterDuration(scope.row) }}
              </template>
            </el-table-column>
            <el-table-column
              prop="reading_time"
              sortable="custom"
              label="阅读时间"
              width="160"
            >
              <template slot-scope="scope">
                {{
                  scope.row.reading_time
                    ? scope.row.reading_time.substring(0, 16)
                    : "-"
                }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="
              (val) => handleSizeChange(val, 'pageSize', 'pageNumber')
            "
            @current-change="(val) => handleCurrentChange(val, 'pageNumber')"
            :current-page="pageNumber"
            :page-sizes="[10, 20, 30, 40, 50]"
            :page-size="pageSize"
            layout="total, prev, pager, next, sizes, jumper"
            :total="total_count_a"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import Header from "../../components/Header.vue";
import NavMenu from "../../components/NavMenu.vue";
import { getLogin } from "@/api/ajax";
import { formatNumber } from "@/utils/defined";
import { mapState } from "vuex";
import * as echarts from "echarts";
import { formatSeconds } from "@/utils/index";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { Header, NavMenu },
  props: {},
  filters: {
    formatNumber,
  },
  data() {
    //这里存放数据
    return {
      activeMenuIndex: "data_center",
      tableHeight: "", // 表格高度
      tableLoading: false,
      queryTime: this.getCurrentDateTime(),
      curDayStatData: null, // 当日统计数据
      selectedOptions: [],
      dataValue: [
        new Date(new Date().getTime() - 3600 * 1000 * 24 * 7)
          .toISOString()
          .split("T")[0],
        new Date(new Date()).toISOString().split("T")[0],
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      props: { multiple: true },
      pageSize: 10,
      pageNumber: 1,
      articleList: [],
      tableLoading: false,
      total_count_a: 0,
      readInfo: null,
      dataSort: {},
      goodsTypeListCss: {
        2: {
          text: "报纸",
          color: "#165DFF",
          bg: "#E8F7FF",
        },
        21: {
          text: "文章",
          color: "#165DFF",
          bg: "#E8F7FF",
        },
        3: {
          text: "精读",
          color: "#0FC6C2",
          bg: "#E8FFFB",
        },
        0: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        1: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        10: {
          text: "课程",
          color: "#722ED1",
          bg: "#F5E8FF",
        },
        // '5':{
        //     text:'报纸专辑',
        //     color:'#165DFF',
        //     bg:'#E8F7FF'
        // },
        4: {
          text: "画刊",
          color: "#F53F3F",
          bg: "#FFECE8",
        },
      },
      exportLoading: false,
    };
  },
  //计算属性 类似于data概念
  computed: {
    ...mapState(["$provinceCityList"]),
  },
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 420; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.tableHeight = 300;
      } else {
        this.tableHeight = window.innerHeight - tableH;
      }
    },
    // 获取数据
    getData() {
      // 得到当日统计数据
      let MethodName1 = "/ShopServer/Manager/DataStat/GetCurDayStatData";
      getLogin(MethodName1, {}).then((res) => {
        if (res.status === 1) {
          this.curDayStatData = res;
        }
      });
      // 统计用户区域分布（购买物品的用户）
      let MethodName2 =
        "/ShopServer/Manager/DataStat/StatUserAreaDistribution_BuyGoods";
      getLogin(MethodName2, {
        goods_type: -1,
      }).then((res) => {});
    },
    // 获取时间
    getCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = this.padNumber(now.getMonth() + 1); // 月份是从0开始的
      const day = this.padNumber(now.getDate());
      const hours = this.padNumber(now.getHours());
      const minutes = this.padNumber(now.getMinutes());
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    },
    padNumber(num) {
      return num < 10 ? "0" + num : num;
    },
    // 折线图数据
    searchStatDaily() {
      // 统计每日人员数量
      let MethodName3 = "/ShopServer/Manager/DataStat/StatDailyPersonCount";
      let province_id_list = [];
      let city_id_list = [];
      this.selectedOptions.forEach((item) => {
        if (province_id_list.indexOf(item[0]) === -1) {
          province_id_list.push(item[0]);
        }
        city_id_list.push(item[1] ? item[1] : "");
      });
      let data1 = {
        province_id_list: province_id_list,
        city_id_list: city_id_list,
        begin_date:
          this.dataValue && this.dataValue[0] ? this.dataValue[0] : "",
        end_date: this.dataValue && this.dataValue[1] ? this.dataValue[1] : "",
      };
      getLogin(MethodName3, data1).then((res) => {
        let xAxisData = [];
        let yAxisData = [];
        if (res.status === 1) {
          res.date_list.forEach((item) => {
            xAxisData.push(item.date);
            yAxisData.push(item.count);
          });
        }

        const chartDom = document.getElementById("echart1");
        const myChart = echarts.init(chartDom);
        let option = {
          title: {
            text: "用户总数",
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxisData,
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "line",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              type: "line",
              data: yAxisData,
              lineStyle: {
                color: "#4080FF", // 这里设置为红色
                width: 2, // 线条宽度
              },
              smooth: true, // 可选，是否平滑曲线
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(128, 166, 255, 1)", // 渐变颜色，可以设置多个不同的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(128, 166, 255, 0)", // 渐变颜色
                  },
                ]),
              },
            },
          ],
        };
        option && myChart.setOption(option);
      });
      // 统计每日机构数量
      let MethodName4 = "/ShopServer/Manager/DataStat/StatDailyOrgCount";
      getLogin(MethodName4, data1).then((res) => {
        let xAxisData = [];
        let yAxisData = [];
        if (res.status === 1) {
          res.date_list.forEach((item) => {
            xAxisData.push(item.date);
            yAxisData.push(item.count);
          });
        }

        const chartDom = document.getElementById("echart2");
        const myChart = echarts.init(chartDom);
        let option = {
          title: {
            text: "机构总数",
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxisData,
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "line",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              type: "line",
              data: yAxisData,
              lineStyle: {
                color: "#00B2FF", // 这里设置为红色
                width: 2, // 线条宽度
              },
              smooth: true, // 可选，是否平滑曲线
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(3, 186, 226, 1)", // 渐变颜色，可以设置多个不同的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(3, 159, 226, 0)", // 渐变颜色
                  },
                ]),
              },
            },
          ],
        };
        option && myChart.setOption(option);
      });
      // 统计每日累计上课人数
      let MethodName5 =
        "/ShopServer/Manager/DataStat/StatDailyAccCoursePlayPersonCount";
      getLogin(MethodName5, data1).then((res) => {
        let xAxisData = [];
        let yAxisData = [];
        if (res.status === 1) {
          res.date_list.forEach((item) => {
            xAxisData.push(item.date);
            yAxisData.push(item.count);
          });
        }

        const chartDom = document.getElementById("echart3");
        const myChart = echarts.init(chartDom);
        let option = {
          title: {
            text: "累计上课人数",
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxisData,
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "line",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              type: "line",
              data: yAxisData,
              lineStyle: {
                color: "#4080FF", // 这里设置为红色
                width: 2, // 线条宽度
              },
              smooth: true, // 可选，是否平滑曲线
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(128, 166, 255, 1)", // 渐变颜色，可以设置多个不同的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(128, 166, 255, 0)", // 渐变颜色
                  },
                ]),
              },
            },
          ],
        };
        option && myChart.setOption(option);
      });
      // 统计每日累计阅读时长
      let MethodName6 =
        "/ShopServer/Manager/DataStat/StatDailyAccArticleReadingDuration";
      getLogin(MethodName6, data1).then((res) => {
        let xAxisData = [];
        let yAxisData = [];
        if (res.status === 1) {
          res.date_list.forEach((item) => {
            xAxisData.push(item.date);
            yAxisData.push(item.duration);
          });
        }

        const chartDom = document.getElementById("echart5");
        const myChart = echarts.init(chartDom);
        let option = {
          title: {
            text: "平台总阅读时长",
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxisData,
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "line",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              type: "line",
              data: yAxisData,
              lineStyle: {
                color: "#4080FF", // 这里设置为红色
                width: 2, // 线条宽度
              },
              smooth: true, // 可选，是否平滑曲线
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(128, 166, 255, 1)", // 渐变颜色，可以设置多个不同的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(128, 166, 255, 0)", // 渐变颜色
                  },
                ]),
              },
            },
          ],
        };
        option && myChart.setOption(option);
      });
      // 统计每日累计阅读词数
      let MethodName7 =
        "/ShopServer/Manager/DataStat/StatDailyAccArticleReadingWordCount";
      getLogin(MethodName7, data1).then((res) => {
        let xAxisData = [];
        let yAxisData = [];
        if (res.status === 1) {
          res.date_list.forEach((item) => {
            xAxisData.push(item.date);
            yAxisData.push(item.count);
          });
        }

        const chartDom = document.getElementById("echart6");
        const myChart = echarts.init(chartDom);
        let option = {
          title: {
            text: "平台总阅读词数",
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxisData,
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "line",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              type: "line",
              data: yAxisData,
              lineStyle: {
                color: "#00B2FF", // 这里设置为红色
                width: 2, // 线条宽度
              },
              smooth: true, // 可选，是否平滑曲线
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(3, 186, 226, 1)", // 渐变颜色，可以设置多个不同的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(3, 159, 226, 0)", // 渐变颜色
                  },
                ]),
              },
            },
          ],
        };
        option && myChart.setOption(option);
      });
      // 统计每日累计上课人次
      let MethodName8 =
        "/ShopServer/Manager/DataStat/StatDailyAccCoursePlayCount";
      getLogin(MethodName8, data1).then((res) => {
        let xAxisData = [];
        let yAxisData = [];
        if (res.status === 1) {
          res.date_list.forEach((item) => {
            xAxisData.push(item.date);
            yAxisData.push(item.count);
          });
        }

        const chartDom = document.getElementById("echart4");
        const myChart = echarts.init(chartDom);
        let option = {
          title: {
            text: "累计上课人次",
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: xAxisData,
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "line",
              },
            },
          },
          yAxis: {
            type: "value",
            splitLine: {
              // 设置 y 轴分割线为虚线
              show: true,
              lineStyle: {
                type: "dashed",
              },
            },
          },
          series: [
            {
              type: "line",
              data: yAxisData,
              lineStyle: {
                color: "#00B2FF", // 这里设置为红色
                width: 2, // 线条宽度
              },
              smooth: true, // 可选，是否平滑曲线
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(3, 186, 226, 1)", // 渐变颜色，可以设置多个不同的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(3, 159, 226, 0)", // 渐变颜色
                  },
                ]),
              },
            },
          ],
        };
        option && myChart.setOption(option);
      });
      this.getReadList();
    },
    formatterDuration(row) {
      let studyCn = "";
      if (row.duration) {
        studyCn = formatSeconds(row.duration);
      } else {
        studyCn = "0";
      }
      return studyCn;
    },
    handleSizeChange(val, type, page) {
      this[type] = val;
      this[page] = 1;
      this.getReadList();
    },
    handleCurrentChange(val, type) {
      this[type] = val;
      this.getReadList();
    },
    handleSort(value) {
      let dataSort = {
        prop: value.prop,
        order: value.order,
      };
      this.dataSort = dataSort;
      this.getReadList();
    },
    getReadList() {
      // 阅读数据
      let order_column_list = [];
      if (this.dataSort != {}) {
        if (this.dataSort.order == "descending") {
          order_column_list = [this.dataSort.prop + ":desc"];
        } else if (this.dataSort.order == "ascending") {
          // 升序不传值
          order_column_list = [this.dataSort.prop];
        } else {
          order_column_list = ["create_time:desc"];
        }
      } else {
        order_column_list = ["create_time:desc"];
      }
      let province_id_list = [];
      let city_id_list = [];
      this.selectedOptions.forEach((item) => {
        if (province_id_list.indexOf(item[0]) === -1) {
          province_id_list.push(item[0]);
        }
        city_id_list.push(item[1] ? item[1] : "");
      });
      let MethodName9 =
        "/ShopServer/Manager/LogManager/PageQueryReadingRecord_Article";
      let data2 = {
        reading_date_begin:
          this.dataValue && this.dataValue[0] ? this.dataValue[0] : "",
        reading_date_end:
          this.dataValue && this.dataValue[1] ? this.dataValue[1] : "",
        page_capacity: this.pageSize,
        cur_page: this.pageNumber,
        order_column_list: order_column_list,
        province_id_list: province_id_list,
        city_id_list: city_id_list,
      };

      getLogin(MethodName9, data2).then((res) => {
        if (res.status === 1) {
          this.readInfo = res.sum_info;
          this.total_count_a = res.total_count;
          this.articleList = res.reading_record_list;
          if (res.sum_info.duration < 3600) {
            this.readInfo.durationStr = "<1";
          } else {
            this.readInfo.durationStr = Math.ceil(res.sum_info.duration / 3600);
          }
        }
      });
    },
    // 导出阅读数据
    handleExport() {
      let _this = this;
      _this.exportLoading = true;
      let MethodName =
        "/ShopServer/Manager/FileExport/StartCreateArticleReadingRecordExportFile";
      let order_column_list = [];
      if (this.dataSort != {}) {
        if (this.dataSort.order == "descending") {
          order_column_list = [this.dataSort.prop + ":desc"];
        } else if (this.dataSort.order == "ascending") {
          // 升序不传值
          order_column_list = [this.dataSort.prop];
        } else {
          order_column_list = ["create_time:desc"];
        }
      } else {
        order_column_list = ["create_time:desc"];
      }
      let province_id_list = [];
      let city_id_list = [];
      this.selectedOptions.forEach((item) => {
        if (province_id_list.indexOf(item[0]) === -1) {
          province_id_list.push(item[0]);
        }
        city_id_list.push(item[1] ? item[1] : "");
      });
      let data2 = {
        reading_date_begin:
          this.dataValue && this.dataValue[0] ? this.dataValue[0] : "",
        reading_date_end:
          this.dataValue && this.dataValue[1] ? this.dataValue[1] : "",
        page_capacity: this.pageSize,
        cur_page: this.pageNumber,
        order_column_list: order_column_list,
        province_id_list: province_id_list,
        city_id_list: city_id_list,
      };
      getLogin(MethodName, data2)
        .then((res) => {
          let MethodName2 =
            "/ShopServer/Manager/FileExport/GetArticleReadingRecordExportFileTaskProgress";
          let timer = setTimeout(() => {
            getLogin(MethodName2, {
              export_file_task_id: res.export_file_task_id,
            })
              .then((res) => {
                if (res.is_finish === "true") {
                  clearTimeout(timer);
                  timer = null;
                  _this.exportLoading = false;
                  location.href = res.export_file_url;
                }
              })
              .catch((res) => {
                this.loading = false;
              });
          }, 1000);
        })
        .catch((res) => {
          this.loading = false;
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getTableHeight();
    this.getData();
    this.searchStatDaily();
  },
  //生命周期-创建之前
  beforeCreated() {},
  //生命周期-挂载之前
  beforeMount() {},
  //生命周期-更新之前
  beforUpdate() {},
  //生命周期-更新之后
  updated() {},
  //生命周期-销毁之前
  beforeDestory() {},
  //生命周期-销毁完成
  destoryed() {},
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.manage-root-contain-right {
  padding-top: 24px;
  overflow: auto;
}
.top {
  border-radius: 6px;
  background: #2460ff;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-weight: 500;
  align-items: center;
  span {
    font-size: 20px;
    line-height: 28px; /* 140% */
  }
  b {
    font-size: 12px;
    line-height: 20px; /* 166.667% */
  }
}
.day-stat-data {
  display: flex;
  gap: 16px;
  margin-top: 24px;
  flex-flow: wrap;
  .day-item {
    width: calc(50% - 8px);
    border-radius: 6px;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    padding: 16px 40px;
    column-gap: 24px;
    align-items: center;
    p {
      color: #4e5969;

      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      margin: 0;
    }
    .day-item-left {
      flex: 1;
      p {
        margin-bottom: 8px;
      }
      span {
        color: #1d2129;
        font-size: 22px;
        font-weight: 700;
        line-height: 24px;
        b {
          color: #4e5969;
          font-size: 12px;
          font-weight: 400;
          line-height: 20px;
          margin-left: 4px;
        }
      }
    }
    .day-item-center,
    .day-item-right {
      width: 80px;
      text-align: right;
      img {
        width: 16px;
        height: 16px;
      }
      a {
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
      }
      span {
        display: flex;
        justify-content: end;
        align-items: center;
        &.up {
          color: #fc4d42;
        }
        &.flat {
          color: #165dff;
        }
        &.down {
          color: #34b531;
        }
      }
    }
  }
}
.echart-box {
  border-radius: 4px;
  background: #fff;
  margin-top: 24px;
  padding: 16px;
  .echart-require {
    display: flex;
    align-items: center;
    width: 100%;
    column-gap: 8px;
  }
  .cascader-option {
    width: 206px;
    height: 37px;
    :deep .el-input {
      width: 206px;
      height: 37px !important;
    }
  }
  :deep .el-range-editor.el-input__inner {
    height: 37px;
  }
  :deep .el-date-editor .el-range-separator {
    line-height: 30px;
  }
}
.echart-item-box {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  .echart-item {
    width: calc(50% - 8px);
    height: 420px;
    border-radius: 4px;
    background: #f8f9fb;
    padding: 24px;
  }
}
.read-info {
  margin: 20px 0 10px 0;
  display: flex;
  column-gap: 15px;
  flex-flow: wrap;
  align-items: center;
}
:deep th.el-table__cell {
  border-bottom: 1px solid #e5e6eb;
  background: #f2f3f5;
  padding: 8px 0px;
}
:deep .cell {
  word-break: normal;
}
.items-type {
  padding: 1px 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  border-radius: 2px;
}
</style>