提交

src/views/report/Calendar/index.vue

@@ -1,9 +1,65 @@
 <template>
   <div class="tv-list" :style="'font-size:' + fontSize + 'px'">
     <div class="content">
-      <div class="group">
-        <p class="headTitle">全剧每集评价收视率1.390%</p>
+      <img
+        src="@/assets/image/top.png"
+        alt=""
+        style="
+          width: 79vw;
+          max-width: 527px;
+          display: block;
+          margin: 3.6vh auto 0 auto;
+        "
+      />
+      <div
+        class="group"
+        v-for="(item, index) in dataOne"
+        :key="item.title + index"
+      >
+        <p class="headTitle" v-text="item.title"></p>
+
+        <!-- 月历主页 -->
+        <div class="monthlyCalendar">
+          <div class="title" v-text="item.Month"></div>
+
+          <div class="CalenMain">
+            <div class="CalenRow CalenHead">
+              <div class="CalenCol">MON</div>
+              <div class="CalenCol">TUE</div>
+              <div class="CalenCol">WED</div>
+              <div class="CalenCol">THU</div>
+              <div class="CalenCol">FRI</div>
+              <div class="CalenCol">SAT</div>
+              <div class="CalenCol">SUN</div>
+            </div>
+            <div
+              class="CalenRow CalenBody"
+              v-for="(v, i) in item.data"
+              :key="i"
+            >
+              <div v-for="(son, o) in v" :key="o" class="CalenCol">
+                <div v-if="son">
+                  <div class="dayDate">
+                    <div class="dayDate_son">{{ son.day }}</div>
+                  </div>
+
+                  <div class="text" v-text="son.value"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
+      <img
+        src="@/assets/image/logo.png"
+        style="
+          width: 18.8vw;
+          max-width: 125px;
+          margin: 1em auto;
+          display: block;
+        "
+        alt=""
+      />
     </div>
     <div class="bottom content">
       本数据由“陕西广电融媒体集团大数据平台”提供。
@@ -18,6 +74,7 @@
 <script>
 // @ is an alias to /src
 import watermark from "watermark-package";
+import DayJs from "dayjs";
 // import {} from "../utils/tool";
 import { jsonCalendarOne } from "../../../api/index";
 
@@ -28,6 +85,16 @@ export default {
   data() {
     return {
       fontSize: 17,
+      dataOne: [],
+      weeks: {
+        MON: 1,
+        TUE: 2,
+        WED: 3,
+        THU: 4,
+        FRI: 5,
+        SAT: 6,
+        SUN: 7,
+      },
     };
   },
   watch: {},
@@ -49,13 +116,45 @@ export default {
       date: this.$route.params.date,
       time: Date.now(),
     }).then(res => {
-      console.log(res);
+      let dataOne = res || [];
+      for (let i = 0; i < dataOne.length; i++) {
+        const li = [];
+        const v = dataOne[i];
+        // 判断第一天是周几，不是周一向前补到周一，最后一天不是周日补到周日
+        const Month = JSON.parse(JSON.stringify(v.data || []));
+        v.Month = this.getMonth(v.data[0].dt);
+        for (let o = 0; o < Month.length; o++) {
+          const item = Month[o];
+          const dt = new DayJs(item.dt);
+          Month[o].week = dt.format("ddd").toLocaleUpperCase();
+          Month[o].weekNum = dt.format("d") === 0 ? 7 : dt.format("d");
+          Month[o].day = dt.format("D");
+          if (o % 7 === 0) li.push([]);
+          const li_index = li.length ? li.length - 1 : 0;
+          li[li_index].push(Month[o]);
+        }
+        if (Month[0].weekNum !== 1)
+          li[0].unshift(...new Array(Month[0].weekNum - 1));
+        const li_out_index = li.length ? li.length - 1 : 0;
+        if (Month.reverse()[0].weekNum !== 7)
+          li[li_out_index].push(...new Array(7 - Month[0].weekNum));
+        v.data = li;
+      }
+      console.log(dataOne);
+      this.dataOne = dataOne;
     });
   },
   computed: {},
