提交

src/views/report/Calendar/index copy.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="calendar" :style="'font-size:' + fontSize + 'px'">
+    <div
+      :class="{ group: true, content: true, bg: true }"
+      :style="index == dataOne.length - 1 ? 'margin:0 auto;padding-bottom: 1em;padding-bottom: .5em' : ''"
+      v-for="(item, index) in dataOne"
+      :key="item.title + index"
+    >
+      <div style="position: relative; z-index: 1">
+        <img
+          :src="item.img_url"
+          alt=""
+          style="
+            width: 79vw;
+            max-width: 527px;
+            display: block;
+            margin: 3.6vh auto 0 auto;
+          "
+        />
+        <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 style="display: flex">
+                <div class="title" style="flex: 1" v-text="v1.month"></div>
+                <div
+                  class="title"
+                  style="flex: 1; text-align: right"
+                  v-text="v1.title"
+                ></div>
+              </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>
+                <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
+                        v-if="son.value"
+                        class="text"
+                        v-text="son.value"
+                      ></div>
+                      <div v-if="!son.value" style="1em"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <img
+          src="@/assets/image/logo.png"
+          v-if="index == dataOne.length - 1"
+          style="
+            width: 18.8vw;
+            max-width: 125px;
+            margin: 0.3em auto;
+            display: block;
+            position: relative;
+            z-index: 2;
+          "
+          alt=""
+        />
+      </div>
+    </div>
+    <div class="bottom content">
+          本数据由<span style="color: red;">“陕西广电融媒体集团大数据平台”</span>提供。
+          <p>
+            技术支持:
+            <span style="white-space: nowrap">白帆13325452244 </span>
+            <span style="white-space: nowrap">陈科18629350958。</span>
+          </p>
+        </div>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import watermark from "watermark-package";
+import DayJs from "dayjs";
+// import {} from "../utils/tool";
+import { jsonCalendarOne } from "../../../api/index";
+
+// import echarts from "../../../utils/echarts";
+
+export default {
+  name: "Calendar",
+  data() {
+    return {
+      fontSize: 17,
+      dataOne: [],
+    };
+  },
+  watch: {},
+  mounted() {
+    if (
+      this.$route.query.auto !==
+      "06fd56cdf5a6cfc3a2139cc8514d05aa0439ee8c1fb4d81145bc9647"
+    )
+      return;
+    this.fontSize = (document.body.offsetWidth / 24).toFixed(2) - 0;
+    if (document.body.offsetWidth > 677) this.fontSize = 22;
+    watermark.setWaterMark({
+      w_texts: ["陕西新媒体大数据"],
+      w_options: {
+        w_opacity: "0.1",
+      },
+    });
+    jsonCalendarOne({
+      date: this.$route.params.date,
+      time: Date.now(),
+    }).then(res => {
+      let dataOne = res || [];
+      for (let i = 0; i < dataOne.length; i++) {
+        const item1 = dataOne[i].data ? dataOne[i].data || [] : [];
+        for (let o = 0; o < item1.length; o++) {
+          const item2 =
+            dataOne[i].data && dataOne[i].data
+              ? dataOne[i].data[o] || []
+              : 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)
+            : 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 = [];
+          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([]);
+            let end = li.length ? li.length - 1 : 0;
+            if (!item3) {
+              li[end].push(undefined);
+              continue;
+            }
+            let dt3 = new DayJs(item3.dt);
+            item3.day = dt3.format("D");
+            item3.weeks = dt3.format("d");
+            li[end].push(item3);
+          }
+          dataOne[i].data[o].list = li;
+        }
+      }
+      this.dataOne = dataOne;
+    });
+  },
+  computed: {},
+  methods: {},
+  beforeUnmount() {},
+  components: {},
+};
+</script>
+
+<style scoped>
+.calendar {
+  background-color: #f5b379;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  color: #000;
+}
+.content {
+  margin: 0 auto;
+  max-width: 667px;
+}
+.bottom {
+  border: 4px solid #0983a8;
+  background-color: #cdcdcd;
+  color: #000;
+  padding: 10px;
+  font-size: 0.9rem;
+  padding-left: 5px;
+  font-weight: 600;
+  overflow: hidden;
+}
+
+.group {
+  margin-bottom: 2em;
+  position: relative;
+}
+
+.headTitle {
+  font-size: 1.5rem;
+  text-align: center;
+  font-family: SourceHanSansCN;
+  font-weight: bold;
+  color: #be651a;
+  line-height: 30px;
+  /* text-shadow: 0 0 10px #fff; */
+
+  background: -webkit-linear-gradient(#fff, #fff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: #be651a;
+  -webkit-text-stroke: 6px transparent;
+}
+
+.headSubTitle {
+  text-align: center;
+  font-size: 1.2rem;
+  font-family: SourceHanSansCN;
+  font-weight: 400;
+  color: #a22626;
+  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: 82.5%;
+  height: calc((82.5% - 10px) * 1.5);
+  padding: 1.5em 1px 0 1px;
+  max-width: 614px;
+  margin: 0 auto;
+  margin-top: 1.5em;
+  /* width: 92vw;
+    height: 117vw; */
+}
+
+.bgImg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+.title {
+  font-size: 1rem;
+  font-family: Microsoft YaHei;
+  font-weight: 600;
+  line-height: 30px;
+  padding: 0.5em 0.8em;
+}
+
+.CalenRow {
+  display: flex;
+  overflow: hidden;
+}
+.CalenCol {
+  flex: 1;
+  text-align: center;
+  border-left: 1px solid #fff;
+}
+.CalenHead {
+  font-size: 0.9rem;
+  height: 1.5em;
+  line-height: 1.5em;
+  font-weight: 400;
+  color: #fff;
+  background-color: #dc721a;
+  border-radius: 3px;
+}
+
+.dayDate {
+  box-sizing: border-box;
+  width: 1.3em;
+  height: 1.3em;
+  line-height: 1.3em;
+  font-size: 1.1rem;
+  font-family: Adobe Heiti Std;
+  color: #000;
+  background-color: #f4f4f4;
+  transform: rotate(45deg);
+  margin: 0 auto 0.3em auto;
+}
+
+.dayDate_son {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-45deg);
+}
+
+.CalenBody .CalenCol {
+  padding: 10px 0;
+  font-weight: bold;
+  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;
+  padding: 1px 0;
+  font-size: 0.8rem;
+  height: 1.3em;
+  line-height: 1.3em;
+  color: #c31212;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>
+<style></style>

src/views/report/Calendar/index.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="calendar" :style="'font-size:' + fontSize + 'px'">
     <div
-      :class="{ group: true, content: true, bg: true }"
-      :style="index == dataOne.length - 1 ? 'margin:0 auto;padding-bottom: 1em;padding-bottom: .5em' : ''"
+      :class="{ group: true, content: true }"
+      :style="
+        index == dataOne.length - 1
+          ? 'margin:0 auto;padding-bottom: 1em;padding-bottom: .5em'
+          : ''
+      "
       v-for="(item, index) in dataOne"
       :key="item.title + index"
     >
@@ -26,8 +30,13 @@
                 <div class="title" style="flex: 1" v-text="v1.month"></div>
                 <div
                   class="title"
-                  style="flex: 1; text-align: right"
-                  v-text="v1.title"
+                  style="
+                    flex: 1;
+                    text-align: right;
+                    font-size: 0.9rem;
+                    color: #bec0c5;
+                  "
+                  v-html="v1.title"
                 ></div>
               </div>
 
@@ -70,21 +79,14 @@
                   <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'
-                              : ''
-                          "
-                        >
+                        <div class="dayDate_son">
                           {{ son.day }}
                         </div>
                       </div>
                       <div
                         v-if="son.value"
                         class="text"
-                        v-text="son.value"
+                        v-html="son.value"
                       ></div>
                       <div v-if="!son.value" style="1em"></div>
                     </div>
@@ -94,29 +96,18 @@
             </div>
           </div>
         </div>
-        <img
-          src="@/assets/image/logo.png"
-          v-if="index == dataOne.length - 1"
-          style="
-            width: 18.8vw;
-            max-width: 125px;
-            margin: 0.3em auto;
-            display: block;
-            position: relative;
-            z-index: 2;
-          "
-          alt=""
-        />
+        <p class="headTitle" v-text="item.subTitle"></p>
       </div>
     </div>
     <div class="bottom content">
-          本数据由<span style="color: red;">“陕西广电融媒体集团大数据平台”</span>提供。
-          <p>
-            技术支持:
-            <span style="white-space: nowrap">白帆13325452244 </span>
-            <span style="white-space: nowrap">陈科18629350958。</span>
-          </p>
-        </div>
+      本数据由<span style="color: red">“陕西广电融媒体集团大数据平台”</span
+      >提供。
+      <p>
+        技术支持:
+        <span style="white-space: nowrap">白帆13325452244 </span>
+        <span style="white-space: nowrap">陈科18629350958。</span>
+      </p>
+    </div>
   </div>
 </template>
 
@@ -207,7 +198,6 @@ export default {
 
 <style scoped>
 .calendar {
-  background-color: #f5b379;
   height: 100%;
   overflow-y: auto;
   box-sizing: border-box;
@@ -237,15 +227,7 @@ export default {
   font-size: 1.5rem;
   text-align: center;
   font-family: SourceHanSansCN;
-  font-weight: bold;
-  color: #be651a;
   line-height: 30px;
-  /* text-shadow: 0 0 10px #fff; */
-
-  background: -webkit-linear-gradient(#fff, #fff);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: #be651a;
-  -webkit-text-stroke: 6px transparent;
 }
 
 .headSubTitle {
@@ -257,12 +239,6 @@ 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%;
@@ -299,6 +275,7 @@ export default {
 }
 .CalenCol {
   flex: 1;
+  flex-shrink: 0;
   text-align: center;
   border-left: 1px solid #fff;
 }
@@ -333,19 +310,16 @@ export default {
 
 .CalenBody .CalenCol {
   padding: 10px 0;
-  font-weight: bold;
   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;
   padding: 1px 0;
   font-size: 0.8rem;
   height: 1.3em;
+  color: #bec0c5;
   line-height: 1.3em;
-  color: #c31212;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

src/views/report/Traditional/index copy.vue

@@ -1,586 +0,0 @@
-<template>
-  <div style="font-size: 0; background-color: #fff">
-    <img
-      :src="
-        'https://cxzx.smcic.net/zhoubao/assets/tv' + $route.query.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="title.desc"
-    ></p>
-    <div :style="'height: ' + fontSize + 'px;'"></div>
-    <div class="tv-list" :style="'font-size:' + fontSize + 'px'">
-      <div class="content">
-        <!-- <div class="titleTop">
-        <p v-text="title.company"></p>
-        <p v-text="title.name"></p>
-        <p v-text="title.title"></p>
-      </div> -->
-        <div class="itemHead">
-          <van-row>
-            <van-col span="4" class="td"> 省排名 </van-col>
-            <van-col span="6" class="td"> 频道 </van-col>
-            <van-col span="5">
-              <van-popover
-                v-model="fene"
-                trigger="click"
-                @select="fene = !fene"
-              >
-                <div style="padding: 5px">
-                  市场份额=本频道收视率/所有频道收视率
-                </div>
-                <template #reference>
-                  <p class="td">市场份额</p>
-                </template>
-              </van-popover>
-            </van-col>
-            <!-- td2 :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'" -->
-            <van-col span="7">
-              <van-popover
-                v-model="shichang"
-                trigger="click"
-                @select="shichang = !shichang"
-              >
-                <div style="padding: 5px">
-                  市场份额=本频道收视率/所有频道收视率
-                </div>
-                <template #reference>
-                  <p class="td">周人均时长(分)</p>
-                </template>
-              </van-popover>
-            </van-col>
-            <van-col span="2" class="td">
-              <img
-                src="../../../assets/image/shou.gif"
-                width="26px"
-                alt=""
-                style="vertical-align: middle; transform: rotate(45deg)"
-              />
-            </van-col>
-          </van-row>
-        </div>
-        <div v-for="(v, o) in platfromData || []" :key="v.name">
-          <div
-            style="border-bottom: 1px dashed #eee; margin: 11px 0 0 0"
-            v-if="o === 50"
-          ></div>
-          <van-row
-            :style="v.shanxi_channel ? 'background:	#F5DEB3' : ''"
-            class="item"
-            @click="() => showPopup(o)"
-          >
-            <van-col
-              span="4"
-              :class="{ td: true }"
-              :style="{ color: color[o] || '#000', fontWeight: 600 }"
-            >
-              {{ v.rank }}
-            </van-col>
-            <van-col
-              :style="v.shanxi_channel ? 'font-weight: 600' : ''"
-              span="6"
-              :class="{ td: true }"
-            >
-              {{ v.channelname }}
-            </van-col>
-            <van-col span="5" :class="{ td: true }">
-              {{ formatNum(v.occrate, 2) }}%
-              <van-icon
-                v-if="v.occrate_change !== '相等'"
-                name="down"
-                :color="v.occrate_change === '上升' ? '#f00' : '#04c15f'"
-                :class="{ rise: v.occrate_change === '上升' }"
-              />
-            </van-col>
-            <van-col span="7" :class="{ td: true }">
-              {{ timeFormat(v.user_duration) }}
-              <van-icon
-                v-if="v.user_duration_change !== '相等'"
-                name="down"
-                :color="v.user_duration_change === '上升' ? '#f00' : '#04c15f'"
-                :class="{ rise: v.user_duration_change === '上升' }"
-              />
-            </van-col>
-            <van-col span="2" class="td" style="cursor: pointer">
-              <van-icon name="arrow" />
-            </van-col>
-          </van-row>
-        </div>
-        <van-popup
-          :style="{ height: '100%', width: '100%' }"
-          position="right"
-          v-model="show"
-        >
-          <div class="main">
-            <van-cell
-              title-style="flex: 3"
-              :title="ratios.schedulename"
-              :label="ratios.channelname"
-            >
-              <div
-                @click="show = false"
-                :style="
-                  'color: #5470c6;cursor:pointer;font-size:' + fontSize + 'px'
-                "
-              >
-                <van-icon name="revoke" />
-                {{ ratios.channelname }}
-              </div>
-            </van-cell>
-            <van-cell-group title="视听收视新指标">
-              <van-row>
-                <van-col span="7" class="td" style="text-align: right">
-                  收视总时长：
-                </van-col>
-                <van-col span="5" class="td">
-                  {{ ratios.timecount }}
-                </van-col>
-                <van-col span="7" class="td" style="text-align: right">
-                  收视总次数：
-                </van-col>
-                <van-col span="5" class="td">
-                  {{ ratios.hitcount }}
-                </van-col>
-
-                <van-col span="7" class="td" style="text-align: right">
-                  周活跃户数：
-                </van-col>
-                <van-col span="5" class="td">
-                  {{ ratios.usrcount }}
-                </van-col>
-
-                <van-col span="7" class="td" style="text-align: right">
-                  周接触频次：
-                </van-col>
-                <van-col span="5" class="td">
-                  {{ formatType1(ratios.touchfreq, 0) }}次
-                </van-col>
-              </van-row>
-            </van-cell-group>
-            <van-cell-group title="传统指标">
-              <van-row>
-                <van-col span="5" class="td"> 到达率： </van-col>
-                <van-col span="5" class="td"
-                  >{{ formatNum(ratios.reachrate, 2) }}%
-                </van-col>
-                <van-col span="7" class="td"> 周人均时长： </van-col>
-                <van-col span="7" class="td"
-                  >{{ timeFormat(ratios.user_duration, 0) }}分钟
-                </van-col>
-                <van-col span="5" class="td"> 收视率： </van-col>
-                <van-col span="5" class="td">
-                  {{ formatNum(ratios.watchrate, 2) }}%
-                </van-col>
-                <van-col span="7" class="td"> 市场占有率： </van-col>
-                <van-col span="7" class="td"
-                  >{{ formatNum(ratios.occrate, 2) }}%
-                </van-col>
-                <van-col span="5" class="td"> 忠诚度： </van-col>
-                <van-col span="5" class="td"
-                  >{{ formatNum(ratios.loyalty, 2) }}%
-                </van-col>
-              </van-row>
-            </van-cell-group>
-            <div ref="pie"></div>
-            <div ref="day"></div>
-          </div>
-
-          <div class="bottom content">
-            本数据由<span style="color: red"
-              >“陕西广电融媒体集团大数据平台”</span
-            >提供。
-            <p>
-              技术支持:
-              <span style="white-space: nowrap">白帆13325452244 </span>
-              <span style="white-space: nowrap">陈科18629350958。</span>
-            </p>
-          </div>
-        </van-popup>
-      </div>
-      <div class="bottom content">
-        本数据由<span style="color: red">“陕西广电融媒体集团大数据平台”</span
-        >提供。
-        <p>
-          技术支持:
-          <span style="white-space: nowrap">白帆13325452244 </span>
-          <span style="white-space: nowrap">陈科18629350958。</span>
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import watermark from "watermark-package";
-import {
-  Col as vanCol,
-  Row as vanRow,
-  Icon as vanIcon,
-  Popup as vanPopup,
-  cellGroup as vanCellGroup,
-  Cell as vanCell,
-  Popover as vanPopover,
-} from "vant";
-import "vant/lib/popover/style/index";
-import "vant/lib/cell-group/style/index";
-import "vant/lib/cell/style/index";
-import "vant/lib/popup/style/index";
-import "vant/lib/icon/style/index";
-import "vant/lib/col/style/index";
-import "vant/lib/row/style/index";
-// import {} from "../utils/tool";
-import Dayjs from "dayjs";
-import { jsonZhou } from "../../../api/index";
-
-import echarts from "../../../utils/echarts";
-
-export default {
-  name: "tv-list",
-  data() {
-    return {
-      shichang: false,
-      fene: false,
-      fontSize: 17,
-      show: false,
-      charts: undefined,
-      ratios: {},
-      platfromData: [],
-      color: ["#ff0036", "#ff9b00", "#ffcc00"],
-      echarts: undefined,
-      dayEcharts: undefined,
-      title: {},
-      width: document.body.offsetWidth || 0,
-    };
-  },
-  watch: {},
-  mounted() {
-    if (
-      this.$route.query.auto !==
-      "06fd56cdf5a6cfc3a2139cc8514d05aa0439ee8c1fb4d81145bc9647"
-    )
-      return;
-    this.fontSize = (document.body.offsetWidth / 24).toFixed(2) - 0;
-    if (document.body.offsetWidth > 677) this.fontSize = 22;
-    watermark.setWaterMark({
-      w_texts: ["陕西视听大数据"],
-      w_options: {
-        w_opacity: "0.1",
-      },
-    });
-    const time = new Date(this.$route.query.date);
-    let D = new Date(time);
-    const lasetDay = new Dayjs(D.getTime() - D.getDay() * 86400000);
-    const firstDay = new Dayjs(lasetDay - 6 * 86400000);
-    jsonZhou({
-      start: firstDay.format("YYYYMMDD"),
-      end: lasetDay.format("YYYYMMDD"),
-      time: Date.now(),
-    })
-      .then(res => {
-        const title = {
-          company: res.company || "",
-          name: res.name || "",
-          title: res.title || "",
-          desc: res.desc || "",
-        };
-        this.title = title;
-        this.platfromData = res.list || [];
-        this.$emit("start", {
-          status: 200,
-        });
-      })
-      .catch(err => {
-        this.$emit("start", {
-          status: err,
-        });
-      });
-
-    window.onresize = () => {
-      const doc = document.body;
-      const width = doc.offsetWidth - 32;
-      let height = (width / 4) * 3;
-      this.width = document.body.offsetWidth || 0;
-      this.dayEcharts &&
-        this.dayEcharts.resize({
-          width,
-          height: width,
-        });
-      this.echarts &&
-        this.echarts.resize({
-          width,
-          height,
-        });
-    };
-  },
-  computed: {},
-  methods: {
-    formatType1(num, W) {
-      let N = this.formatNum(num, 2);
-      if (N >= 100000000) {
-        N = (N / 100000000).toFixed(W || 2) + "亿";
-      } else if (N >= 10000) {
-        N = (N / 10000).toFixed(W || 2) + "万";
-      }
-      return N;
-    },
-    formatNum(num, w) {
-      if (isNaN(num)) return 0;
-      return Number(num).toFixed(w || 4) - 0;
-    },
-    formatType(num, W) {
-      let N = this.formatNum(num, 2);
-      let wei = "";
-      if (N >= 100000000) {
-        N = (N / 100000000).toFixed(W || 2);
-        wei = "亿";
-      } else if (N >= 10000) {
-        N = (N / 10000).toFixed(W || 2);
-        wei = "万";
-      }
-      N = N.toString().split(".");
-      return {
-        N: (N[0] || 0) * 1,
-        P: N[1] || 0,
-        wei,
-      };
-    },
-    timeFormat(t, w) {
-      const Time = t || 0;
-      let out = Time.toFixed(w || 0) - 0;
-      return out;
-    },
-    showPopup(i) {
-      this.show = true;
-      const reaios = JSON.parse(JSON.stringify(this.platfromData[i] || {}));
-      reaios.hitcount = this.formatType1(reaios.hitcount, 1);
-      reaios.usrcount = this.formatType1(reaios.usrcount, 1);
-      reaios.timecount = this.formatType1(reaios.timecount / 60, 1);
-      this.ratios = reaios;
-      this.$nextTick(() => {
-        this.upEcharts();
-        this.dayEchartsFun();
-      });
-    },
-    dayEchartsFun() {
-      this.dayEcharts && this.dayEcharts.clear && this.dayEcharts.clear();
-      if (!this.dayEcharts) {
-        const doc = document.body;
-        const width = doc.offsetWidth - 32;
-        let height = (width / 4) * 3;
-        if (height > 400) height = 400;
-        this.dayEcharts = echarts.init(
-          this.$refs.day,
-          {},
-          {
-            width,
-            height,
-          }
-        );
-      }
-      const key = [],
-        value = [];
-      this.ratios.detail_list.map(v => {
-        let val = v.usrcount;
-        key.push(v.dt);
-        value.push(val);
-      });
-      this.dayEcharts.setOption({
-        title: {
-          text: "家庭户收视规模",
-          subtext: this.ratios.usrcount_compare
-            ? this.ratios.usrcount_compare + " 单位：户"
-            : "单位：户",
-          textStyle: {
-            fontSize: this.fontSize * 1.05,
-          },
-          subtextStyle: {
-            fontSize: this.fontSize,
-          },
-        },
-        tooltip: {
-          show: true,
-          trigger: "axis",
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: key,
-          axisLabel: {
-            interval: 0,
-            rotate: 60,
-          },
-        },
-        grid: {
-          right: "5px",
-          left: "40px",
-        },
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: e => {
-              const T = this.formatType(e);
-              let out = T.N;
-              if (T.P > 0) out += "." + (T.P - 0);
-              out += T.wei;
-              return out;
-            },
-          },
-        },
-        series: [
-          {
-            type: "line",
-            data: value,
-          },
-        ],
-      });
-    },
-    upEcharts() {
-      this.echarts && this.echarts.clear && this.echarts.clear();
-      if (!this.echarts) {
-        const doc = document.body;
-        const width = doc.offsetWidth - 32;
-        let height = width;
-        if (height > 667) height = 667;
-        this.echarts = echarts.init(
-          this.$refs.pie,
-          {},
-          {
-            width,
-            height,
-          }
-        );
-      }
-      this.echarts.setOption({
-        title: {
-          text: "观看时长用户分布",
-          subtext: "单位：%",
-          textStyle: {
-            fontSize: this.fontSize * 1.05,
-          },
-        },
-        color: [
-          "#87cefa",
-          "#00bfff",
-          "#1e90ff",
-          "#0000ff",
-          "#00008b",
-          "#191970",
-          "#000080",
-          "#0000cd",
-          "#4169e1",
-          "#6495ed",
-        ],
-        series: [
-          {
-            name: "Nightingale Chart",
-            type: "pie",
-            radius: [30, 70],
-            center: ["50%", "50%"],
-            emphasis: {
-              //使用emphasis
-              disable: false,
-              scale: false, //不缩放
-              scaleSize: 0, //为了防止失效直接设置未0
-            },
-            data: this.ratios.duration_list.map(v => {
-              let bfb = (v.value * 100).toFixed(0) - 0;
-              return {
-                value: bfb,
-                name: v.range + "\n 占比" + bfb + "%",
-              };
-            }),
-          },
-        ],
-      });
-    },
-  },
-  beforeUnmount() {},
-  components: {
-    vanCol,
-    vanRow,
-    vanIcon,
-    vanPopup,
-    vanCell,
-    vanCellGroup,
-    vanPopover,
-  },
-};
-</script>
-
-<style scoped>
-.tv-list {
-  background-color: #fff;
-  padding: 5px;
-  height: 100%;
-  overflow-y: auto;
-  box-sizing: border-box;
-}
-.bottom {
-  border: 4px solid #0983a8;
-  background-color: #cdcdcd;
-  margin-top: 1em;
-  padding: 10px;
-  font-size: 0.9rem;
-  padding-left: 5px;
-  font-weight: 600;
-  overflow: hidden;
-}
-.td {
-  text-align: center;
-  line-height: 2.5em;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.td2 {
-  line-height: 1.5em;
-  white-space: initial;
-}
-.item {
-  overflow: hidden;
-  border-radius: 3px;
-  margin-top: 11px;
-  background-color: #f5f6f8;
-}
-.itemHead {
-  margin-top: 0;
-  background-color: #f5f6f8;
-}
-.main {
-  padding: 0.5em;
-}
-.content {
-  margin: 0 auto;
-  max-width: 667px;
-}
-.rise {
-  /* 上升 */
-  transform: rotate(180deg);
-}
-.titleTop {
-  padding: 1em 0;
-  font-weight: 600;
-  background-image: linear-gradient(to right, #014392, #008fc4, #00428c);
-  color: #fff;
-  text-align: center;
-}
-</style>
-<style>
-.van-cell-group__title {
-  font-size: 1.1rem;
-  padding-left: 8px;
-  color: #000;
-  font-weight: 600;
-}
-</style>