提交

src/views/report/Calendar/index.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="tv-list" :style="'font-size:' + fontSize + 'px'">
-    <div class="content">
+  <div class="calendar" :style="'font-size:' + fontSize + 'px'">
+    <div
+      class="group content bg"
+      v-for="(item, index) in dataOne"
+      :key="item.title + index"
+    >
       <img
-        src="@/assets/image/top.png"
+        :src="item.img_url"
         alt=""
         style="
           width: 79vw;
@@ -11,62 +15,64 @@
           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 v-if="item.data.length">
-          <div v-for="(v1, i1) in item.data" :key="i1">
-            <!-- 月历主页 -->
-            <div class="monthlyCalendar">
-              <div class="title" v-text="v1.month"></div>
+      <p class="headTitle" v-text="item.title"></p>
+      <div v-if="item.data.length">
+        <div v-for="(v1, i1) in item.data" :key="i1">
+          <!-- 月历主页 -->
+          <div class="monthlyCalendar">
+            <div class="title" v-text="v1.month"></div>
 
-              <div class="CalenMain">
-                <div class="CalenRow CalenHead">
-                  <div class="CalenCol">
-                    <p>一</p>
-                    <p>MON</p>
-                  </div>
-                  <div class="CalenCol">
-                    <p>二</p>
-                    <p>TUE</p>
-                  </div>
-                  <div class="CalenCol">
-                    <p>三</p>
-                    <p>WED</p>
-                  </div>
-                  <div class="CalenCol">
-                    <p>四</p>
-                    <p>THU</p>
-                  </div>
-                  <div class="CalenCol">
-                    <p>五</p>
-                    <p>FRI</p>
-                  </div>
-                  <div class="CalenCol">
-                    <p>六</p>
-                    <p>SAT</p>
-                  </div>
-                  <div class="CalenCol">
-                    <p>日</p>
-                    <p>SUN</p>
-                  </div>
+            <div class="CalenMain">
+              <div class="CalenRow CalenHead">
+                <div class="CalenCol">
+                  <p>一</p>
+                  <p>MON</p>
+                </div>
+                <div class="CalenCol">
+                  <p>二</p>
+                  <p>TUE</p>
+                </div>
+                <div class="CalenCol">
+                  <p>三</p>
+                  <p>WED</p>
+                </div>
+                <div class="CalenCol">
+                  <p>四</p>
+                  <p>THU</p>
+                </div>
+                <div class="CalenCol">
+                  <p>五</p>
+                  <p>FRI</p>
+                </div>
+                <div class="CalenCol">
+                  <p>六</p>
+                  <p>SAT</p>
+                </div>
+                <div class="CalenCol">
+                  <p>日</p>
+                  <p>SUN</p>
                 </div>
-                <div
-                  class="CalenRow CalenBody"
-                  v-for="(v, i) in v1.list"
-                  :key="i"
-                >
-                  <div v-for="(son, o) in v" :key="o" class="CalenCol">
-                    <div v-if="son" style="color: #000">
-                        
-                      <div class="dayDate">
-                        <div class="dayDate_son" :style="son.weeks == 0 || son.weeks == 6 ? 'color:#c31212':''">{{ son.day }}</div>
+              </div>
+              <div
+                class="CalenRow CalenBody"
+                v-for="(v, i) in v1.list"
+                :key="i"
+              >
+                <div v-for="(son, o) in v" :key="o" class="CalenCol">
+                  <div v-if="son" style="color: #000">
+                    <div class="dayDate">
+                      <div
+                        class="dayDate_son"
+                        :style="
+                          son.weeks == 0 || son.weeks == 6
+                            ? 'color:#c31212'
+                            : ''
+                        "
+                      >
+                        {{ son.day }}
                       </div>
-                      <div class="text" v-text="son.value"></div>
                     </div>
+                    <div class="text" v-text="son.value"></div>
                   </div>
                 </div>
               </div>
@@ -74,17 +80,12 @@
           </div>
         </div>
       </div>
-      <img
-        src="@/assets/image/logo.png"
-        style="
-          width: 18.8vw;
-          max-width: 125px;
-          margin: 1em auto;
-          display: block;
-        "
-        alt=""
-      />
     </div>
+    <img
+      src="@/assets/image/logo.png"
+      style="width: 18.8vw; max-width: 125px; margin: 1em auto; display: block"
+      alt=""
+    />
     <div class="bottom content">
       本数据由“陕西广电融媒体集团大数据平台”提供。
       <p>