-  methods: {},
+  methods: {
+    getMonth(date) {
+      if (!date) return "";
+      let out = new DayJs(date);
+      return out.format("YYYY年MM月");
+    },
+  },
   beforeUnmount() {},
-  components: {},
+  components: {
+  },
 };
 </script>
 
@@ -64,7 +163,7 @@ export default {
   background-color: #f5b379;
   padding: 5px;
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   box-sizing: border-box;
 }
 .bottom {
@@ -81,12 +180,100 @@ export default {
   max-width: 667px;
 }
 
+.group {
+  margin-bottom: 2em;
+}
+
 .headTitle {
-    text-align: center;
-  color: #c77838;
-  text-stroke: 1px #fff;
-  /* 兼容Webkit(Chrome/Safari)内核浏览器的写法 */
-  -webkit-text-stroke: 1px #fff;
+  font-size: 1.3rem;
+  text-align: center;
+  font-family: SourceHanSansCN;
+  font-weight: bold;
+  color: #be651a;
+  line-height: 30px;
+  -webkit-text-stroke: 1px #fbf3f1;
+  text-stroke: 1px #fbf3f1;
+}
+
+.headSubTitle {
+  text-align: center;
+  font-size: 1.2rem;
+  font-family: SourceHanSansCN;
+  font-weight: 400;
+  color: #a22626;
+  line-height: 30px;
+}
+
+.monthlyCalendar {
+  background-image: url("../../../assets/image/C_bg.png");
+  background-size: 100% 100%;
+  width: 100%;
+  padding: 2em 1px 0 1px;
+  max-width: 614px;
+  margin: 0 auto;
+  /* width: 92vw;
+    height: 117vw; */
+}
+
+.title {
+  font-size: 1.5rem;
+  font-family: STHupo;
+  font-weight: 400;
+  line-height: 30px;
+  padding: 5px;
+}
+
+.CalenRow {
+  display: flex;
+  overflow: hidden;
+}
+.CalenCol {
+  flex: 1;
+  text-align: center;
+}
+.CalenHead {
+  font-size: 1.01rem;
+  height: 1.5em;
+  line-height: 1.5em;
+  font-weight: 400;
+  color: #fff;
+  background-color: #dc721a;
+  border-radius: 2em;
+}
+
+.dayDate {
+  padding: 0 5px;
+  box-sizing: border-box;
+  width: 1.5em;
+  height: 1.5em;
+  line-height: 1.5em;
+  font-size: 1.3rem;
+  font-family: Adobe Heiti Std;
+  font-weight: normal;
+  color: #c31212;
+  background-color: #f4f4f4;
+  transform: rotate(45deg);
+  margin: 0 auto;
+}
+
+.dayDate_son {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-45deg);
+}
+
+.CalenBody .CalenCol {
+  padding: 10px 0;
+}
+.text {
+  background-image: url("../../../assets/image/text.png");
+  background-size: 100% 100%;
+  margin: 0.5em 3px 0 3px;
+  height: 1.3em;
+  line-height: 1.3em;
+  padding: 0 3px;
+  color: #c31212;
+  font-size: 0.8rem;
 }
 </style>
 <style></style>

src/views/report/Mobile/index.vue

@@ -2,21 +2,25 @@
   <div style="font-size: 0; background-color: #fff">
     <div class="content">
       <img
-        :src="'https://cxzx.smcic.net/zhoubao/assets/moblie'+ $route.params.date +'.jpg'"
+        :src="
+          'https://cxzx.smcic.net/zhoubao/assets/moblie' +
+          $route.params.date +
+          '.jpg'
+        "
         width="100%"
         class="content"
         style="margin-bottom: 1em; display: block"
         alt=""
       />
