liyongli 3 年之前
父節點
當前提交
c4a6682a70

+ 36 - 8
src/views/AdvertisingEye/components/allTrend.vue

@@ -231,10 +231,17 @@ export default {
       hard_chart.resize({
         height: (this.$refs.launch.offsetWidth * 6) / 16,
       });
+      let c = ["#1b9ade", "#fd5555"];
       var option = {
+        title: {
+            text: "硬广趋势",
+            top: 20,
+            left: 50
+        },
         legend: {
           show: true,
           data: chartData.lendata,
+          top:"10%"
         },
         xAxis: {
           type: "category",
@@ -244,14 +251,14 @@ export default {
         yAxis: {
           type: "value",
           scale: true,
-          name: '单位:' + this.hard_list[this.hard_act].unit,
+          name: "单位:" + this.hard_list[this.hard_act].unit,
           axisLabel: {
             formatter: arr => {
               return this.formatNum(arr);
             },
           },
         },
-        color: ["#1b9ade", "#fd5555"],
+        color: c,
         tooltip: {
           trigger: "axis",
           textStyle: {
@@ -268,7 +275,13 @@ export default {
                 day =
                   v.dataIndex > 8 ? v.dataIndex + 1 : "0" + (v.dataIndex + 1),
                 val = (v.value - 0).toFixed(2) - 0;
-              out += time[0] + "-" + time[1];
+              out +=
+                "<div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: " +
+                c[i] +
+                "' ></div> " +
+                time[0] +
+                "-" +
+                time[1];
               this.industryRang + 1 <= 2 ? (out += "-" + day) : "";
               out +=
                 ": " + val + this.hard_list[this.hard_act].unit + "<br />";
@@ -276,7 +289,7 @@ export default {
             return out;
           },
         },
-        grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
+        grid: [{ left: 150, top: "20%", buttom: 0, right: 100 }],
         series: chartData.value.map((data, i) => {
           return {
             showSymbol: false,
@@ -300,16 +313,23 @@ export default {
       soft_chart.resize({
         height: (this.$refs.trend.offsetWidth * 6) / 16,
       });
+      let c = ["#1b9ade", "#fd5555"];
       var option = {
+        title: {
+            text: "软广趋势",
+            top: 20,
+            left: 50
+        },
         legend: {
           show: true,
           data: chartData.lendata,
+          top:"10%"
         },
         xAxis: {
           type: "category",
           data: chartData.keys,
         },
-        color: ["#1b9ade", "#fd5555"],
+        color: c,
         tooltip: {
           trigger: "axis",
           textStyle: {
@@ -318,6 +338,7 @@ export default {
           backgroundColor: "rgba(255,255,255,.8)",
           borderColor: "#1b9ade",
           borderWidth: 1,
+
           formatter: m => {
             let out = "";
             for (let i = 0; i < m.length; i++) {
@@ -326,7 +347,13 @@ export default {
                 day =
                   v.dataIndex > 8 ? v.dataIndex + 1 : "0" + (v.dataIndex + 1),
                 val = (v.value - 0).toFixed(2) - 0;
-              out += time[0] + "-" + time[1];
+              out +=
+                "<div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: " +
+                c[i] +
+                "' ></div> " +
+                time[0] +
+                "-" +
+                time[1];
               this.industryRang + 1 <= 2 ? (out += "-" + day) : "";
               out +=
                 ": " + val + this.soft_list[this.soft_act].unit + "<br />";
@@ -336,7 +363,7 @@ export default {
         },
         yAxis: {
           type: "value",
-          name: '单位:' + this.soft_list[this.soft_act].unit,
+          name: "单位:" + this.soft_list[this.soft_act].unit,
           scale: true,
           axisLabel: {
             formatter: arr => {
@@ -344,7 +371,7 @@ export default {
             },
           },
         },
-        grid: [{ left: 150, top: "10%", buttom: 0, right: 100 }],
+        grid: [{ left: 150, top: "20%", buttom: 0, right: 100 }],
         series: chartData.value.map((v, i) => {
           return {
             showSymbol: false,
@@ -371,6 +398,7 @@ export default {
 
 <style>
 .AdvertisingEye .title_card {
+  font-weight: 600;
   background-color: #1989fa;
   height: 40px;
   line-height: 40px;

+ 9 - 6
src/views/AdvertisingEye/components/allTrendB.vue

@@ -222,6 +222,7 @@ export default {
         height: (this.$refs.launch.offsetWidth * 6) / 16,
       });
       let unit = this.hard_list[this.hard_act].unit;
+      let c = ["#1b9ade", "#fd5555"]
       var option = {
         legend: {
           show: true,
@@ -232,7 +233,7 @@ export default {
           data: chartData.keys,
           boundaryGap: false,
         },
-        color: ["#1b9ade", "#fd5555"],
+        color: c,
         yAxis: {
           name: '单位:' + this.hard_list[this.hard_act].unit,
           type: "value",
@@ -256,11 +257,11 @@ export default {
               m1 = m[1] || undefined;
             let tnow = list.now[m0.dataIndex] || {},
               tbefore = list.before[m0.dataIndex] || {};
-            let out = `${tbefore.startTime || ""}: ${
+            let out = `<div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: ${c[0]}' ></div> ${tbefore.startTime || ""}: ${
               m0.value ? m0.value - 0 : 0
             }${unit}`;
             m1 &&
-              (out += ` <br />${tnow.startTime || ""}: ${
+              (out += ` <br /><div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: ${c[1]}' ></div> ${tnow.startTime || ""}: ${
                 m1.value ? m1.value - 0 : 0
               }${unit}`);
             return out;
@@ -290,6 +291,7 @@ export default {
       soft_chart.resize({
         height: (this.$refs.trend.offsetWidth * 6) / 16,
       });
+      let c = ["#1b9ade", "#fd5555"];
       let unit = this.soft_list[this.soft_act].unit;
       var option = {
         legend: {
@@ -300,7 +302,7 @@ export default {
           type: "category",
           data: chartData.keys,
         },
-        color: ["#1b9ade", "#fd5555"],
+        color: c,
         tooltip: {
           trigger: "axis",
           textStyle: {
@@ -314,11 +316,11 @@ export default {
               m1 = m[1] || undefined;
             let tnow = list.now[m0.dataIndex] || {},
               tbefore = list.before[m0.dataIndex] || {};
-            let out = `${tbefore.startTime || ""}: ${
+            let out = "<div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: " + c[0] + "' ></div> " + `${tbefore.startTime || ""}: ${
               m0.value ? m0.value - 0 : 0
             }${unit}`;
             m1 &&
-              (out += ` <br />${tnow.startTime || ""}: ${
+              (out += ` <br /><div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: ${c[1]}' ></div> ${tnow.startTime || ""}: ${
                 m1.value ? m1.value - 0 : 0
               }${unit}`);
             return out;
@@ -361,6 +363,7 @@ export default {
 
 <style>
 .AdvertisingEye .title_card {
+  font-weight: 600;
   background-color: #1989fa;
   height: 40px;
   line-height: 40px;

+ 15 - 16
src/views/AdvertisingEye/components/distribution.vue

@@ -186,18 +186,19 @@ export default {
       });
       let k = [],
         item = [],
-        max =
-          list[0][
-            this.soft_planting_list[this.soft_planting_act].proportionType
-          ] || 0;
+        total = 0;
+
+      list.map(v => {
+        total +=
+          (v[this.soft_planting_list[this.soft_planting_act].proportionType] ||
+            0) - 0;
+      });
       list.map(v => {
-        k.push({ name: v.name, max });
-        let val =
-          (
-            v[this.soft_planting_list[this.soft_planting_act].proportionType] -
-            0
-          ).toFixed(2) - 0;
+        let value =
+          v[this.soft_planting_list[this.soft_planting_act].proportionType] - 0;
+        let val = ((value / total) * 100).toFixed(2) - 0;
         item.push(val);
+        k.push({ name: v.name, max: item[0] + 10 });
       });
       const buildSeries = function(data) {
         const helper = data.map((item, index) => {
@@ -225,11 +226,7 @@ export default {
             tooltip: {
               show: index === 0 ? false : true,
               formatter: function() {
-                return (
-                  k[index - 1].name +
-                  ":" +
-                  item[index - 1]
-                );
+                return k[index - 1].name + ":" + item[index - 1] + "%";
               },
             },
             z: index === 0 ? 1 : 2,
@@ -239,7 +236,9 @@ export default {
       };
 
       let option = {
-        tooltip: {trigger: "item",},
+        tooltip: {
+          trigger: "item",
+        },
         radar: {
           radius: 130,
           shape: "circle",

+ 8 - 8
src/views/AdvertisingEye/components/focus.vue

@@ -77,7 +77,7 @@
                       : ''
                   "
                 >
-                  费用
+                  费用(万元)
                 </span>
               </template>
               <template #default="scope">
@@ -198,7 +198,7 @@
                       : ''
                   "
                 >
-                  费用
+                  费用(万元)
                 </span>
               </template>
               <template #default="scope">
@@ -300,7 +300,7 @@
               <template #header>
                 <span
                   :style="
-                    hard_important_list[hard_important_act].type === 1
+                    soft_important_list[soft_important_act].type === 1
                       ? 'color: red'
                       : ''
                   "
@@ -316,7 +316,7 @@
               <template #header>
                 <span
                   :style="
-                    hard_important_list[hard_important_act].type === 2
+                    soft_important_list[soft_important_act].type === 2
                       ? 'color: red'
                       : ''
                   "
@@ -405,7 +405,7 @@
               <template #header>
                 <span
                   :style="
-                    hard_important_list[hard_important_act].type === 1
+                    soft_important_list[soft_important_act].type === 1
                       ? 'color: red'
                       : ''
                   "
@@ -421,7 +421,7 @@
               <template #header>
                 <span
                   :style="
-                    hard_important_list[hard_important_act].type === 2
+                    soft_important_list[soft_important_act].type === 2
                       ? 'color: red'
                       : ''
                   "
@@ -561,8 +561,8 @@ export default {
     numFor(num) {
       if (!num) return 0;
       if (isNaN(num)) return 0;
-      if (num >= 100000000) return ((num / 100000000).toFixed(2) -0 ) + "亿";
-      if (num >= 10000) return ((num / 10000).toFixed(2) -0) + "万";
+    //   if (num >= 100000000) return ((num / 100000000).toFixed(2) -0 ) + "亿";
+    //   if (num >= 10000) return ((num / 10000).toFixed(2) -0) + "万";
       return Number(num).toFixed(2) -0;
     },
     init() {

+ 18 - 7
src/views/AdvertisingEye/components/structure.vue

@@ -35,16 +35,19 @@ export default {
         {
           text: "时长",
           proportionType: "timeSize",
+          unit: "分",
           type: 2,
         },
         {
           text: "频次",
           proportionType: "pinci",
+          unit: "次",
           type: 1,
         },
         {
           text: "客户数",
           proportionType: "custom",
+          unit: "个",
           type: 4,
         },
       ],
@@ -85,16 +88,16 @@ export default {
         let r = all[0] || [],
           y = all[1] || [];
         r = r.map(v => {
-          let value =  v[this.industry_list[this.industry_act].proportionType];
-          if(!isNaN(value)) value = (value - 0).toFixed(2) - 0;
+          let value = v[this.industry_list[this.industry_act].proportionType];
+          if (!isNaN(value)) value = (value - 0).toFixed(2) - 0;
           return {
             name: v.name,
             value,
           };
         });
         y = y.map(v => {
-          let value =  v[this.industry_list[this.industry_act].proportionType];
-          if(!isNaN(value)) value = (value - 0).toFixed(2) - 0;
+          let value = v[this.industry_list[this.industry_act].proportionType];
+          if (!isNaN(value)) value = (value - 0).toFixed(2) - 0;
           return {
             name: v.name,
             value,
@@ -105,9 +108,9 @@ export default {
     },
     industry_change(i) {
       this.industry_act = i;
-      this.init()
+      this.init();
     },
-    industryChart(r,y) {
+    industryChart(r, y) {
       if (!this.$refs.industry) return;
       if (industry_chart && industry_chart.dispose) {
         industry_chart.dispose();
@@ -134,7 +137,15 @@ export default {
         ],
         tooltip: {
           trigger: "item",
-          formatter: '{b} {d}%'
+          //   formatter: '{b} {d}%'
+          formatter: item => {
+            return (
+              item.name +
+              " " +
+              (Number(item.value).toFixed(2) - 0) +
+              (this.industry_list[this.industry_act].unit || "")
+            );
+          },
         },
         series: [
           {

+ 63 - 25
src/views/AdvertisingEye/components/tranche.vue

@@ -167,7 +167,14 @@ export default {
         ],
         tooltip: {
           trigger: "item",
-          formatter: "{b} {d}%",
+          formatter: item => {
+            return (
+              item.name +
+              " " +
+              (Number(item.value).toFixed(2) - 0) +
+              (this.share_list[this.share_act].unit || "")
+            );
+          },
         },
         legend: {
           left: "center",
@@ -177,15 +184,22 @@ export default {
           return {
             name: i === 0 ? "硬广" : "软广",
             type: "pie",
-            radius: ["40%", "70%"],
+            radius: ["30%", "60%"],
             center: [25 + i * 50 + "%", "50%"],
             avoidLabelOverlap: false,
             label: {
-              show: false,
-              position: "center",
+              show: true,
+              formatter: item => {
+                return (
+                  item.name +
+                  " \n" +
+                  (Number(item.value || 0).toFixed(2) - 0) +
+                  this.share_list[this.share_act].unit
+                );
+              },
             },
             labelLine: {
-              show: false,
+              show: true,
             },
             data: v.map(item => {
               return {
@@ -210,6 +224,49 @@ export default {
       share1_chart.resize({
         height: (this.$refs.share1.offsetWidth * 6) / 25,
       });
+      let t = -1;
+      let k = this.share_list[this.share_act].proportionType || "";
+      list[0][0] = list[0][0] || { [k]: 0 };
+      list[0][1] = list[0][1] || { [k]: 0 };
+      list[1][0] = list[1][0] || { [k]: 0 };
+      list[1][1] = list[1][1] || { [k]: 0 };
+      if (list[0][0][k] + list[1][0][k] === 0) t = 0;
+      if (list[0][1][k] + list[1][1][k] === 0) t = 1;
+      let li = list.map(v => {
+        const item = v[0] || {};
+        return {
+          name: item.name,
+          type: "bar",
+          stack: "total",
+          label: {
+            show: true,
+          },
+          emphasis: {
+            focus: "series",
+          },
+          data: v.map(o => ((o[k] || 0) * 100).toFixed(2) - 0),
+        };
+      });
+      if (t > -1 && k === "fee") {
+        li.push({
+          type: "bar",
+          stack: "total",
+          color: "rgba(255,255,255,1)",
+          tooltip: {
+            show: false,
+          },
+          label: {
+            show: true,
+            formatter: item => {
+              if (t !== -1 && item.dataIndex === t) {
+                return t === 0 ? "硬广无刊例价" : "软广无刊例价";
+              }
+            },
+          },
+          data: t === 1 ? [0, 100] : [100, 0],
+        });
+      }
+
       var option = {
         tooltip: {
           trigger: "item",
@@ -243,26 +300,7 @@ export default {
           type: "category",
           data: ["硬广", "软广"],
         },
-        series: list.map(v => {
-          const item = v[0] || {};
-          return {
-            name: item.name,
-            type: "bar",
-            stack: "total",
-            label: {
-              show: true,
-            },
-            emphasis: {
-              focus: "series",
-            },
-            data: v.map(
-              o =>
-                (
-                  (o[this.share_list[this.share_act].proportionType] || 0) * 100
-                ).toFixed(2) - 0
-            ),
-          };
-        }),
+        series: li,
       };
       option && share1_chart.setOption(option);
     },

+ 38 - 10
src/views/AdvertisingEye/components/trancheB.vue

@@ -88,7 +88,18 @@ export default {
         type: this.share_list[this.share_act].type,
       }).then(res => {
         let li = (res || { data: [] }).data || [];
-        this.share1Chart([
+        let y = [
+            ((li[1].hardY || 0) - 0).toFixed(2) - 0,
+            ((li[0].softY || 0) - 0).toFixed(2) - 0,
+          ],
+          w = [
+            ((li[1].hardW || 0) - 0).toFixed(2) - 0,
+            ((li[0].softW || 0) - 0).toFixed(2) - 0,
+          ],
+          t = -1;
+        if (y[0] + w[0] === 0) t = 0;
+        if (y[1] + w[1] === 0) t = 1;
+        let list = [
           {
             name: "央视",
             type: "bar",
@@ -99,10 +110,7 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data: [
-              ((li[0].softY || 0) - 0).toFixed(2) - 0,
-              ((li[1].hardY || 0) - 0).toFixed(2) - 0,
-            ],
+            data: y,
           },
           {
             name: "卫视",
@@ -114,12 +122,32 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data: [
-              ((li[0].softW || 0) - 0).toFixed(2) - 0,
-              ((li[1].hardW || 0) - 0).toFixed(2) - 0,
-            ],
+            data: w,
           },
-        ]);
+        ];
+        if (
+          t > -1 &&
+          this.share_list[this.share_act].proportionType === "fee"
+        ) {
+          list.push({
+            type: "bar",
+            stack: "total",
+            color: "rgba(255,255,255,1)",
+            tooltip: {
+              show: false,
+            },
+            label: {
+              show: true,
+              formatter: item => {
+                if (t !== -1 && item.dataIndex === t) {
+                  return t === 0 ? "硬广无刊例价" : "软广无刊例价";
+                }
+              },
+            },
+            data: t === 0 ? [100, 0] : [0, 100],
+          });
+        }
+        this.share1Chart(list);
       });
     },
     share_change(i) {

+ 38 - 24
src/views/HardAdvertisement/HardAdvertisement.vue

@@ -750,15 +750,20 @@ export default {
           realItem = o.dt ? o : n;
         if (keyName === "launch") keys.push(this.getDate(realItem.dt, i));
         if (keyName === "trend") {
-            let eT = Number(realItem.hour) + 1;
-            keys.push(realItem.hour + "时~" + eT + '时');
+          let eT = Number(realItem.hour) + 1;
+          eT > 9 ? "" : (eT = "0" + eT);
+          keys.push(realItem.hour + ":00~" + eT + ":00");
         }
         o.dt && realKey[0].push(o.dt);
         n.dt && realKey[1].push(n.dt);
         o[key] >= 0 &&
-          value[0].push(key === "timeSize" ? o[key] / 60000 : o[key]);
+          value[0].push(
+            key === "timeSize" ? (o[key] / 60000).toFixed(2) - 0 : o[key]
+          );
         n[key] >= 0 &&
-          value[1].push(key === "timeSize" ? n[key] / 60000 : n[key]);
+          value[1].push(
+            key === "timeSize" ? (n[key] / 60000).toFixed(2) - 0 : n[key]
+          );
       }
 
       if (old && old.length) {
@@ -792,8 +797,12 @@ export default {
         value = [];
       for (let i = 0; i < org.length; i++) {
         let o = org[i] || {};
-        keys.push(o.hour);
-        value.push(o.timeSize * 100);
+        let eT = Number(o.hour) + 1;
+        eT > 9 ? "" : (eT = "0" + eT);
+        if (o.hour === "平均值") {
+          keys.push(o.hour);
+        } else keys.push(o.hour + ":00~" + eT + ":00");
+        value.push((o.timeSize * 100).toFixed(2) - 0);
       }
       return {
         keys,
@@ -862,14 +871,18 @@ export default {
               launch_list = this.launch_list[this.launch_act] || {};
             let out = "";
             if (s.dataIndex >= 0) {
-              let dt = no[s.dataIndex] ? no[s.dataIndex].dt : "";
-              out += `${launch_list.text} <br /> ${dt}: ${vb +
+              let dt = bf[s.dataIndex] ? bf[s.dataIndex].dt : "";
+              out += `${
+                launch_list.text
+              } <br /> <div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: #1b9ade' ></div> ${dt}: ${vb +
                 launch_list.unit}`;
             }
             if (e.dataIndex >= 0) {
-              let dt = bf[e.dataIndex] ? bf[e.dataIndex].dt : "";
-              out += `<br />${dt}: ${vn + launch_list.unit}`;
+              let dt = no[e.dataIndex] ? no[e.dataIndex].dt : "";
+              out += `<br /> <div style='display:inline-block;width: 10px;height: 10px;border-radius: 50%;background: #fd5555' ></div> ${dt}: ${vn +
+                launch_list.unit}`;
             }
+
             return out;
           },
         },
@@ -919,12 +932,17 @@ export default {
         xAxis: {
           type: "category",
           data: chartData.keys,
+          axisLabel: {
+            formatter: v => {
+              return v.split("~")[0] || "";
+            },
+          },
           nameTextStyle: {
             align: "right",
           },
         },
         tooltip: {
-          trigger: "axis",
+          trigger: "item",
           textStyle: {
             color: "#000000",
           },
@@ -932,17 +950,10 @@ export default {
           borderColor: "#1b9ade",
           borderWidth: 1,
           formatter: item => {
-            let s = item[0] || {},
-              e = item[1] || {};
+            let s = item || {};
             let vb = this.numFor(s.value || 0),
-              vn = this.numFor(e.value || 0),
               sele = this.launch_list[this.trend_act];
-            let sTime = s.name,
-              eTime = s.name - 0 + 1;
-            eTime > 9 ? "" : (eTime = ["0", eTime].join(""));
-            return `${sele.text} <br />${sTime}时~${eTime}时: ${vb +
-              (sele.unit || "")} <br />${sTime}时~${eTime}时: ${vn +
-              (sele.unit || "")}`;
+            return `${sele.text} <br />${s.name} ${vb + (sele.unit || "")}`;
           },
         },
         yAxis: {
@@ -980,10 +991,11 @@ export default {
       saturation_chart.resize({
         height: (this.$refs.saturation.offsetWidth * 6) / 16,
       });
+      let obj = this.timeSelect[this.active] || {};
       var option = {
-        legend: {
-          show: true,
-          data: ["饱和度"],
+        title: {
+          text: "饱和度(%) " + obj.startDate + "到" + obj.endDate,
+          left: "center",
         },
         xAxis: {
           type: "category",
@@ -995,7 +1007,8 @@ export default {
             type: "shadow",
           },
           formatter: item => {
-            return item.name + "时:" + item.value.toFixed(2) + "%";
+            let key = item.name === "平均值" ? item.name : item.name + "时: ";
+            return key + item.value.toFixed(2) + "%";
           },
         },
         yAxis: {
@@ -1221,6 +1234,7 @@ export default {
   background-color: #40a1f3;
 }
 .hardAdvertisement .title_card {
+  font-weight: 600;
   background-color: #1989fa;
   height: 40px;
   line-height: 40px;