提交

src/views/report/Advertisement/Charts.js

@@ -2,6 +2,7 @@ import echarts from "../../../utils/echarts";
 
 let ringEcharts = undefined;
 let barEcharts = undefined;
+let tbEcharts = undefined;
 
 export function advertisementSpendInit(ele, list) {
   // 柱图
@@ -38,16 +39,16 @@ export function advertisementSpendInit(ele, list) {
       axisLine: { onZero: true },
       splitLine: { show: false },
       splitArea: { show: false },
-    },
-    legend: {
-      data: [list.L[0].type],
-      top: "30px",
+      axisLabel: {
+        interval: 0,
+        rotate: 40,
+      },
     },
     yAxis: {
       axisLabel: {
         formatter: e => {
           let N = e || 0;
-          return N + '%'
+          return N + "%";
         },
       },
     },
@@ -59,6 +60,17 @@ export function advertisementSpendInit(ele, list) {
         itemStyle: {
           color: "#91cc75",
         },
+        label: {
+          // 柱图头部显示值
+          show: false,
+          position: "top",
+          color: "#333",
+          fontSize: "12px",
+          formatter: params => {
+            console.log(params.value);
+            return params.value.toFixed(2) - 0 + "%";
+          },
+        },
         emphasis: {
           itemStyle: {
             shadowBlur: 10,
@@ -137,7 +149,81 @@ export function advertisementRingRatioInit(ele, list) {
           let N = e || 0;
           if (N >= 100000000) N = (N / 100000000).toFixed(2) - 0 + "亿";
           else if (N >= 10000) N = (N / 10000).toFixed(2) - 0 + "万";
-          return N
+          return N;
+        },
+      },
+    },
+    series: [
+      {
+        name: list.F[0].type,
+        type: "line",
+        stack: "Total",
+        showSymbol: false,
+        data: list.F.map(v => v.value),
+      },
+      {
+        name: list.L[0].type,
+        type: "line",
+        stack: "Total",
+        showSymbol: false,
+        data: list.L.map(v => v.value),
+      },
+    ],
+  });
+}
+
+export function advertisementFeeInit(ele, list) {
+  // 折线图
+  tbEcharts && tbEcharts.clear && tbEcharts.clear();
+  if (!tbEcharts) tbEcharts = echarts.init(ele);
+  let keys = list.F.length > list.L.length ? list.F : list.L;
+  tbEcharts.setOption({
+    title: {
+      text: list.name || "",
+      left: "center",
+      top: "3px",
+      textStyle: {
+        fontSize: 17,
+      },
+    },
+    tooltip: {
+      trigger: "axis",
+      formatter: a => {
+        let t =  list.L[a[0].dataIndex] || undefined;
+        let t1 =  list.F[a[1].dataIndex] || undefined;
+        if(!t) return ""
+        return t.t + ": " + (t.value.toFixed(2) - 0 + "%") + '<br/>' + t1.t + ": " + (t1.value.toFixed(2) - 0 + "%")
+      },
+    },
+    legend: {
+      data: [list.F[0].type, list.L[0].type],
+      top: "30px",
+    },
+    grid: {
+      top: "60px",
+      left: "3%",
+      right: "6%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    toolbox: {
+      feature: {
+        saveAsImage: {},
+      },
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: keys.map(v => v.date),
+    },
+    yAxis: {
+      type: "value",
+      axisLabel: {
+        formatter: e => {
+          let N = e || 0;
+          if (N >= 100000000) N = (N / 100000000).toFixed(2) - 0 + "亿";
+          else if (N >= 10000) N = (N / 10000).toFixed(2) - 0 + "万";
+          return N;
         },
       },
     },

src/views/report/Advertisement/index.vue

@@ -24,11 +24,7 @@
       <div class="card">
         <h4 class="xifenxinxiTitle">
           <div class="right"></div>
-          <div class="left">
-            电视：
-            <span> 2022年8月广告花费环比 </span>
-            上涨 2.2%
-          </div>
+          <div class="left">电视 <span v-text="orgin.day_hb.name"> </span></div>
         </h4>
         <br />
         <div ref="adRingRatioCanvas"></div>
@@ -37,8 +33,7 @@
         <h4 class="xifenxinxiTitle">
           <div class="right"></div>
           <div class="left">
-            电视：
-            <span> 广告花费品牌榜单 </span>
+            电视: <span v-text="orgin.brand_top.name"> </span>
           </div>
         </h4>
         <h4
@@ -95,8 +90,7 @@
         <h4 class="xifenxinxiTitle">
           <div class="right"></div>
           <div class="left">
-            电视：
-            <span> 行业(大类)广告花费变化 </span>
+            电视: <span v-text="orgin.brand_hb.name"> </span>
           </div>
         </h4>
         <br />
@@ -104,9 +98,30 @@
           <div ref="adTop10Canvas"></div>
         </div>
       </div>
+      <div class="card">
+        <h4 class="xifenxinxiTitle">
+          <div class="right"></div>
+          <div class="left">
+            电视：
+            <span v-text="orgin.month_thb.name"> </span>
+          </div>
+        </h4>
+        <br />
+        <div ref="adTop10" class="">
+          <div ref="adFeeCanvas"></div>
+        </div>
+      </div>
     </div>
-    <div style="text-align: center; height: 1.5em;font-size: 16px ; line-height: 1.5em">
-      技术支持 汪朝涵：17302954998
+    <div class="bottom">
+        <img
+          src="http://bsddata.oss-cn-hangzhou.aliyuncs.com/yuqing_oem/images/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>
@@ -121,7 +136,11 @@ import "vant/lib/row/style/index";
 
 import dayJs from "dayjs";
 
-import { advertisementSpendInit, advertisementRingRatioInit } from "./Charts";
+import {
+  advertisementSpendInit,
+  advertisementRingRatioInit,
+  advertisementFeeInit,
+} from "./Charts";
 import { jsonAdvertisement } from "@/api/index";
 
 export default {
@@ -137,7 +156,9 @@ export default {
     watermark.setWaterMark({
       w_texts: ["数据来自大数据平台"],
       w_options: {
-        w_opacity: "0.3",
+        w_opacity: "0.1",
+        w_width: 360,
+        w_height: 280
       },
     });
     jsonAdvertisement({
@@ -160,7 +181,7 @@ export default {
           watermark.setWaterMark({
             w_texts: ["数据来自大数据平台"],
             w_options: {
-              w_opacity: "0.3",
+              w_opacity: "0.1",
             },
           });
         };
@@ -193,7 +214,8 @@ export default {
     createChart() {
       let width = this.$refs.adTop10.offsetWidth,
         height = (width / 16) * 9;
-      this.$refs.adTop10Canvas.style = `width:${width}px;height:${height}px`;
+      this.$refs.adTop10Canvas.style = `width:${width}px;height:${width}px`;
+      this.$refs.adFeeCanvas.style = `width:${width}px;height:${width}px`;
       this.$refs.adRingRatioCanvas.style = `width:${width}px;height:${height}px`;
 
       const ringRatioF = [];
@@ -230,6 +252,25 @@ export default {
           value: v.huanbi * 100,
         });
       }
+      const line1F = [];
+      const line1L = [];
+      const month_thb = this.orgin.month_thb ? this.orgin.month_thb.list : [];
+      for (let i = 0; i < month_thb.length; i++) {
+        const v = month_thb[i];
+        line1F.push({
+          date: v.name || "",
+          type: "同比" + v.name + " vs " + v.tb_name,
+          t: v.name + '同比' + v.tb_name,
+          value: v.tb * 100,
+        });
+        line1L.push({
+          date: v.name || "",
+          type: "环比" + v.name + " vs " + v.hb_name,
+          t: v.name + '环比' + v.hb_name,
+          value: v.hb * 100,
+        });
+      }
+
       lineL.length &&
         advertisementSpendInit(this.$refs.adTop10Canvas, {
           L: lineL,
@@ -243,6 +284,13 @@ export default {
           F: ringRatioF,
           name: this.orgin.day_hb.name,
         });
+      line1L.length &&
+        line1F.length &&
+        advertisementFeeInit(this.$refs.adFeeCanvas, {
+          L: line1L,
+          F: line1F,
+          name: this.orgin.month_thb.name,
+        });
     },
   },
   beforeUnmount: function () {},
@@ -256,6 +304,9 @@ export default {
   padding: 22px 5px 12px 5px;
   background-color: #fff;
 }
+.Advertisement * {
+  font-size: 17px;
+}
 .Advertisement .item {
   max-width: 677px;
   margin: 0 auto;
@@ -271,7 +322,7 @@ export default {
   margin: 0 auto;
 }
 .Advertisement .title section {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.1);
   color: #fff;
   height: 35px;
   line-height: 35px;
@@ -287,13 +338,13 @@ export default {
 .xifenxinxiTitle .left {
   background-color: #d11e16;
   padding-left: 1em;
-  width: 80%;
+  width: 90%;
   position: relative;
   z-index: 1;
 }
 .xifenxinxiTitle .right {
   background-color: #595959;
-  width: 20%;
+  width: 10%;
   height: 34px;
   line-height: 34px;
   position: absolute;
@@ -304,7 +355,7 @@ export default {
 
 .Advertisement .tableHead {
   color: #fff;
-  background-color: #d11e16;
+  background-color: #cf827f;
 }
 .tableHead .van-col,
 .tableBody .van-col {
@@ -318,4 +369,13 @@ export default {
   margin-top: 1em;
   padding: 1em 0;
 }
+.bottom {
+  border: 4px solid #0983a8;
+  margin-top: 1em;
+  padding: 10px;
+  font-size: 17px;
+}
+.article {
+  font-size: 17px;
+}
 </style>

src/views/report/Traditional/index.vue

@@ -1,22 +1,20 @@
 <template>
   <div class="tv-list">
     <div class="content">
+      <div class="titleTop">
+        {{ date.join("-") }}
+      </div>
       <div class="itemHead">
         <van-row>
           <van-col span="3" class="td"> 排名 </van-col>
           <van-col span="5" class="td"> 频道 </van-col>
           <van-col span="5" class="td"> 市场份额 </van-col>
-          <van-col
-            span="7"
-            class="td td2"
-            :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'"
-          >
-            人均使用时长(分钟)
-          </van-col>
+          <!-- td2 :style="width > 667 ? 'line-height: 2.5em' : 'line-height: 1.5em'" -->
+          <van-col span="7" class="td"> 人均时长(分钟) </van-col>
           <van-col span="4" class="td">
-            点击<img
+            <img
               src="../../../assets/image/shou.gif"
-              width="30px"
+              width="26px"
               alt=""
               style="vertical-align: middle"
             />
@@ -36,26 +34,30 @@
           >
             {{ v.rank }}
           </van-col>
-          <van-col span="5" :class="{ td: true }">
+          <van-col
+            span="5"
+            style="font-size: 12px; line-height: 40px"
+            :class="{ td: true }"
+          >
             {{ v.channelname }}
           </van-col>
-          <van-col span="5" :class="{ td: true }" style="color: #e1a74f">
+          <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' : '#0f0'"
               :class="{ rise: v.occrate_change === '上升' }"
             />
-            {{ formatNum(v.occrate, 2) }}%
           </van-col>
-          <van-col span="7" :class="{ td: true }" style="color: #e1a74f">
+          <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' : '#0f0'"
               :class="{ rise: v.user_duration_change === '上升' }"
             />
-            {{ timeFormat(v.user_duration) }}
           </van-col>
           <van-col
             span="4"
@@ -80,8 +82,7 @@
             :label="ratios.channelname"
           >
             <div @click="show = false" style="color: #5470c6; cursor: pointer">
-              返回
-              <van-icon name="share-o" />
+              <van-icon name="revoke" />
             </div>
           </van-cell>
           <van-row>
@@ -134,7 +135,7 @@
               >{{ ratios.usrcountWei }}
             </van-col>
 
-            <van-col span="5" class="td"> 收视时长： </van-col>
+            <van-col span="5" class="td"> 收视时长: </van-col>
             <van-col span="7" class="td">
               <counto
                 :startVal="0"
@@ -149,7 +150,7 @@
               ></counto
               >{{ ratios.timecountWei }}
             </van-col>
-            <van-col span="7" class="td"> 人均收视时长： </van-col>
+            <van-col span="7" class="td"> 人均时长： </van-col>
             <van-col span="5" class="td"
               >{{ timeFormat(ratios.user_duration) }}分钟
             </van-col>
@@ -159,16 +160,16 @@
         </div>
       </van-popup>
     </div>
-
-    <div
-      style="
-        text-align: center;
-        height: 1.5em;
-        font-size: 16px;
-        line-height: 1.5em;
-      "
-    >
-      技术支持 汪朝涵：17302954998
+    <div class="bottom">
+        <img
+          src="http://bsddata.oss-cn-hangzhou.aliyuncs.com/yuqing_oem/images/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>
@@ -206,6 +207,7 @@ export default {
       color: ["#ff0036", "#ff9b00", "#ffcc00"],
       echarts: undefined,
       dayEcharts: undefined,
+      date: [],
       width: document.body.offsetWidth || 0,
     };
   },
@@ -214,13 +216,15 @@ export default {
     watermark.setWaterMark({
       w_texts: ["数据来自大数据平台"],
       w_options: {
-        w_opacity: "0.3",
+        w_opacity: "0.1",
       },
     });
+    if (!this.$route.query.auto) return;
     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);
+    this.date = [firstDay.format("YYYY-MM-DD"), lasetDay.format("YYYY-MM-DD")];
     jsonZhou({
       start: firstDay.format("YYYYMMDD"),
       end: lasetDay.format("YYYYMMDD"),
@@ -335,6 +339,7 @@ export default {
         },
         tooltip: {
           show: true,
+          trigger: "axis",
         },
         xAxis: {
           type: "category",
@@ -403,6 +408,9 @@ export default {
           shape: "circle",
           center: ["50%", "50%"],
           radius: 100,
+          axisName: {
+            color: "#000",
+          },
           indicator: key.map((v, i) => {
             let m = value[i] / max,
               val = max;
@@ -459,7 +467,17 @@ export default {
   overflow-y: scroll;
   box-sizing: border-box;
 }
+.tv-list * {
+  font-size: 18px;
+}
+.bottom {
+  border: 4px solid #0983a8;
+  padding: 10px;
+  margin-top: 1em;
+  font-size: 17px;
+}
 .td {
+  font-size: 16px;
   text-align: center;
   line-height: 2.5em;
   white-space: nowrap;
@@ -492,6 +510,13 @@ export default {
   /* 上升 */
   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>
 .tv-list .van-tab {