提交

src/api/dist/index.dev.js

@@ -1,940 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.advertisementApi = advertisementApi;
-exports.inOutApi = inOutApi;
-exports.epgApi = epgApi;
-exports.liveRealDataMinApi = liveRealDataMinApi;
-exports.liveRealDataApi = liveRealDataApi;
-exports.liveDataApi = liveDataApi;
-exports.heightlightDataApi = heightlightDataApi;
-exports.heightlightApi = heightlightApi;
-exports.list = list;
-exports.listcsv = listcsv;
-exports.channel = channel;
-exports.channelcsv = channelcsv;
-exports.epgList = epgList;
-exports.epgDetail = epgDetail;
-exports.epgResult = epgResult;
-exports.defaultAjax = defaultAjax;
-exports.frequencyList = frequencyList;
-exports.PLList = PLList;
-exports.allDayEpg = allDayEpg;
-exports.overlapSearchTitle = overlapSearchTitle;
-exports.overlap = overlap;
-exports.adChannelList = adChannelList;
-exports.launchList = launchList;
-exports.trendList = trendList;
-exports.proportionList = proportionList;
-exports.customerList = customerList;
-exports.advantageousList = advantageousList;
-exports.potentialList = potentialList;
-exports.saturationList = saturationList;
-exports.allindustryList = allindustryList;
-exports.industryList = industryList;
-exports.byIndustryTrendHard = byIndustryTrendHard;
-exports.byIndustryTrendSoft = byIndustryTrendSoft;
-exports.smallIndustryProportion = smallIndustryProportion;
-exports.MediaShare = MediaShare;
-exports.ChannelDistribution = ChannelDistribution;
-exports.ProgramTypeDistribution = ProgramTypeDistribution;
-exports.ProgramTypeDistributionChart = ProgramTypeDistributionChart;
-exports.ImportantCustomer = ImportantCustomer;
-exports.LastWeekTrend = LastWeekTrend;
-exports.BrandTop = BrandTop;
-exports.ChannelTop = ChannelTop;
-exports.channelRank = channelRank;
-exports.platform = platform;
-exports.platformlistData = platformlistData;
-exports.platformList = platformList;
-exports.guijiLogin = guijiLogin;
-exports.guijiActivity = guijiActivity;
-exports.guijiTopic = guijiTopic;
-exports.guijiSpread = guijiSpread;
-exports.guijiTrend = guijiTrend;
-exports.guijiDepartment = guijiDepartment;
-exports.guijiHottopic = guijiHottopic;
-exports.guijiBumenList = guijiBumenList;
-exports.guijiFagao = guijiFagao;
-exports.leverAudience = leverAudience;
-exports.audioGet = audioGet;
-exports.audioList = audioList;
-
-var _request = _interopRequireDefault(require("@/utils/request.js"));
-
-var _request_axios = _interopRequireDefault(require("@/utils/request_axios.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * 广告
- * @returns {AxjxPromise}
- */
-function advertisementApi(data) {
-  return (0, _request["default"])({
-    url: "/kuyun_eye_ad/cbd_public/perform",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 流入流出
- * @returns {AxjxPromise}
- */
-
-
-function inOutApi(data) {
-  return (0, _request["default"])({
-    url: "/api/recent_inout",
-    method: "get",
-    data: data
-  });
-}
-/**
- * epg
- * @returns {AxjxPromise}
- */
-
-
-function epgApi(data) {
-  return (0, _request["default"])({
-    url: "/api/recent_epgs",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 直播实时 分
- * @returns {AxjxPromise}
- */
-
-
-function liveRealDataMinApi(data) {
-  return (0, _request["default"])({
-    url: "/api/sec_ratings",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 直播实时数据
- * @returns {AxjxPromise}
- */
-
-
-function liveRealDataApi(data) {
-  return (0, _request["default"])({
-    url: "/api/min_ratings",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 直播实时数据
- * @returns {AxjxPromise}
- */
-
-
-function liveDataApi(data) {
-  return (0, _request["default"])({
-    url: "/api/tvlb",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 高光数据
- * @returns {AxjxPromise}
- */
-
-
-function heightlightDataApi(data) {
-  return (0, _request["default"])({
-    url: "/api/hl/calendar",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 高光时刻
- * @returns {AxjxPromise}
- */
-
-
-function heightlightApi(data) {
-  return (0, _request["default"])({
-    url: "/api/hl/list-milestone",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 节目
- * @returns {AxjxPromise}
- */
-
-
-function list(data) {
-  return (0, _request["default"])({
-    url: "/api/proepglb",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 节目导出
- * @returns {AxjxPromise}
- */
-
-
-function listcsv(data) {
-  return (0, _request["default"])({
-    url: "/api/proepglb/csv",
-    method: "get",
-    downCsv: true,
-    data: data
-  });
-}
-/**
- * 频道
- * @returns {AxjxPromise}
- */
-
-
-function channel(data) {
-  return (0, _request["default"])({
-    url: "/api/protvlb",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 频道导出
- * @returns {AxjxPromise}
- */
-
-
-function channelcsv(data) {
-  return (0, _request["default"])({
-    url: "/api/protvlb/csv",
-    method: "get",
-    downCsv: true,
-    data: data
-  });
-}
-/**
- * 获取精品节目列表
- * @props {}
- * @returns {AxjxPromise}
- */
-
-
-function epgList() {
-  return (0, _request["default"])({
-    urlType: "url2",
-    url: "/program",
-    method: "get"
-  });
-}
-/**
- * 获取精品节目详情
- * @props {}
- * @returns {AxjxPromise}
- */
-
-
-function epgDetail(data) {
-  return (0, _request["default"])({
-    urlType: "url2",
-    url: "/epg-detail",
-    method: "get",
-    target: data.target,
-    data: {
-      epgId: data.epgId
-    }
-  });
-}
-/**
- * 获取精品节目指标
- * @props {}
- * @returns {AxjxPromise}
- */
-
-
-function epgResult(data) {
-  return (0, _request["default"])({
-    urlType: "url2",
-    url: "/epg-result",
-    method: "get",
-    data: data
-  });
-}
-/**
- * 自由接口
- * @props {url, data}
- * @return {AxjxPromise}
- */
-
-
-function defaultAjax(props) {
-  return (0, _request["default"])({
-    urlType: "url3",
-    url: props.url,
-    method: "get",
-    notLoad: props.notLoad,
-    target: props.target,
-    data: props.data
-  });
-}
-/**
- * 频率列表
- * @props {}
- * @return {AxjxPromise}
- */
-
-
-function frequencyList() {
-  return (0, _request["default"])({
-    urlType: "url2",
-    url: "/broadcast/dict",
-    method: "get"
-  });
-}
-/**
- * 频率查询
- * @props {}
- * @return {AxjxPromise}
- */
-
-
-function PLList(data) {
-  return (0, _request["default"])({
-    urlType: "url2",
-    url: "/broadcast/list",
-    method: "get",
-    data: data
-  });
-} // 全国接口
-
-/**
- * 频道全天节目
- * 表格查询
- * @props {}
- * @return {AxjxPromise}
- */
-
-
-function allDayEpg(data) {
-  return (0, _request["default"])({
-    urlType: "kuyunApi",
-    url: "/broadcast/list",
-    method: "get",
-    data: data
-  });
-} // 重叠度
-
-/**
- * 节目查询
- * 图表查询
- * @props {}
- * @return {AxjxPromise}
- */
-
-
-function overlapSearchTitle(data) {
-  return (0, _request["default"])({
-    urlType: "kuyunApi",
-    url: "/api/evaluation/eye/search_suggest?" + data,
-    method: "GET"
-  });
-}
-/**
- * 节目重叠度
- * 图表查询
- * @props {}
- * @return {AxjxPromise}
- */
-
-
-function overlap(data) {
-  return (0, _request["default"])({
-    urlType: "kuyunApi",
-    url: "/ProUserOverlapAction",
-    method: "GET",
-    data: data
-  });
-}
-/**
- * 广告频道列表
- * @props {}
- * @return {AxjxPromise}
- */
-
-
-function adChannelList() {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/channel",
-    method: "GET"
-  });
-}
-/**
- * 投放分析
- * @props {string} channelId
- * @props {string} start
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function launchList(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/day",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 时段分析
- * @props {string} channelId
- * @props {string} start
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function trendList(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/hour",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 行业占比
- * @props {string} channelId
- * @props {string} start
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function proportionList(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/ratio",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 客户投放详情
- * @props {string} channelId
- * @props {string} start
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function customerList(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/detail",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 优势客户
- * @props {string} channelId
- * @props {string} start
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function advantageousList(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/youshi",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 潜在客户
- * @props {string} channelId
- * @props {string} start
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function potentialList(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/qianzai",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 饱和度
- * @props {string} channelId
- * @props {string} start
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function saturationList(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/saturation",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 行业列表
- * @return {AxjxPromise}
- */
-
-
-function allindustryList(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/list",
-    method: "GET",
-    data: data
-  });
-}
-/**
- * 全行业
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function industryList(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/market",
-    method: "POST",
-    data: data
-  });
-}
-/***************************************分行业 */
-
-/**
- * 分行业硬广
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function byIndustryTrendHard(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/TrendHard",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 分行业软广
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function byIndustryTrendSoft(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/TrendSoft",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 中小行业占比
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function smallIndustryProportion(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/MSIndustryProportion",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 媒体份额
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function MediaShare(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/MediaShare",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 频道份额
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function ChannelDistribution(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/ChannelDistribution",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 节目类型
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function ProgramTypeDistribution(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/ProgramTypeDistribution",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 节目类型
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function ProgramTypeDistributionChart(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/ProgramTypeDistributionTable",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 重点客户
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function ImportantCustomer(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/ImportantCustomer",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 周走势
- * @props {string} tableType
- * @props {string} indexTime
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function LastWeekTrend(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/industry/LastWeekTrend",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 品牌top
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function BrandTop(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/index/brand",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 品牌top
- * @props {string} dataType
- * @return {AxjxPromise}
- */
-
-
-function ChannelTop(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/index/channel",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 投放分析
- * @props {string} channelId
- * @props {string} start
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function channelRank(data) {
-  return (0, _request["default"])({
-    urlType: "adAPI",
-    url: "/ad/channel/rank",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 获取平台信息数据
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function platform(data) {
-  return (0, _request["default"])({
-    urlType: "url2",
-    url: "/new-media/agg",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 获取平台信息数据
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function platformlistData(data) {
-  return (0, _request["default"])({
-    urlType: "url2",
-    url: "/new-media/list",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 获取平台信息列表
- * @props {string} end
- * @return {AxjxPromise}
- */
-
-
-function platformList(data) {
-  return (0, _request["default"])({
-    urlType: "url2",
-    url: "/new-media/platform",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 归集登录
- * @return {AxjxPromise}
- */
-
-
-function guijiLogin(data) {
-  return (0, _request_axios["default"])({
-    url: "/login-v2",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 归集活动接口
- * @return {AxjxPromise}
- */
-
-
-function guijiActivity(data) {
-  return (0, _request_axios["default"])({
-    url: "/activity/list",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 归集话题
- * @props {string} activityId
- * @return {AxjxPromise}
- */
-
-
-function guijiTopic(data) {
-  return (0, _request_axios["default"])({
-    url: "/topic/list",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 传播数据
- * @props {string} topic
- * @return {AxjxPromise}
- */
-
-
-function guijiSpread(data) {
-  return (0, _request_axios["default"])({
-    url: "/topic/overview?topic=" + data.topic,
-    method: "GET"
-  });
-}
-/**
- * 传播量趋势
- * @props {string} topic
- * @return {AxjxPromise}
- */
-
-
-function guijiTrend(data) {
-  return (0, _request_axios["default"])({
-    url: "/topic/history?topic=" + data.topic,
-    method: "GET"
-  });
-}
-/**
- * 部门传播量排行
- * @props {string} depRange
- * @props {string} title
- * @return {AxjxPromise}
- */
-
-
-function guijiDepartment(data) {
-  return (0, _request_axios["default"])({
-    url: "/topic/read",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 热点报道
- * @props {string} topic
- * @return {AxjxPromise}
- */
-
-
-function guijiHottopic(data) {
-  return (0, _request_axios["default"])({
-    url: "/charts/hot-topic?topic=" + data.topic,
-    method: "GET"
-  });
-}
-/**
- * 部门列表
- * @return {AxjxPromise}
- */
-
-
-function guijiBumenList() {
-  return (0, _request_axios["default"])({
-    url: "/topic/dep-dict",
-    method: "GET"
-  });
-}
-/**
- * 发稿统计
- * @return {AxjxPromise}
- */
-
-
-function guijiFagao(data) {
-  return (0, _request_axios["default"])({
-    url: "/topic/detail",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 发稿统计
- * @return {AxjxPromise}
- */
-
-
-function leverAudience(data) {
-  return (0, _request["default"])({
-    urlType: "leverAudience",
-    url: "/cxzx-program/flow/channels",
-    method: "GET",
-    data: data
-  });
-}
-/**
- * 广播数据
- * @return {AxjxPromise}
- */
-
-
-function audioGet(data) {
-  return (0, _request["default"])({
-    urlType: "leverAudience",
-    url: "/cxzx-radio-rate/radio-rate",
-    method: "POST",
-    data: data
-  });
-}
-/**
- * 广播列表
- * @return {AxjxPromise}
- */
-
-
-function audioList(data) {
-  return (0, _request["default"])({
-    urlType: "leverAudience",
-    url: "/cxzx-radio-rate/radio-names",
-    method: "GET",
-    data: data
-  });
-}

src/api/newMdeiaApi.js

@@ -25,16 +25,28 @@ export function getContentDayList(data) {
   });
 }
 
-
 /**
  * 获取柚媒接口调用信息；
  * @return {AxjxPromise}
  */
 export function getYoumeiList(data) {
-    return ajax({
-      urlType: 'youmei',
-      url: '/search-log',
-      method: 'POST',
-      data,
-    });
-  }
+  return ajax({
+    urlType: 'youmei',
+    url: '/search-log',
+    method: 'POST',
+    data,
+  });
+}
+
+/**
+ * 获取柚媒接口调用占比信息；
+ * @return {AxjxPromise}
+ */
+export function getYoumeiProportion(data) {
+  return ajax({
+    urlType: 'youmei',
+    url: '/user-count',
+    method: 'POST',
+    data,
+  });
+}

src/views/Proofread/index.vue

@@ -1,8 +1,8 @@
 <template>
+  <!-- 给魏演示使用 2023-20-16 -->
   <div class="AbstractProgram">
     <br />
     <el-breadcrumb separator-class="el-icon-arrow-right">
-      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
       <el-breadcrumb-item>稿前校对统计</el-breadcrumb-item>
     </el-breadcrumb>
     <br />
@@ -41,7 +41,13 @@
     </el-card>
     <br />
     <el-card>
-      <el-table :data="tableData" style="width: 100%" :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }">
+      <div id="echartsEle"></div>
+      <br />
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
+      >
         <el-table-column
           show-overflow-tooltip
           align="center"
@@ -75,10 +81,29 @@
 
 <script>
 // @ is an alias to /src
-import { getYoumeiList } from '@/api/newMdeiaApi';
+import { getYoumeiList, getYoumeiProportion } from '@/api/newMdeiaApi';
 import dayjs from 'dayjs';
 
-//   import config from "@/config/index";
+// import config from "@/config/index";
+import * as echarts from 'echarts/core';
+import { PieChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  ToolboxComponent,
+  LegendComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PieChart,
+  CanvasRenderer,
+  ToolboxComponent,
+  LegendComponent,
+]);
 let T = undefined;
 export default {
   name: 'Proofread',
@@ -93,19 +118,21 @@ export default {
         keyword: '',
         time: [],
       },
+      myChart: undefined,
     };
   },
   mounted() {
-    const h = Date.now();
-    const h1 = h - (h % 3600000);
-    const h2 = h - (h % 3600000) - 3600000;
-    const time1 = dayjs(h2).format('YYYY-MM-DD HH:mm:ss');
-    const time2 = dayjs(h1).format('YYYY-MM-DD HH:mm:ss');
+    let h = Date.now();
+    h = h - 86400000;
+    const Time = dayjs(h);
+    const time1 = Time.format('YYYY-MM-DD') + ' 00:00:00';
+    const time2 = Time.format('YYYY-MM-DD') + ' 23:59:59';
     this.form = {
       keyword: '',
       time: [time1, time2],
     };
     this.getDate();
+    this.getEcharts();
   },
   computed: {},
   methods: {
@@ -134,17 +161,52 @@ export default {
           this.load = false;
         });
     },
+    getEcharts() {
+      getYoumeiProportion({
+        keyword: this.form.keyword,
+        startTime: this.form.time[0],
+        endTime: this.form.time[1],
+      }).then(r => {
+        const li = r || [];
+        const ele = document.getElementById('echartsEle');
+        !this.myChart && (this.myChart = echarts.init(ele));
+        this.myChart.resize({
+          height: 400,
+        });
+        this.myChart.setOption({
+          legend: {
+            top: 'bottom',
+          },
+          title: {
+            text: '调用次数占比',
+          },
+          series: [
+            {
+              type: 'pie',
+              radius: [50, 120],
+              center: ['50%', '50%'],
+              data: li.map(v=>{
+                return {
+                    name: v.userId,
+                    value: v.count
+                }
+              }),
+            },
+          ],
+        });
+      });
+    },
     disabledDate(time) {
       return time.getTime() > Date.now();
     },
     change(page) {
       this.page = page;
-      console.log(page);
       this.getDate();
     },
     onSubmit() {
       this.page = 1;
       this.getDate();
+      this.getEcharts();
     },
     onExport() {},
   },
@@ -153,8 +215,17 @@ export default {
 </script>
 
 <style>
+.AbstractProgram {
+    padding: 1em;
+}
 .el-pagination .btn-next .el-icon,
-.el-pagination .btn-prev .el-icon{
-    margin: 0 auto;
+.el-pagination .btn-prev .el-icon {
+  margin: 0 auto;
+}
+#echartsEle {
+  width: 100%;
+  max-width: 800px;
+  min-width: 400px;
+  margin: 0 auto;
 }
 </style>