@@ -141,25 +142,26 @@ export default {
               : undefined;
           if (item2 === undefined) continue;
           const dayjs_Start =
-            item2.list[0] && item2.list[0].dt ? new DayJs(item2.list[0].dt) : undefined;
-          const item2_Length = item2.list.length ? item2.list.length - 1 : 0;
-          const dayjs_Last =
-            item2.list[item2_Length] 
-              ? new DayJs(item2.list[item2_Length].dt)
+            item2.list[0] && item2.list[0].dt
+              ? new DayJs(item2.list[0].dt)
               : undefined;
+          const item2_Length = item2.list.length ? item2.list.length - 1 : 0;
+          const dayjs_Last = item2.list[item2_Length]
+            ? new DayJs(item2.list[item2_Length].dt)
+            : undefined;
           let first = dayjs_Start ? dayjs_Start.format("d") : undefined;
           let last = dayjs_Last ? dayjs_Last.format("d") : undefined;
           last && last != 0 && (last = 7 - last);
           first && dataOne[i].data[o].list.unshift(...new Array(first - 1));
           last && dataOne[i].data[o].list.push(...new Array(last - 0));
-          let li = []
+          let li = [];
           for (let p = 0; p < dataOne[i].data[o].list.length; p++) {
             const item3 = dataOne[i].data[o].list[p] || undefined;
-            if(p%7 === 0) li.push([]);
+            if (p % 7 === 0) li.push([]);
             let end = li.length ? li.length - 1 : 0;
-            if(!item3) {
-                li[end].push(undefined);
-                continue;
+            if (!item3) {
+              li[end].push(undefined);
+              continue;
             }
             let dt3 = new DayJs(item3.dt);
             item3.day = dt3.format("D");
@@ -180,7 +182,7 @@ export default {
 </script>
 
 <style scoped>
-.tv-list {
+.calendar {
   background-color: #f5b379;
   padding: 5px;
   height: 100%;
@@ -225,10 +227,17 @@ export default {
   line-height: 30px;
 }
 
+.bg {
+  background-image: url("../../../assets/image/bg.png");
+  background-size: 100% 100%;
+  padding-bottom: 1.5em;
+}
+
 .monthlyCalendar {
   background-image: url("../../../assets/image/C_bg.png");
   background-size: 100% 100%;
   width: 100%;
+  height: calc((100% - 10px) * 1.5);
   padding: 1.5em 1px 0 1px;
   max-width: 614px;
   margin: 0 auto;
@@ -242,7 +251,7 @@ export default {
   font-family: STHupo;
   font-weight: 600;
   line-height: 30px;
-  padding: 15px 5px;
+  padding: 1em 5px 1em 5px;
 }
 
 .CalenRow {
@@ -252,7 +261,7 @@ export default {
 .CalenCol {
   flex: 1;
   text-align: center;
-  border-left:1px solid #fff;
+  border-left: 1px solid #fff;
 }
 .CalenHead {
   font-size: 1.01rem;
@@ -286,15 +295,15 @@ export default {
 }
 
 .CalenBody .CalenCol {
-  padding: 10px 0;
+  padding: 5px 0;
   border-left: 1px solid #eee;
   border-bottom: 1px solid #eee;
 }
 .text {
   background-image: url("../../../assets/image/text.png");
   background-size: 100% 100%;
-  margin: 0.5em 1px 0 1px;
-  font-size: 1rem;
+  margin-top: 0.5em;
+  font-size: 0.9rem;
   height: 1.3em;
   line-height: 1.3em;
   color: #c31212;

src/views/report/Mobile/index.vue

@@ -33,12 +33,14 @@
               <!-- td2 :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'" -->
               <van-col span="5" class="td"> 发稿量(条) </van-col>
               <van-col span="2" class="td">
-                <img
-                  src="../../../assets/image/shou.gif"
-                  width="35px"
-                  alt=""
-                  style="vertical-align: middle"
-                />
+                <div style="width: 35px; height: 35px; overflow: hidden">
+                  <img
+                    src="../../../assets/image/shou.gif"
+                    width="70px"
+                    alt=""
+                    style="vertical-align: middle;margin-top: -20px;margin-left: -30px;transform: rotate(45deg);"
+                  />
+                </div>
               </van-col>
             </van-row>
           </div>
@@ -103,57 +105,34 @@
               <van-row>
                 <van-col span="7" class="td"> 发稿量： </van-col>
                 <van-col span="5" class="td">
-                  {{ratios.publish_count}}
+                  {{ ratios.publish_count }}
                 </van-col>
                 <van-col span="7" class="td"> 阅读量： </van-col>
                 <van-col span="5" class="td">
-                  {{ratios.read_count}}
+                  {{ ratios.read_count }}
                 </van-col>
               </van-row>
               <van-cell-group border title="平台账号">
-                <van-tabs v-model="active">
-                  <van-tab
-                    :title="index"
-                    v-for="(item, index) in ratios.detail"
-                    :key="index"
-                  >
-                    <van-cell
-                      v-for="(v, i) in item || []"
-                      :key="i + v.nick_name"
-                      title-style="flex: 3"
-                      :title="v.nick_name"
-                      :label="ratios.channelname"
+                <van-cell
+                  v-for="(v, i) in ratios.detail || []"
+                  :key="i + v.nick_name"
+                  title-style="flex: 3"
+                  :title="v.platform + ' - ' + v.nick_name"
+                  :label="ratios.channelname"
+                >
+                  <template #label>
+                    发稿量:{{ timeFormat(v.publish_count) }} 阅读量:{{
+                      timeFormat(v.read_count)
+                    }}
+                    环比:
+                    <span
+                      :style="v.read_huanbi > 0 ? 'color:#f00' : 'color:#0f0'"
+                      >{{ formatNum(v.read_huanbi || 0, 2) }}%</span
                     >
-                      <template #label>
-                        <div style="font-size: 14px; color: #000">
-                          <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"
-                          >
-                            阅读量：{{ timeFormat(v.read_count) }}
-                          </van-tag>
-                          <van-tag
-                            size="large"
-                            type="warning"
-                            style="margin-right: 3px"
-                          >
-                            环比：{{ v.read_huanbi || 0 }}%
-                          </van-tag>
-                        </div>
-                      </template>
-                    </van-cell>
-                  </van-tab>
-                </van-tabs>
+                  </template>
+                </van-cell>
               </van-cell-group>
-              <van-cell-group border title="热门稿件">
+              <van-cell-group border :title="ratios.name + '热门稿件'">
                 <van-cell
                   v-for="(v, i) in ratios.article"
                   :key="i"
@@ -161,7 +140,7 @@
                   :title="i + 1 + '、' + v.title"
                 >
                   <template #label>
-                    <van-tag size="large" type="primary"
+                    <van-tag size="large" color="#ffcc00" type="primary"
                       >传播量：{{ timeFormat(v.play_count) }}</van-tag
                     >
                     {{ v.dep_name + "-" + v.nick_name }}
@@ -187,7 +166,7 @@
             :title="i + 1 + '、' + v.topic"
           >
             <template #label>
-              <van-tag size="large" type="primary"
+              <van-tag size="large" color="#ffcc00" type="primary"
                 >传播量：{{ timeFormat(v.read_count) }}</van-tag
               >
               {{ v.dep + "-" + v.zhuchiren }}
@@ -202,7 +181,7 @@
             :title="i + 1 + '、' + v.title"
           >
             <template #label>
-              <van-tag size="large" type="primary"
+              <van-tag size="large" color="#ffcc00" type="primary"
                 >传播量：{{ timeFormat(v.play_count) }}</van-tag
               >
               {{ v.dep_name + "-" + v.nick_name }}
@@ -231,12 +210,8 @@ import {
   Popup as vanPopup,
   Cell as vanCell,
   Tag as vanTag,
-  Tab as vanTab,
-  Tabs as vanTabs,
   cellGroup as vanCellGroup,
 } from "vant";
-import "vant/lib/tab/style/index";
-import "vant/lib/tabs/style/index";
 import "vant/lib/tag/style/index";
 import "vant/lib/cell/style/index";
 import "vant/lib/cell-group/style/index";
@@ -279,6 +254,7 @@ export default {
     console.log(this.$route.params.date);
     this.fontSize = (document.body.offsetWidth / 24).toFixed(2) - 0;
     if (document.body.offsetWidth > 677) this.fontSize = 22;
+    document.documentElement.style.fontSize = this.fontSize + "px";
     watermark.setWaterMark({
       w_texts: ["陕西新媒体大数据"],
       w_options: {
@@ -341,15 +317,7 @@ export default {
       ratios.publish_count = publish_count;
       let read_count = this.timeFormat(ratios.read_count);
       ratios.read_count = read_count;
-      const detail = ratios.detail || [];
-      const new_detail = {};
-      for (let i = 0; i < detail.length; i++) {
-        const v = detail[i];
-        v.read_huanbi = (v.read_huanbi * 100).toFixed(2) - 0;
-        if (new_detail[v.platform]) new_detail[v.platform].push(v);
-        else new_detail[v.platform] = [v];
-      }
-      ratios.detail = new_detail;
+      console.log(ratios);
       this.ratios = ratios;
       this.$nextTick(() => {});
     },
@@ -363,8 +331,6 @@ export default {
     vanCell,
     vanTag,
     vanCellGroup,
-    vanTab,
-    vanTabs,
   },
 };
 </script>
@@ -434,8 +400,12 @@ export default {
 }
 .van-tab,
 .van-cell,
-.van-cell__label {
+.van-cell__label,
+.van-cell__title {
   font-size: 1rem;
   color: #000;
 }
+.van-cell__label {
+  font-weight: 600;
+}
 </style>