hair/src/views/report/Mobile/index.vue

<template>
  <div style="font-size: 0; background-color: #fff">
    <div class="content">
      <img
        :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>
    </div>
    <div class="tv-list" :style="'font-size:' + fontSize + 'px'">
      <div class="content">
        <van-cell-group border title="部门排行">
          <div class="itemHead">
            <van-row>
              <van-col span="3" class="td"> 排名 </van-col>
              <van-col span="7" 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="2" 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="7" :class="{ td: true }">
                {{ v.name }}
              </van-col>
              <van-col span="7" :class="{ td: true }">
                {{ timeFormat(v.read_count) }}
                <van-icon
                  v-if="v.read_change !== '相等'"
                  name="down"
                  :color="v.read_change === '上涨' ? '#f00' : '#0f0'"
                  :class="{ rise: v.read_change === '上涨' }"
                />
              </van-col>
              <van-col span="5" :class="{ td: true }">
                {{ timeFormat(v.publish_count) }}
                <van-icon
                  v-if="v.publish_change !== '相等'"
                  name="down"
                  :color="v.publish_change === '上涨' ? '#f00' : '#0f0'"
                  :class="{ rise: v.publish_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"
                >
                  <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">
                  {{ratios.publish_count}}
                </van-col>
                <van-col span="7" class="td"> 阅读量： </van-col>
                <van-col span="5" class="td">
                  {{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"
                    >
                      <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>
              </van-cell-group>
              <van-cell-group border title="热门稿件">
                <van-cell
                  v-for="(v, i) in ratios.article"
                  :key="i"
                  title-style="flex: 3"
                  :title="i + 1 + '、' + v.title"
                >
                  <template #label>
                    <van-tag size="large" 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="爆款话题">
          <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"
          >
            <template #label>
              <van-tag size="large" type="primary"
                >传播量：{{ timeFormat(v.read_count) }}</van-tag
              >
              {{ v.dep + "-" + v.zhuchiren }}
            </template>
          </van-cell>
        </van-cell-group>
        <van-cell-group border title="热门稿件">
          <van-cell
            v-for="(v, i) in article"
            :key="i"
            title-style="flex: 3"
            :title="i + 1 + '、' + v.title"
          >
            <template #label>
              <van-tag size="large" 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">
        本数据由“陕西广电融媒体集团大数据平台”提供。
        <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,
  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";
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: "Mobile",
  data() {
    return {
      active: "",
      fontSize: 17,
      show: false,
      charts: undefined,
      ratios: {},
      article: [],
      topic: [],
      dep: [],
      color: ["#ff0036", "#ff9b00", "#ffcc00"],
      echarts: undefined,
      dayEcharts: undefined,
      width: document.body.offsetWidth || 0,
      desc: "",
      topic_desc: "",
    };
  },
  watch: {},
  mounted() {
    if (
      this.$route.query.auto !==
      "06fd56cdf5a6cfc3a2139cc8514d05aa0439ee8c1fb4d81145bc9647"
    )
      return;
    console.log(this.$route.params.date);
    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.params.date,
      time: Date.now(),
    }).then(res => {
      this.article = res.article || [];
      this.dep = res.dep || [];
      this.topic = res.topic || [];
      this.desc = res.desc || "";
      this.topic_desc = res.topic_desc || "";
    });
  },
  computed: {},
  methods: {
    valueDate(v) {
      let out = "";
      for (let i = 0; i < v.length; i++) {
        const item = v[i];
        if (i === 4 || i === 6 || i === 13 || i === 15) out += "/";
        out += item;
      }
      return out;
    },
    formatNum(num, w) {
      if (isNaN(num)) return 0;
      return Number(num).toFixed(w || 4) - 0;
    },
    formatType(num) {
      let N = this.formatNum(num, 2);
      let wei = "";
      if (N >= 100000000) {
        N = (N / 100000000).toFixed(1);
        wei = "亿";
      } else if (N >= 10000) {
        N = (N / 10000).toFixed(0);
        wei = "万";
      }
      N = N.toString().split(".");
      return {
        N: (N[0] || 0) * 1,
        P: N[1] || 0,
        wei,
      };
    },
    timeFormat(t) {
      let Time = t || 0;
      if (Time >= 100000000) Time = (Time / 100000000).toFixed(1) - 0 + "亿";
      else if (Time >= 10000) Time = (Time / 10000).toFixed(0) - 0 + "万";
      return Time;
    },
    showPopup(i) {
      this.show = true;
      const ratios = JSON.parse(JSON.stringify(this.dep[i] || {}));
      let publish_count = this.timeFormat(ratios.publish_count);
      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;
      this.ratios = ratios;
      this.$nextTick(() => {});
    },
  },
  beforeUnmount() {},
  components: {
    vanCol,
    vanRow,
    vanIcon,
    vanPopup,
    vanCell,
    vanTag,
    vanCellGroup,
    vanTab,
    vanTabs,
  },
};
</script>

<style scoped>
.tv-list {
  background-color: #fff;
  padding: 5px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.bottom {
  border: 4px solid #0983a8;
  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 {
  height: 80px;
  line-height: 80px;
  background-image: linear-gradient(to right, #014392, #008fc4, #00428c);
  color: #fff;
  text-align: center;
}
</style>
<style>
.van-cell-group__title {
  font-size: 1.1rem;
  color: #000;
  font-weight: 600;
}
.van-tab,
.van-cell,
.van-cell__label {
  font-size: 1rem;
  color: #000;
}
</style>