提交

src/api/index.js

@@ -290,6 +290,14 @@ export function jsonZhou(data) {
   });
 }
 
+export function jsonZhouXian(data) {
+  return ajax({
+    urlType: "cxzx",
+    url: `/zhoubao/data/${data.start}-${data.end}ctmt-xian.json?${data.time}`,
+    method: "GET",
+  });
+}
+
 export function jsonZhouMobile(data) {
   return ajax({
     urlType: "cxzx",

src/router/report.js

@@ -21,6 +21,17 @@ export default [
           /* webpackChunkName: "report" */ "../views/report/Traditional/index.vue"
         ),
     },
+    {
+      path: "/TraditionalXian",
+      name: "TraditionalXian",
+      meta: {
+        title: "陕西视听大数据发布",
+      },
+      component: () =>
+        import(
+          /* webpackChunkName: "report" */ "../views/report/TraditionalXian/index.vue"
+        ),
+    },
     {
       path: "/Mobile/:date",
       name: "Mobile",

src/views/report/TraditionalXian/index.vue

@@ -0,0 +1,584 @@
+<template>
+  <div style="font-size: 0; background-color: #fff">
+    <img
+      :src="
+        'https://cxzx.smcic.net/zhoubao/assets/xatv' + $route.query.date + '.jpg'
+      "
+      width="100%"
+      class="content"
+      style="margin-bottom: 1em; display: block"
+      alt=""
+    />
+    <p
+      class="content"
+      :style="
+        'font-weight: 700; padding: 0.5em 3px;font-size: ' + fontSize + 'px;'
+      "
+      v-html="title.desc"
+    ></p>
+    <div :style="'height: ' + fontSize + 'px;'"></div>
+    <div class="TraditionalXian" :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 { jsonZhouXian } from "../../../api/index";
+
+import echarts from "../../../utils/echarts";
+
+export default {
+  name: "TraditionalXian",
+  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);
+    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,
+        });
+      });
+
+    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>
+.TraditionalXian {
+  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>