|
|
@@ -0,0 +1,367 @@
|
|
|
+<template>
|
|
|
+ <div class="tv-list" :style="'font-size:' + fontSize + 'px'">
|
|
|
+ <div class="content">
|
|
|
+ <div class="titleTop">
|
|
|
+ {{ valueDate($route.query.date) }}
|
|
|
+ </div>
|
|
|
+ <van-cell-group border title="部门排行">
|
|
|
+ <div class="itemHead">
|
|
|
+ <van-row>
|
|
|
+ <van-col span="3" class="td"> 排名 </van-col>
|
|
|
+ <van-col span="5" class="td"> 部门 </van-col>
|
|
|
+ <van-col span="7" class="td"> 传播量 </van-col>
|
|
|
+ <!-- td2 :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'" -->
|
|
|
+ <van-col span="5" class="td"> 发稿量 </van-col>
|
|
|
+ <van-col span="4" class="td">
|
|
|
+ <img
|
|
|
+ src="../../../assets/image/shou.gif"
|
|
|
+ width="26px"
|
|
|
+ alt=""
|
|
|
+ style="vertical-align: middle"
|
|
|
+ />
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ <div v-for="(v, o) in dep || []" :key="v.name">
|
|
|
+ <div
|
|
|
+ style="border-bottom: 1px dashed #eee; margin: 11px 0 0 0"
|
|
|
+ v-if="o === 20"
|
|
|
+ ></div>
|
|
|
+ <van-row class="item" @click="() => showPopup(o)">
|
|
|
+ <van-col
|
|
|
+ span="3"
|
|
|
+ :class="{ td: true }"
|
|
|
+ :style="{ color: color[o] || '#000', fontWeight: 600 }"
|
|
|
+ >
|
|
|
+ {{ o + 1 }}
|
|
|
+ </van-col>
|
|
|
+ <van-col
|
|
|
+ span="5"
|
|
|
+ :class="{ td: true }"
|
|
|
+ :style="{ fontSize: fontSize * 0.7 + 'px', lineHeight: '3.6em' }"
|
|
|
+ >
|
|
|
+ {{ v.name }}
|
|
|
+ </van-col>
|
|
|
+ <van-col span="7" :class="{ td: true }">
|
|
|
+ {{ timeFormat(v.read_count) }}
|
|
|
+ <van-icon
|
|
|
+ v-if="v.user_duration_change !== '相等'"
|
|
|
+ name="down"
|
|
|
+ :color="v.user_duration_change === '上升' ? '#f00' : '#0f0'"
|
|
|
+ :class="{ rise: v.user_duration_change === '上升' }"
|
|
|
+ />
|
|
|
+ </van-col>
|
|
|
+ <van-col span="5" :class="{ td: true }">
|
|
|
+ {{ timeFormat(v.publish_count) }}
|
|
|
+ <van-icon
|
|
|
+ v-if="v.user_duration_change !== '相等'"
|
|
|
+ name="down"
|
|
|
+ :color="v.user_duration_change === '上升' ? '#f00' : '#0f0'"
|
|
|
+ :class="{ rise: v.user_duration_change === '上升' }"
|
|
|
+ />
|
|
|
+ </van-col>
|
|
|
+ <van-col span="4" 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"
|
|
|
+ >
|
|
|
+ <van-icon name="revoke" />
|
|
|
+ {{ ratios.name }}
|
|
|
+ </div>
|
|
|
+ </van-cell>
|
|
|
+ <van-row>
|
|
|
+ <van-col span="7" class="td"> 发稿量： </van-col>
|
|
|
+ <van-col span="5" class="td">
|
|
|
+ <counto
|
|
|
+ :startVal="0"
|
|
|
+ :endVal="ratios.publish_count || 0"
|
|
|
+ :duration="1000"
|
|
|
+ ></counto>
|
|
|
+ <span v-if="ratios.publish_countP">.</span>
|
|
|
+ <counto
|
|
|
+ v-if="ratios.publish_countP"
|
|
|
+ :startVal="0"
|
|
|
+ :endVal="ratios.publish_countP || 0"
|
|
|
+ :duration="1000"
|
|
|
+ ></counto
|
|
|
+ >{{ ratios.publish_countWei }}
|
|
|
+ </van-col>
|
|
|
+ <van-col span="7" class="td"> 阅读量： </van-col>
|
|
|
+ <van-col span="5" class="td">
|
|
|
+ <counto
|
|
|
+ :startVal="0"
|
|
|
+ :endVal="ratios.read_count || 0"
|
|
|
+ :duration="1000"
|
|
|
+ ></counto>
|
|
|
+ <span v-if="ratios.read_countP">.</span>
|
|
|
+ <counto
|
|
|
+ v-if="ratios.read_countP"
|
|
|
+ :startVal="0"
|
|
|
+ :endVal="ratios.read_countP || 0"
|
|
|
+ :duration="1000"
|
|
|
+ ></counto
|
|
|
+ >{{ ratios.read_countWei }}
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ <van-cell-group border title="爆款稿件">
|
|
|
+ <van-cell
|
|
|
+ v-for="(v, i) in ratios.article"
|
|
|
+ :key="i"
|
|
|
+ title-style="flex: 3"
|
|
|
+ :title="v.title"
|
|
|
+ >
|
|
|
+ <template #label>
|
|
|
+ <van-tag type="primary"
|
|
|
+ >播放量：{{ timeFormat(v.play_count) }}</van-tag
|
|
|
+ >
|
|
|
+ {{ v.dep_name + "-" + v.nick_name }}
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </van-cell-group>
|
|
|
+ <van-cell-group border title="爆款稿件">
|
|
|
+ <van-cell
|
|
|
+ v-for="(v, i) in article"
|
|
|
+ :key="i"
|
|
|
+ title-style="flex: 3"
|
|
|
+ :title="v.title"
|
|
|
+ >
|
|
|
+ <template #label>
|
|
|
+ <van-tag type="primary"
|
|
|
+ >播放量：{{ timeFormat(v.play_count) }}</van-tag
|
|
|
+ >
|
|
|
+ {{ v.dep_name + "-" + v.nick_name }}
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ </div>
|
|
|
+ <div class="bottom content">
|
|
|
+ <img
|
|
|
+ src="https://djweb.smcic.net/img/202104021135578156.png"
|
|
|
+ width="50%"
|
|
|
+ style="vertical-align: middle"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <span
|
|
|
+ style="
|
|
|
+ display: inline-block;
|
|
|
+ width: 45%;
|
|
|
+ vertical-align: middle;
|
|
|
+ padding-left: 5px;
|
|
|
+ font-weight: 600;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ 本数据由陕西广电融媒体集团大数据平台提供。技术支持 汪朝涵：17302954998
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// @ is an alias to /src
|
|
|
+import counto from "@/components/counto/vue-countTo.vue";
|
|
|
+import watermark from "watermark-package";
|
|
|
+import {
|
|
|
+ Col as vanCol,
|
|
|
+ Row as vanRow,
|
|
|
+ Icon as vanIcon,
|
|
|
+ Popup as vanPopup,
|
|
|
+ Cell as vanCell,
|
|
|
+ Tag as vanTag,
|
|
|
+ cellGroup as vanCellGroup,
|
|
|
+} from "vant";
|
|
|
+import "vant/lib/tag/style/index";
|
|
|
+import "vant/lib/cell/style/index";
|
|
|
+import "vant/lib/cell-group/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 { jsonZhouMobile } from "../../../api/index";
|
|
|
+
|
|
|
+// import echarts from "../../../utils/echarts";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "tv-list",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fontSize: 17,
|
|
|
+ show: false,
|
|
|
+ charts: undefined,
|
|
|
+ ratios: {},
|
|
|
+ article: [],
|
|
|
+ dep: [],
|
|
|
+ color: ["#ff0036", "#ff9b00", "#ffcc00"],
|
|
|
+ echarts: undefined,
|
|
|
+ dayEcharts: undefined,
|
|
|
+ width: document.body.offsetWidth || 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ mounted() {
|
|
|
+ if (!this.$route.query.auto) 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",
|
|
|
+ },
|
|
|
+ });
|
|
|
+ jsonZhouMobile({
|
|
|
+ date: this.$route.query.date,
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.article = res.article || [];
|
|
|
+ this.dep = res.dep || [];
|
|
|
+ this.$emit("start", {
|
|
|
+ status: 200,
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$emit("start", {
|
|
|
+ status: err,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ valueDate(v) {
|
|
|
+ let out = "";
|
|
|
+ for (let i = 0; i < v.length; i++) {
|
|
|
+ const item = v[i];
|
|
|
+ if (i === 4 || i === 6) out += "-";
|
|
|
+ out += item;
|
|
|
+ }
|
|
|
+ return out;
|
|
|
+ },
|
|
|
+ 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) * 1,
|
|
|
+ wei,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ timeFormat(t) {
|
|
|
+ let Time = t || 0;
|
|
|
+ if (Time >= 100000000) Time = (Time / 100000000).toFixed(0) - 0 + "亿";
|
|
|
+ else if (Time >= 10000) Time = (Time / 10000).toFixed(1) - 0 + "万";
|
|
|
+ return Time;
|
|
|
+ },
|
|
|
+ showPopup(i) {
|
|
|
+ this.show = true;
|
|
|
+ const ratios = this.dep[i] || {};
|
|
|
+ let publish_count = this.formatType(ratios.publish_count, 2);
|
|
|
+ ratios.publish_count = publish_count.N;
|
|
|
+ ratios.publish_countP = publish_count.P;
|
|
|
+ ratios.publish_countWei = publish_count.wei;
|
|
|
+ let read_count = this.formatType(ratios.read_count, 2);
|
|
|
+ ratios.read_count = read_count.N;
|
|
|
+ ratios.read_countP = read_count.P;
|
|
|
+ ratios.read_countWei = read_count.wei;
|
|
|
+ this.ratios = ratios;
|
|
|
+ console.log(ratios);
|
|
|
+ this.$nextTick(() => {});
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeUnmount() {},
|
|
|
+ components: {
|
|
|
+ counto,
|
|
|
+ vanCol,
|
|
|
+ vanRow,
|
|
|
+ vanIcon,
|
|
|
+ vanPopup,
|
|
|
+ vanCell,
|
|
|
+ vanTag,
|
|
|
+ vanCellGroup,
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.tv-list {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: scroll;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.bottom {
|
|
|
+ border: 4px solid #0983a8;
|
|
|
+ padding: 10px;
|
|
|
+ margin-top: 1em;
|
|
|
+}
|
|
|
+.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 {
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ background-image: linear-gradient(to right, #014392, #008fc4, #00428c);
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
liyongli