大屏显示

src/page/statistics/components/borderNums.vue

-<template>
-  <div class="dashbord-list">
-    <p class="tip">
-      <span class="tip-title">页面说明:</span>
-      <span
-        >可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span
-      >
-    </p>
-    <ul>
-      <li v-for="(item, index) in list" :key="index">
-        <div class="title-name">{{ item.label }}</div>
-        <img :src="getImg(item.urlName)" alt="" />
-        <div class="title">
-          <span>
-            <a class="num">{{ item.num }}</a>
-            <a class="unit">{{ item.unit }}</a>
-          </span>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "nums",
-  data() {
-    return {
-      data: [
-        {
-          label: "总播放量",
-          num: 0,
-          unit: "次",
-          urlName: "play",
-          feild: "playCnt",
-        },
-        {
-          label: "单位组织",
-          num: 0,
-          unit: "家",
-          urlName: "org",
-          feild: "orgCnt",
-        },
-        {
-          label: "展板总量",
-          num: 0,
-          unit: "个",
-          urlName: "boardsTotal",
-          feild: "boardCnt",
-        },
-        {
-          label: "互动总量",
-          num: 0,
-          unit: "次",
-          urlName: "interaction",
-          feild: "interactionCnt",
-        },
-      ],
-      list: [],
-    };
-  },
-  mounted() {
-    this.getList()
-  },
-  methods: {
-    getImg(imgUrl) {
-      return require("@/assets/overview/" + imgUrl + ".png");
-    },
-    getList() {
-      this.$https({
-        method: "post",
-        url: "tBoardStatistic/getBoardSurvey",
-        authType: this.backToken,
-      })
-        .then((res) => {
-          if (res.status == 200) {
-            if (res.data.resultCode == 200) {
-              let resData = res.data.data;
-              this.list = [...this.data].map((v) => {
-                v['num'] = resData[v['feild']];
-                return v
-              });
-            } else {
-              this.list = [...this.data];
-            }
-          } else {
-            this.list = [...this.data];
-          }
-        })
-        .catch((err) => {
-          this.$message.error(err.message);
-        });
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.dashbord-list {
-  width: 100%;
-  position: absolute;
-  padding: 0 10px;
-  z-index: 100;
-  .tip {
-    color: @font-color;
-    .tip-title {
-      font-weight: bold;
-      padding-right: 10px;
-    }
-  }
-  ul {
-    display: flex;
-    font-size: 0;
-    justify-content: space-around;
-    li {
-      position: relative;
-      width: 9vw;
-      margin-top: 15px;
-    }
-    img {
-      width: 100%;
-    }
-    .title-name {
-      font-size: 18px;
-      color: @font-color;
-      position: absolute;
-      top: -8px;
-      right: 0;
-    }
-    .title {
-      position: absolute;
-      right: 0.2rem;
-      bottom: 5px;
-      color: @party-white;
-      .num {
-        font-size: 28px;
-      }
-      .unit {
-        font-size: 16px;
-        margin-left: 5px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div class="dashbord-list">
+    <p class="tip">
+      <span class="tip-title">页面说明:</span>
+      <span
+        >可查看当前系统各项数据统计情况。互动频次及点播趋势图展示部分数据，可进入互动统计及趋势分析详情页查看全部数据。</span
+      >
+    </p>
+    <ul>
+      <li v-for="(item, index) in list" :key="index">
+        <div class="title-name">{{ item.label }}</div>
+        <img :src="getImg(item.urlName)" alt="" />
+        <div class="title">
+          <span>
+            <a class="num">{{ item.num }}</a>
+            <a class="unit">{{ item.unit }}</a>
+          </span>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "nums",
+  data() {
+    return {
+      data: [
+        {
+          label: "总播放量",
+          num: 0,
+          unit: "次",
+          urlName: "play",
+          feild: "playCnt",
+        },
+        {
+          label: "单位组织",
+          num: 0,
+          unit: "家",
+          urlName: "org",
+          feild: "orgCnt",
+        },
+        {
+          label: "展板总量",
+          num: 0,
+          unit: "个",
+          urlName: "boardsTotal",
+          feild: "boardCnt",
+        },
+        {
+          label: "互动总量",
+          num: 0,
+          unit: "次",
+          urlName: "interaction",
+          feild: "interactionCnt",
+        },
+      ],
+      list: [],
+    };
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    getImg(imgUrl) {
+      return require("@/assets/overview/" + imgUrl + ".png");
+    },
+    getList() {
+      this.$https({
+        method: "post",
+        url: "tBoardStatistic/getBoardSurvey",
+        authType: this.backToken,
+      })
+        .then((res) => {
+          // console.log(res.data.data)
+          if (res.status == 200) {
+            if (res.data.resultCode == 200) {
+              let resData = res.data.data;
+              this.list = [...this.data].map((v) => {
+                v['num'] = resData[v['feild']];
+                return v
+              });
+            } else {
+              this.list = [...this.data];
+            }
+          } else {
+            this.list = [...this.data];
+          }
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.dashbord-list {
+  width: 100%;
+  position: absolute;
+  padding: 0 10px;
+  z-index: 100;
+  .tip {
+    color: @font-color;
+    .tip-title {
+      font-weight: bold;
+      padding-right: 10px;
+    }
+  }
+  ul {
+    display: flex;
+    font-size: 0;
+    justify-content: space-around;
+    li {
+      position: relative;
+      width: 9vw;
+      margin-top: 15px;
+    }
+    img {
+      width: 100%;
+    }
+    .title-name {
+      font-size: 18px;
+      color: @font-color;
+      position: absolute;
+      top: -8px;
+      right: 0;
+    }
+    .title {
+      position: absolute;
+      right: 0.2rem;
+      bottom: 5px;
+      color: @party-white;
+      .num {
+        font-size: 28px;
+      }
+      .unit {
+        font-size: 16px;
+        margin-left: 5px;
+      }
+    }
+  }
+}
+</style>