-    <p
-      class="content"
-      :style="
-        'text-indent: 2em; font-weight: 700; padding: 0.5em 3px;font-size: ' +
-        fontSize +
-        'px;'
-      "
-      v-html="desc"
-    ></p>
+      <p
+        class="content"
+        :style="
+          'text-indent: 2em; font-weight: 700; padding: 0.5em 3px;font-size: ' +
+          fontSize +
+          'px;'
+        "
+        v-html="desc"
+      ></p>
     </div>
     <div class="tv-list" :style="'font-size:' + fontSize + 'px'">
       <div class="content">
@@ -140,13 +144,25 @@
                     >
                       <template #label>
                         <div style="font-size: 14px; color: #000">
-                          <van-tag size="large" type="success" style="margin-right: 3px">
+                          <van-tag
+                            size="large"
+                            type="success"
+                            style="margin-right: 3px"
+                          >
                             发稿量：{{ timeFormat(v.publish_count) }}
                           </van-tag>
-                          <van-tag size="large" type="danger" style="margin-right: 3px">
+                          <van-tag
+                            size="large"
+                            type="danger"
+                            style="margin-right: 3px"
+                          >
                             阅读量：{{ timeFormat(v.read_count) }}
                           </van-tag>
-                          <van-tag size="large" type="warning" style="margin-right: 3px">
+                          <van-tag
+                            size="large"
+                            type="warning"
+                            style="margin-right: 3px"
+                          >
                             环比：{{ v.read_huanbi || 0 }}%
                           </van-tag>
                         </div>
@@ -160,7 +176,7 @@
                   v-for="(v, i) in ratios.article"
                   :key="i"
                   title-style="flex: 3"
-                  :title="(i + 1) + '、' + v.title"
+                  :title="i + 1 + '、' + v.title"
                 >
                   <template #label>
                     <van-tag size="large" type="primary"
@@ -174,11 +190,19 @@
           </van-popup>
         </van-cell-group>
         <van-cell-group border title="热门话题">
+          <p
+            :style="
+              'text-indent: 2em; font-weight: 700; padding: 0.5em 3px;font-size: ' +
+              fontSize +
+              'px;'
+            "
+            v-html="topic_desc"
+          ></p>
           <van-cell
             v-for="(v, i) in topic"
             :key="i"
             title-style="flex: 3"
-            :title="(i + 1) + '、' + v.topic"
+            :title="i + 1 + '、' + v.topic"
           >
             <template #label>
               <van-tag size="large" type="primary"
@@ -193,7 +217,7 @@
             v-for="(v, i) in article"
             :key="i"
             title-style="flex: 3"
-            :title="(i + 1) + '、' + v.title"
+            :title="i + 1 + '、' + v.title"
           >
             <template #label>
               <van-tag size="large" type="primary"
@@ -260,7 +284,8 @@ export default {
       echarts: undefined,
       dayEcharts: undefined,
       width: document.body.offsetWidth || 0,
-      desc: ""
+      desc: "",
+      topic_desc: "",
     };
   },
   watch: {},
@@ -287,6 +312,7 @@ export default {
       this.dep = res.dep || [];
       this.topic = res.topic || [];
       this.desc = res.desc || "";
+      this.topic_desc = res.topic_desc || "";
     });
   },
   computed: {},
@@ -372,7 +398,7 @@ export default {
   background-color: #fff;
   padding: 5px;
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   box-sizing: border-box;
 }
 .bottom {
@@ -430,4 +456,10 @@ export default {
   color: #000;
   font-weight: 600;
 }
+.van-tab,
+.van-cell,
+.van-cell__label {
+  font-size: 1rem;
+  color: #000;
+}
 </style>

src/views/report/Traditional/index.vue

@@ -517,7 +517,7 @@ export default {
   background-color: #fff;
   padding: 5px;
   height: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   box-sizing: border-box;
 }
 .bottom {