提交

package.json

@@ -10,10 +10,12 @@
   "dependencies": {
     "@element-plus/icons": "^0.0.11",
     "@element-plus/icons-vue": "^1.1.3",
+    "axios": "^0.26.1",
     "core-js": "^3.6.5",
     "echarts": "^5.2.1",
     "echarts-wordcloud": "^2.0.0",
     "element-plus": "^1.0.2-beta.36",
+    "js-sha256": "^0.9.0",
     "typescript": "^4.3.5",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0"

src/api/index.js

@@ -1,4 +1,5 @@
 import ajax from "@/utils/request.js";
+import ajaxAxios from "@/utils/request_axios.js";
 
 /**
  * 广告
@@ -647,3 +648,114 @@ export function platformList(data) {
     data,
   });
 }
+
+/**
+ * 归集登录
+ * @return {AxjxPromise}
+ */
+export function guijiLogin(data) {
+  return ajaxAxios({
+    url: "/login-v2",
+    method: "POST",
+    data,
+  });
+}
+
+/**
+ * 归集活动接口
+ * @return {AxjxPromise}
+ */
+export function guijiActivity(data) {
+  return ajaxAxios({
+    url: "/activity/list",
+    method: "POST",
+    data,
+  });
+}
+
+/**
+ * 归集话题
+ * @props {string} activityId
+ * @return {AxjxPromise}
+ */
+export function guijiTopic(data) {
+  return ajaxAxios({
+    url: "/topic/list",
+    method: "POST",
+    data,
+  });
+}
+
+/**
+ * 传播数据
+ * @props {string} topic
+ * @return {AxjxPromise}
+ */
+export function guijiSpread(data) {
+  return ajaxAxios({
+    url: "/topic/overview?topic=" + data.topic,
+    method: "GET",
+  });
+}
+
+/**
+ * 传播量趋势
+ * @props {string} topic
+ * @return {AxjxPromise}
+ */
+export function guijiTrend(data) {
+  return ajaxAxios({
+    url: "/topic/history?topic=" + data.topic,
+    method: "GET",
+  });
+}
+
+/**
+ * 部门传播量排行
+ * @props {string} depRange
+ * @props {string} title
+ * @return {AxjxPromise}
+ */
+export function guijiDepartment(data) {
+  return ajaxAxios({
+    url: "/topic/read",
+    method: "POST",
+    data
+  });
+}
+
+/**
+ * 热点报道
+ * @props {string} topic
+ * @return {AxjxPromise}
+ */
+export function guijiHottopic(data) {
+  return ajaxAxios({
+    url: "/charts/hot-topic?topic=" + data.topic,
+    method: "GET",
+  });
+}
+
+/**
+ * 部门列表
+ * @return {AxjxPromise}
+ */
+export function guijiBumenList() {
+  return ajaxAxios({
+    url: "/topic/dep-dict",
+    method: "GET",
+  });
+}
+
+/**
+ * 发稿统计
+ * @return {AxjxPromise}
+ */
+export function guijiFagao(data) {
+    console.log(data)
+  return ajaxAxios({
+    url: "/topic/detail",
+    method: "POST",
+    data
+  });
+}

src/config/index.js

@@ -1,7 +1,8 @@
 import tableCol from "./tableCol";
 let useApiUrl = "http://172.16.101.20:8762/cxzx-kuyun",
   useApiUrl1 = "http://172.16.101.20:8762/cxzx-program",
-  kuyunApi = "http://172.16.101.20:8762/cxzx-fm";
+  kuyunApi = "http://172.16.101.20:8762/cxzx-fm",
+  guijiApi = "http://topic.smcic.net";
 let base = "";
 // let isRelease = false; //是否是线上发布版本
 if (process.env.NODE_ENV !== "development") {
@@ -19,11 +20,13 @@ export default {
     url2: useApiUrl1,
     url3: "",
     kuyunApi,
+    guijiApi,
     adAPI: "http://topic.smcic.net",
     timeout: 60000,
     // isRelease,
     requestRetry: 4,
     requestRetryDelay: 800,
+    token: ""
   },
   order: {
     ascending: "ASC",

src/utils/request.js

@@ -28,11 +28,19 @@ export default function(ori) {
       xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
     xhttp.open(method, url, true);
     if (method === "POST") {
-      xhttp.setRequestHeader(
-        "Content-Type",
-        "application/json;charset=UTF-8"
-      );
-      xhttp.send(JSON.stringify(ori.data));
+      if (typeof ori.data.append === "function") {
+        xhttp.setRequestHeader(
+          "Content-Type",
+          "multipart/form-data"
+        );
+        xhttp.send(ori.data);
+      } else {
+        xhttp.setRequestHeader(
+          "Content-Type",
+          "application/json;charset=UTF-8"
+        );
+        xhttp.send(JSON.stringify(ori.data));
+      }
     } else {
       xhttp.send();
     }

src/utils/request_axios.js

@@ -0,0 +1,54 @@
+import Axios from "axios";
+import Config from "@/config/index.js";
+
+const service = Axios.create({
+  baseURL: Config.base.guijiApi,
+  headers: {
+    Accept: "*/*"
+  },
+});
+
+service.defaults.retry = Config.requestRetry;
+service.defaults.retryDelay = Config.requestRetryDelay;
+// let LoadingInstance = null;
+
+service.interceptors.request.use(
+  config => {
+    config.headers["Authorization"] = localStorage.getItem("guijiToken");
+    return config;
+  },
+  error => {
+    Promise.reject(error);
+  }
+);
+
+service.interceptors.response.use(
+  res => {
+    //if(LoadingInstance){LoadingInstance.clear();}
+    if (res.status !== 200) {
+      //Toast('数据返回出错');
+      return Promise.reject("响应非200！");
+    } else {
+      if (res.data.code != 0) {
+        if (res.config.closeInterceptors) {
+          return Promise.reject(res.data); //自己处理错误
+        }
+        //统一处理错误
+        return Promise.reject("error");
+      }
+      return res.data.data;
+    }
+  },
+  error => {
+    //if(LoadingInstance){LoadingInstance.clear();}
+    //Toast("网络错误");
+    if (/403/.test(error.toString()))
+      window.parent
+        ? (window.parent.location.href = "/")
+        : (location.href = "/");
+
+    return Promise.reject(error);
+  }
+);
+
+export default service;

src/views/Activity/Activity.vue

@@ -19,7 +19,7 @@
       >
         <component
           :is="item.component"
-          v-if="item.component === select || selectA[item.component]"
+          v-if="item.componentReal === select || selectA[item.componentReal]"
           :item="item"
         ></component>
       </el-tab-pane>
@@ -29,42 +29,16 @@
 
 <script>
 // @ is an alias to /src
-import { defaultAjax } from "@/api/index";
+let sha256 = require("js-sha256").sha256;
+import { guijiLogin, guijiActivity, defaultAjax } from "@/api/index";
 import derunsanqin from "./views/derunsanqin.vue";
+import defaultComponent from "./views/defaultComponent.vue";
 import huashanyunhai from "./views/huashanyunhai.vue";
 import mianmianjiedao from "./views/mianmianjiedao.vue";
 import zhongqiuzhiye from "./views/zhongqiuzhiye.vue";
 import shanxijiaoao1 from "./views/shanxijiaoao1.vue";
 import shanxijiaoao2 from "./views/shanxijiaoao2.vue";
 
-        // {
-        //   name: "2022陕西黄陵中华大祭祖",
-        //   component: "huashanyunhai",
-        // },
-        // {
-        //   name: "我们，从延安走来",
-        //   component: "huashanyunhai",
-        // },
-        // {
-        //   name: "广告大数据",
-        //   component: "huashanyunhai",
-        // },
-        // {
-        //   name: "引汉济渭",
-        //   component: "huashanyunhai",
-        // },
-        // {
-        //   name: "网络春晚",
-        //   component: "huashanyunhai",
-        // },
-        // {
-        //   name: "2022丝路春晚",
-        //   component: "huashanyunhai",
-        // },
-        // {
-        //   name: "西安人的歌2022新春演唱会",
-        //   component: "huashanyunhai",
-        // },
 export default {
   name: "Activity",
   data() {
@@ -76,49 +50,85 @@ export default {
   },
   mounted() {
     if (localStorage.getItem("chinaMap")) this.init();
-    else this.getMap()
+    else this.getMap();
   },
   computed: {},
   methods: {
-    init(){
-      this.activitys = [
+    init() {
+      let from = new FormData();
+      from.append("username", "admin");
+      from.append("sign", sha256("adminabc123456").toLowerCase());
+      if (localStorage.guijiToken) {
+        return guijiActivity().then(topic => {
+          this.getTab(topic);
+        });
+      }
+      guijiLogin(from).then(res => {
+        localStorage.guijiToken = res.token || "";
+        guijiActivity().then(topic => {
+          this.getTab(topic);
+        });
+      });
+    },
+    getMap() {
+      defaultAjax({
+        url:
+          "https://dangjian-web.oss-accelerate-overseas.aliyuncs.com/dj/static/chinaMap.json",
+      }).then(map => {
+        localStorage.setItem("chinaMap", JSON.stringify(map.json));
+        this.init();
+      });
+    },
+    getTab(topic) {
+      let activitys = [];
+      (topic || []).map(v => {
+        activitys.push({
+          isCollectPlatform: v.isCollectPlatform,
+          component: "defaultComponent",
+          componentReal: "defaultComponent" + v.activityId,
+          activityId: v.activityId,
+          realName: v.name,
+          sortNo: v.sortNo,
+          name: v.alias,
+        });
+      });
+      activitys = activitys.concat([
         {
           name: "德润三秦",
           url: ["https://djweb.smcic.net/dj/static/t.json?" + Date.now()],
           component: "derunsanqin",
+          componentReal: "derunsanqin",
         },
         {
           name: "华山云海音乐会",
           component: "huashanyunhai",
+          componentReal: "huashanyunhai",
         },
         {
           name: "面面皆道",
+          componentReal: "mianmianjiedao",
           component: "mianmianjiedao",
         },
         {
           name: "2021中秋之夜",
           component: "zhongqiuzhiye",
+          componentReal: "zhongqiuzhiye",
         },
         {
           name: "我爱我的家乡第二季：陕西骄傲",
           component: "shanxijiaoao2",
+          componentReal: "shanxijiaoao2",
         },
         {
           name: "我爱我的家乡第一季",
           component: "shanxijiaoao1",
+          componentReal: "shanxijiaoao1",
         },
-      ];
-      this.select = (this.activitys[0] || {}).component;
+      ]);
+      this.activitys = activitys;
+      this.select = (this.activitys[0] || {}).componentReal;
       this.selectA[this.select] = true;
     },
-    getMap() {
-      defaultAjax({
-        url: "https://dangjian-web.oss-accelerate-overseas.aliyuncs.com/dj/static/chinaMap.json",
-      }).then(map => {
-        localStorage.setItem("chinaMap", JSON.stringify(map.json));
-        this.init()
-      });
-    },
     selectTab(tab) {
       try {
         this.select = this.activitys[tab.index].component;
@@ -136,6 +146,7 @@ export default {
     zhongqiuzhiye,
     shanxijiaoao1,
     shanxijiaoao2,
+    defaultComponent,
   },
 };
 </script>

src/views/Activity/views/defaultComponent.vue

@@ -0,0 +1,561 @@
+<template>
+  <div class="defaultComponent">
+    <el-row>
+      <el-col :span="6">
+        <div class="card">
+          <div class="cardtit">话题列表</div>
+          <div class="huati">
+            <div v-for="o in huati" :key="o" class="text">
+              {{ o.name }}
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="18">
+        <div class="card">
+          <div class="cardtit">传播数据</div>
+          <el-row>
+            <el-col :span="6" style="padding: 10px;text-align: center">
+              <el-card>
+                <div class="numTitle">{{ numform(shujuTotal.playCount) }}</div>
+                <div class="numValue">总传播量</div>
+              </el-card>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col
+              :span="4"
+              style="padding: 10px;text-align: center"
+              v-for="(item, i) in shuju"
+              :key="i"
+            >
+              <div
+                class="numTitle"
+                :style="'color:' + c[item % (c.length - 1)]"
+              >
+                {{ numform(item) }}
+              </div>
+              <div class="numValue" v-text="i"></div>
+            </el-col>
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="16">
+        <div class="card">
+          <div class="cardtit">传播量趋势</div>
+          <div ref="trendChartEle"></div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="card">
+          <div class="cardtit">传播平台占比</div>
+          <div ref="platformChartEle"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <div class="card">
+      <div class="cardtit">
+        部门传播量排行
+        <el-button-group style="float:right;margin-right: 5px">
+          <el-button
+            :type="typeName === 'ALL' ? 'primary' : 'default'"
+            size="small"
+            @click="rangClick('ALL')"
+          >
+            全部
+          </el-button>
+          <el-button
+            :type="typeName === 'MONTH' ? 'primary' : 'default'"
+            size="small"
+            @click="rangClick('MONTH')"
+          >
+            月
+          </el-button>
+          <el-button
+            :type="typeName === 'WEEK' ? 'primary' : 'default'"
+            size="small"
+            @click="rangClick('WEEK')"
+          >
+            周
+          </el-button>
+        </el-button-group>
+      </div>
+      <div ref="departmentChartEle"></div>
+    </div>
+    <div class="card">
+      <div class="cardtit">热点报道</div>
+      <div style="padding: 10px">
+        <el-table :data="hotList" style="width: 100%">
+          <el-table-column show-overflow-tooltip prop="host" label="部门">
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            prop="subTopic"
+            label="热点话题"
+          >
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            prop="playCount"
+            label="传播量"
+          >
+            <template v-slot="scope">
+              {{ numform(scope.row.playCount) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <div class="card">
+      <div class="cardtit">
+        发稿任务统计
+        <el-select
+          size="small"
+          v-model="select"
+          @change="changeselect"
+          placeholder="请选择频道"
+          style="width: 10em; float: right; margin-right: 10px"
+        >
+          <el-option
+            v-for="item in selectOption"
+            :key="item.id"
+            :label="item.depName"
+            :value="item.depName"
+          />
+        </el-select>
+        <el-date-picker
+          v-model="T"
+          type="daterange"
+          @change="change"
+          style="float: right; margin-right: 10px"
+          value-format="YYYY-MM-DD"
+          range-separator="-"
+          size="small"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </div>
+      <div style="padding: 20px">
+        <el-table :data="userlist" style="width: 100%">
+          <el-table-column show-overflow-tooltip prop="depName" label="部门">
+          </el-table-column>
+          <el-table-column show-overflow-tooltip prop="name" label="账号">
+          </el-table-column>
+          <el-table-column show-overflow-tooltip prop="platform" label="平台">
+          </el-table-column>
+          <el-table-column
+            show-overflow-tooltip
+            prop="publishTime"
+            label="发稿时间"
+          >
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          style="margin-top: 5px"
+          background
+          layout="total, prev, pager, next"
+          :total="total"
+          :current-page="page"
+          @current-change="pagechange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import {
+  guijiTopic,
+  guijiSpread,
+  guijiTrend,
+  guijiDepartment,
+  guijiHottopic,
+  guijiBumenList,
+  guijiFagao,
+} from "@/api/index";
+
+import * as echarts from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  GridComponent,
+  ToolboxComponent,
+  VisualMapComponent,
+  LegendComponent,
+} from "echarts/components";
+import { LabelLayout, UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  GridComponent,
+  LineChart,
+  CanvasRenderer,
+  ToolboxComponent,
+  VisualMapComponent,
+  LabelLayout,
+  UniversalTransition,
+  LegendComponent,
+]);
+let lineH = 0;
+export default {
+  name: "defaultComponent",
+  props: ["item"],
+  data() {
+    return {
+      pageSize: 10,
+      page: 1,
+      total: 0,
+      typeName: "ALL",
+      huati: [],
+      shuju: {},
+      hotList: [],
+      selectOption: [],
+      userlist: [],
+      chart1: undefined,
+      chart2: undefined,
+      chart3: undefined,
+      T: [],
+      select: "",
+      shujuTotal: {
+        playCount: 0,
+      },
+      c: ["#FB6161", "#EC72DC", "#F98E53", "#49BED0", "#4BCA8B"],
+    };
+  },
+  filters: {},
+  mounted() {
+    this.page = 1;
+    this.pageSize = 10;
+    let D = new Date(),
+      Year = D.getFullYear(),
+      Month = D.getMonth() + 1,
+      Day = D.getDate();
+    let oD = new Date(Date.now() - 86400000 * 30),
+      oYear = oD.getFullYear(),
+      oMonth = oD.getMonth() + 1,
+      oDay = oD.getDate();
+    Month > 9 ? "" : Month = '0' + Month;
+    Day > 9 ? "" : Day = '0' + Day;
+    oMonth > 9 ? "" : oMonth = '0' + oMonth;
+    oDay > 9 ? "" : oDay = '0' + oDay;
+    this.T = [
+      [oYear, oMonth, oDay].join("-"),
+      [Year, Month, Day].join("-"),
+    ];
+    console.log(this.T);
+
+    Promise.all([
+      guijiTopic({
+        activityId: this.item.activityId,
+      }),
+      guijiSpread({
+        topic: this.item.realName,
+      }),
+      guijiTrend({
+        topic: this.item.realName,
+      }),
+      guijiDepartment({
+        depRange: this.typeName,
+        title: this.item.realName,
+      }),
+      guijiHottopic({
+        topic: this.item.realName,
+      }),
+      guijiBumenList(),
+    ]).then(li => {
+      this.huati = li[0] || [];
+      this.shujuTotal = li[1][0] || {};
+      let shuju = {};
+      for (let i = 1; i < (li[1] || []).length; i++) {
+        const v = (li[1] || [])[i] || {};
+        if (!shuju[v.platform]) {
+          shuju[v.platform] = v.playCount || 0;
+        } else {
+          shuju[v.platform] += v.playCount || 0;
+        }
+      }
+      this.shuju = shuju;
+      this.hotList = li[4] || [];
+      this.selectOption = li[5] || [];
+      this.selectOption = [{ depName: "全部", id: 0 }, ...this.selectOption];
+      this.select = this.selectOption[0].depName;
+      this.trendChart(li[2] || []);
+      this.platformChar(shuju || {});
+      this.departmentChar(li[3] || []);
+      this.getRult();
+    });
+  },
+  computed: {},
+  methods: {
+    numform(text) {
+      let num = text;
+      if (isNaN(text)) num = "0";
+      if (text >= 100000000) num = (text / 100000000).toFixed(2) - 0 + "亿";
+      else if (text >= 10000) num = (text / 10000).toFixed(2) - 0 + "万";
+      else num = num + "";
+      return num;
+    },
+    rangClick(type) {
+      guijiDepartment({
+        depRange: type,
+        title: this.item.realName,
+      }).then(res => {
+        this.typeName = type;
+        this.departmentChar(res || []);
+      });
+    },
+    trendChart(li) {
+      this.chart1 = echarts.init(this.$refs.trendChartEle);
+      lineH = (this.$refs.trendChartEle.offsetWidth * 9) / 16;
+      this.chart1.resize({
+        height: (this.$refs.trendChartEle.offsetWidth * 9) / 16,
+      });
+      const keys = [],
+        val = [];
+      (li || []).map(v => {
+        keys.push(v.dt);
+        val.push(v.playCount);
+      });
+      this.chart1.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: v => {
+            return v.name + ":" + this.numform(v.data);
+          },
+        },
+        legend: {
+          show: false,
+        },
+        xAxis: {
+          type: "category",
+          data: keys,
+        },
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: v => {
+              return this.numform(v);
+            },
+          },
+        },
+        series: [
+          {
+            data: val,
+            type: "line",
+            smooth: true,
+          },
+        ],
+      });
+    },
+    platformChar(obj) {
+      this.chart2 = echarts.init(this.$refs.platformChartEle);
+      let w = this.$refs.platformChartEle.offsetWidth || 0;
+      this.chart2.resize({
+        height: lineH,
+      });
+      const val = [];
+      Object.keys(obj).map(v => {
+        val.push({
+          name: v,
+          value: obj[v],
+        });
+      });
+      this.chart2.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: v => {
+            return v.name + ":" + this.numform(v.value);
+          },
+        },
+        legend: {
+          show: false,
+        },
+        series: [
+          {
+            type: "pie",
+            radius: [20, 60],
+            left: "center",
+            width: 400,
+            itemStyle: {
+              borderColor: "#fff",
+              borderWidth: 1,
+            },
+            label: {
+              alignTo: "edge",
+              formatter: "{name|{b}}\n{time|{d} %}",
+              minMargin: 5,
+              edgeDistance: 10,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: "#999",
+                },
+              },
+            },
+            labelLine: {
+              length: 15,
+              length2: 0,
+              maxSurfaceAngle: 80,
+            },
+            labelLayout: function(params) {
+              const isLeft = params.labelRect.x < w / 2;
+              const points = params.labelLinePoints;
+              // Update the end point.
+              points[2][0] = isLeft
+                ? params.labelRect.x
+                : params.labelRect.x + params.labelRect.width;
+              return {
+                labelLinePoints: points,
+              };
+            },
+            data: val,
+          },
+        ],
+      });
+    },
+    departmentChar(li) {
+      if (!this.chart3) {
+        this.chart3 = echarts.init(this.$refs.departmentChartEle);
+        this.chart3.resize({
+          height: (this.$refs.departmentChartEle.offsetWidth * 9) / 16,
+        });
+      }
+      const val = [],
+        key = [];
+      let l = li.sort((a, b) => {
+        return a.readCount - b.readCount;
+      });
+
+      l.map(v => {
+        key.push(v.depName);
+        val.push(v.readCount);
+      });
+      this.chart3.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: v => {
+            return v.name + ":" + this.numform(v.value);
+          },
+        },
+        legend: {
+          show: false,
+        },
+        xAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: v => {
+              return this.numform(v);
+            },
+          },
+        },
+        yAxis: {
+          data: key,
+          type: "category",
+        },
+        series: [
+          {
+            type: "bar",
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "#6fccd0" },
+                { offset: 0.3, color: "#48b1e5" },
+                { offset: 1, color: "#1890ff" },
+              ]),
+            },
+            data: val,
+          },
+        ],
+      });
+    },
+    pagechange(p) {
+      this.page = p || 1;
+      this.getRult();
+    },
+    getRult() {
+      let p = {
+        page: this.page,
+        pageSize: this.pageSize,
+        endTime: this.T[1],
+        startTime: this.T[0],
+        title: this.item.realName,
+      };
+      this.select && this.select !== "全部" && (p.depName = this.select);
+      guijiFagao(p).then(res => {
+        const { total, data } = res;
+        this.userlist = data || [];
+        this.total = total;
+      });
+    },
+    changeselect() {
+      this.getRult();
+    },
+    change(v) {
+      this.T = v;
+    },
+  },
+  beforeUnmount: function() {},
+  components: {},
+};
+</script>
+
+<style>
+.defaultComponent {
+  padding-top: 5px;
+  min-width: 1100px;
+}
+.defaultComponent .card {
+  border-radius: 5px;
+  background: #fff;
+  padding: 8px 0 11px 0;
+  margin: 0 5px 5px 5px;
+  box-shadow: 0 0 5px #eee;
+}
+.defaultComponent .cardtit {
+  border-left: 3px solid #1a89b3;
+  padding-left: 5px;
+  height: 25px;
+  line-height: 25px;
+}
+.defaultComponent .huati {
+  height: 12em;
+  overflow-y: auto;
+}
+.defaultComponent .text {
+  color: #666;
+  cursor: pointer;
+  border-radius: 10px;
+  padding: 10px 24px;
+  font-size: 14px;
+  padding-right: 20px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+}
+.defaultComponent .numTitle {
+  font-size: 24px;
+  height: 1em;
+  line-height: 1em;
+  color: #1a89b3;
+  font-weight: bold;
+}
+.defaultComponent .numValue {
+  margin-top: 8px;
+  font-size: 14px;
+  color: #919191;
+}
+.defaultComponent .el-table {
+  color: #3b3b3b;
+}
+.defaultComponent .el-table__header-wrapper {
+  border-radius: 5px;
+  overflow: hidden;
+}
+.defaultComponent .has-gutter th {
+  background: #eceff5;
+  color: #3b3b3b;
+}
+</style>