|
|
@@ -0,0 +1,795 @@
|
|
|
+<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=""
|
|
|
+ />
|
|
|
+ <van-cell-group title="陕西电视收视数据"></van-cell-group>
|
|
|
+
|
|
|
+ <p
|
|
|
+ class="content"
|
|
|
+ :style="
|
|
|
+ 'font-weight: 700; padding: 0.5em 3px;font-size: ' + fontSize + 'px;'
|
|
|
+ "
|
|
|
+ v-html="title1.desc"
|
|
|
+ ></p>
|
|
|
+ <div :style="'height: ' + fontSize + 'px;'"></div>
|
|
|
+ <div class="TraditionalAndXian" :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 platfromData1 || []" :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="show1"
|
|
|
+ >
|
|
|
+ <div class="main">
|
|
|
+ <van-cell
|
|
|
+ title-style="flex: 3"
|
|
|
+ :title="ratios1.schedulename"
|
|
|
+ :label="ratios1.channelname"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ @click="show = false"
|
|
|
+ :style="
|
|
|
+ 'color: #5470c6;cursor:pointer;font-size:' + fontSize + 'px'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <van-icon name="revoke" />
|
|
|
+ {{ ratios1.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">
|
|
|
+ {{ ratios1.timecount }}小时
|
|
|
+ </van-col>
|
|
|
+ <van-col span="7" class="td" style="text-align: right">
|
|
|
+ 收视总次数：
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" class="td">
|
|
|
+ {{ ratios1.hitcount }}
|
|
|
+ </van-col>
|
|
|
+
|
|
|
+ <van-col span="7" class="td" style="text-align: right">
|
|
|
+ 周活跃户数：
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" class="td">
|
|
|
+ {{ ratios1.usrcount }}
|
|
|
+ </van-col>
|
|
|
+
|
|
|
+ <van-col span="7" class="td" style="text-align: right">
|
|
|
+ 周接触频次：
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" class="td">
|
|
|
+ {{ formatType1(ratios1.touchfreq, 1) }}次
|
|
|
+ </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(ratios1.reachrate, 2) }}%
|
|
|
+ </van-col>
|
|
|
+ <van-col span="7" class="td"> 周人均时长： </van-col>
|
|
|
+ <van-col span="7" class="td"
|
|
|
+ >{{ timeFormat(ratios1.user_duration, 0) }}分钟
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" class="td"> 收视率： </van-col>
|
|
|
+ <van-col span="5" class="td">
|
|
|
+ {{ formatNum(ratios1.watchrate, 2) }}%
|
|
|
+ </van-col>
|
|
|
+ <van-col span="7" class="td"> 市场占有率： </van-col>
|
|
|
+ <van-col span="7" class="td"
|
|
|
+ >{{ formatNum(ratios1.occrate, 2) }}%
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" class="td"> 忠诚度： </van-col>
|
|
|
+ <van-col span="5" class="td"
|
|
|
+ >{{ formatNum(ratios1.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>
|
|
|
+
|
|
|
+ <van-cell-group title="西安市网电视收视数据"></van-cell-group>
|
|
|
+
|
|
|
+ <p
|
|
|
+ class="content"
|
|
|
+ :style="
|
|
|
+ 'font-weight: 700; padding: 0.5em 3px;font-size: ' + fontSize + 'px;'
|
|
|
+ "
|
|
|
+ v-html="title.desc"
|
|
|
+ ></p>
|
|
|
+ <div class="TraditionalAndXian" :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">
|
|
|
+ <p class="td">市场份额</p>
|
|
|
+ </van-col>
|
|
|
+ <!-- td2 :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'" -->
|
|
|
+ <van-col span="7">
|
|
|
+ <p class="td">周人均时长(分)</p>
|
|
|
+ </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, 2) }}次
|
|
|
+ </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>数据来源：西安市有线电视机顶盒全样本数据。</p>
|
|
|
+ <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>数据来源：西安市有线电视机顶盒全样本数据。</p>
|
|
|
+ <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 { jsonZhouXian, jsonZhou } from "../../../api/index";
|
|
|
+
|
|
|
+import echarts from "../../../utils/echarts";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "TraditionalAndXian",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ shichang: false,
|
|
|
+ fene: false,
|
|
|
+ fontSize: 17,
|
|
|
+ show: false,
|
|
|
+ show1: false,
|
|
|
+ charts: undefined,
|
|
|
+ ratios: {},
|
|
|
+ ratios1: {},
|
|
|
+ platfromData: [],
|
|
|
+ platfromData1: [],
|
|
|
+ color: ["#ff0036", "#ff9b00", "#ffcc00"],
|
|
|
+ echarts: undefined,
|
|
|
+ dayEcharts: undefined,
|
|
|
+ title: {},
|
|
|
+ title1: {},
|
|
|
+ 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);
|
|
|
+ jsonZhouXian({
|
|
|
+ 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,
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ 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.title1 = title;
|
|
|
+ this.platfromData1 = 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, W || 0);
|
|
|
+ if (N >= 100000000) {
|
|
|
+ N = (N / 100000000).toFixed(W || 0) - 0 + "亿";
|
|
|
+ } else if (N >= 10000) {
|
|
|
+ N = (N / 10000).toFixed(W || 0) - 0 + "万";
|
|
|
+ } else {
|
|
|
+ N = Number(N).toFixed(W || 0) - 0;
|
|
|
+ }
|
|
|
+ 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, 0);
|
|
|
+ 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>
|
|
|
+.TraditionalAndXian {
|
|
|
+ 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.85rem;
|
|
|
+ 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>
|
liyongli