实时数据

src/api/index.js

@@ -720,7 +720,7 @@ export function guijiDepartment(data) {
   return ajaxAxios({
     url: "/topic/read",
     method: "POST",
-    data
+    data,
   });
 }
 
@@ -755,7 +755,7 @@ export function guijiFagao(data) {
   return ajaxAxios({
     url: "/topic/detail",
     method: "POST",
-    data
+    data,
   });
 }
 
@@ -768,7 +768,7 @@ export function leverAudience(data) {
     urlType: "leverAudience",
     url: "/cxzx-program/flow/channels",
     method: "GET",
-    data
+    data,
   });
 }
 
@@ -781,7 +781,7 @@ export function audioGet(data) {
     urlType: "leverAudience",
     url: "/cxzx-radio-rate/radio-rate",
     method: "POST",
-    data
+    data,
   });
 }
 
@@ -794,6 +794,62 @@ export function audioList(data) {
     urlType: "leverAudience",
     url: "/cxzx-radio-rate/radio-names",
     method: "GET",
-    data
+    data,
+  });
+}
+
+/**
+ * 获取app在线实时数
+ * @return {AxjxPromise}
+ */
+export function getRealAppOnline(data) {
+  return ajax({
+    urlType: "leverAudience",
+    url: "/cxzx-program/new-media/realTime/data",
+    method: "GET",
+    data,
+  });
+}
+
+/**
+ * 获取大数据平台检索条件的权限
+ * @return {AxjxPromise}
+ */
+export function getRule(data) {
+  const parent = window.parent;
+  let token = parent.localStorage.token
+    ? parent.localStorage.token
+    : "eb8ddf425ee55dfe3ef3c19cbd4babc346e07d10057137f362fcf0cc14d301a2a2cadd1b669303a3177d5b5768ced125a33f7d5296c6edd0e0f004203711081e51c31634d0c39025a784a1c73faae91fbacdb245749422fd7508bf9aacca379f5560908ddc0fbcfa6901ffe77099b12982bde1e9aa56bd78802b58a1efec3f886252996282bc36906feeaf1f812f0e3d49bf854f36661ed279e363a57d2b20fc96428dbf4892a6c544639ca9f4f0c0a956fcd606edfbe53f7c2f0742c298ead3";
+
+  return ajax({
+    urlType: "leverAudience",
+    url: "/rmtrate/NODE/SEQ/roleCtrl/findRoleCtrl",
+    method: "POST",
+    headers: {
+      UserInfo: token,
+      requestid: "tv" + Date.now(),
+    },
+    data,
+  });
+}
+
+/**
+ * 获取大数据平台应用列表
+ * @return {AxjxPromise}
+ */
+export function getAppList(data) {
+  const parent = window.parent.localStorage;
+  let token = parent.token
+    ? parent.token
+    : "eb8ddf425ee55dfe3ef3c19cbd4babc346e07d10057137f362fcf0cc14d301a2a2cadd1b669303a3177d5b5768ced125a33f7d5296c6edd0e0f004203711081e51c31634d0c39025a784a1c73faae91fbacdb245749422fd7508bf9aacca379f5560908ddc0fbcfa6901ffe77099b12982bde1e9aa56bd78802b58a1efec3f886252996282bc36906feeaf1f812f0e3d49bf854f36661ed279e363a57d2b20fc96428dbf4892a6c544639ca9f4f0c0a956fcd606edfbe53f7c2f0742c298ead3";
+  return ajax({
+    urlType: "leverAudience",
+    url: "/rmtrate/sysparam/info",
+    method: "POST",
+    headers: {
+      UserInfo: token,
+      requestid: "tv" + Date.now(),
+    },
+    data,
   });
 }

src/config/index.js

@@ -1,6 +1,6 @@
 import tableCol from "./tableCol";
-let useApiUrl = "http://172.16.101.20:8762/cxzx-kuyun",
-  useApiUrl1 = "http://172.16.101.20:8762/cxzx-program",
+let url = "http://172.16.101.20:8762/cxzx-kuyun",
+  url2 = "http://172.16.101.20:8762/cxzx-program",
   kuyunApi = "http://172.16.101.20:8762/cxzx-fm",
   guijiApi = "http://topic.smcic.net",
   leverAudience = "http://172.16.101.20:8762";
@@ -8,8 +8,8 @@ let base = "";
 // let isRelease = false; //是否是线上发布版本
 if (process.env.NODE_ENV !== "development") {
   base = window.parent.location.origin || "";
-  useApiUrl = base + "/cxzx-kuyun";
-  useApiUrl1 = base + "/cxzx-program";
+  url = base + "/cxzx-kuyun";
+  url2 = base + "/cxzx-program";
   kuyunApi = base + "/cxzx-fm";
   leverAudience = base;
   //   isRelease = true;
@@ -17,8 +17,8 @@ if (process.env.NODE_ENV !== "development") {
 
 export default {
   base: {
-    url: useApiUrl,
-    url2: useApiUrl1,
+    url,
+    url2,
     url3: "",
     leverAudience,
     kuyunApi,
@@ -29,7 +29,7 @@ export default {
     requestRetry: 4,
     requestRetryDelay: 800,
     token: "",
-    Intranet: ""
+    Intranet: "",
   },
   order: {
     ascending: "ASC",
@@ -1316,18 +1316,17 @@ export default {
     },
   ],
   audioCycle: [
-      {
-          label: '无',
-          value: 'None'
-      },
-      {
-          label: '日',
-          value: 'Day'
-      },
-      {
-          label: '月',
-          value: 'Month'
-      }
-
-  ]
+    {
+      label: "无",
+      value: "None",
+    },
+    {
+      label: "日",
+      value: "Day",
+    },
+    {
+      label: "月",
+      value: "Month",
+    },
+  ],
 };

src/router/index.js

@@ -71,6 +71,12 @@ const routes = [
       name: "RadioBroadcast",
       component: () => import("../views/RadioBroadcast.vue")
   },
+  {
+    path: "/realOnline",
+    name: "RealOnline",
+    component: () => import("../views/RealOnline/index.vue")
+  },
+
   {
     path: "/country",
     component: () => import("../views/Country/Index.vue"),

src/utils/request.js

@@ -10,7 +10,7 @@ function getdata(data) {
   return text;
 }
 
-export default function(ori) {
+export default function (ori) {
   let method = ori.method.toUpperCase();
   let baseurl = config.base[ori.urlType || "url"];
   let url = baseurl + ori.url;
@@ -27,13 +27,19 @@ export default function(ori) {
     else if (window.ActiveXObject)
       xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
     xhttp.open(method, url, true);
+    if (ori.headers && xhttp.setRequestHeader && typeof ori.headers === "object") {
+      // 存在header
+      const keys = Object.keys(ori.headers);
+      for (let i = 0; i < keys.length; i++) {
+        const v = keys[i];
+        xhttp.setRequestHeader(v, ori.headers[v]);
+      }
+    }
     if (method === "POST") {
       xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
       xhttp.send(JSON.stringify(ori.data));
-    } else {
-      xhttp.send();
-    }
-    xhttp.onreadystatechange = function() {
+    } else xhttp.send();
+    xhttp.onreadystatechange = function () {
       if (this.readyState != 4 || this.status != 200) return;
       let data = {};
       try {
@@ -48,6 +54,7 @@ export default function(ori) {
 
       data && data.response && (data = data.response);
       if (!ori.urlType && !data.status) return reject(data.message);
+      if (data.code) return reject(data)
       resolve(data.data || data.response || data);
     };
   });

src/views/RealOnline/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="RealOnline">
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>用户分析</el-breadcrumb-item>
+      <el-breadcrumb-item>实时访客</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card class="box-card">
+      <el-form
+        ref="form"
+        :model="form"
+        size="small"
+        :inline="true"
+        label-width="120px"
+        class="demo-form-inline"
+      >
+        <el-form-item label="应用">
+          <el-select v-model="form.app" placeholder="请选择时段">
+            <el-option
+              v-for="item in cycle"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+              :disabled="item.disabled"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item style="float: right">
+          <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <br />
+    <el-card class="box-card">
+      <div class="realLineChart" ref="realLineChart"></div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { getRealAppOnline, getRule, getAppList } from "@/api/index";
+
+import * as echarts from "echarts/core";
+import { LineChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  CanvasRenderer,
+]);
+
+// import config from "@/config/index";
+let chart = undefined,
+  time = undefined;
+export default {
+  name: "RealOnline",
+  data() {
+    return {
+      form: {
+        app: "2",
+      },
+      tableData: [],
+      cycle: [],
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  computed: {},
+  methods: {
+    init() {
+      if (time) clearInterval(time);
+      if (chart && chart.dispose) chart.dispose();
+      getRule({
+        db: "authplat",
+        exportMark: "0",
+        menuid: 221,
+        roleid: 9999,
+      }).then(r => {
+        console.log(r);
+        getAppList({
+          exportMark: "0",
+          gcode: "SOURCE",
+          pageid: 1,
+          pagesize: 1000,
+        }).then(li => {
+          if (li.status !== "0") return;
+          const l = li.output.data || [];
+          this.form = {
+            app: (l[0] || { mname: "" }).mname,
+          };
+          this.onSubmit();
+          time = setInterval(() => this.onSubmit(), 60000);
+          this.cycle = (l || []).map(v => {
+            return {
+              value: v.mname,
+              label: v.mname,
+            };
+          });
+        });
+      });
+    },
+    onSubmit() {
+      getRealAppOnline({ appName: this.form.app })
+        .then(r => {
+          if (!this.$refs.realLineChart) return;
+          !chart && (chart = echarts.init(this.$refs.realLineChart));
+          chart.resize({
+            height: (this.$refs.realLineChart.offsetWidth * 6) / 16,
+          });
+          const keyList = [],
+            valueList = [];
+          (r || []).map(v => {
+            const key = v.recMinute.split(" ")[1] || "";
+            keyList.push(key);
+            valueList.push(v.total);
+          });
+          chart.setOption({
+            tooltip: {
+              trigger: "axis",
+            },
+            grid: {
+              left: "3%",
+              right: "4%",
+              bottom: "3%",
+              containLabel: true,
+            },
+            xAxis: {
+              type: "category",
+              boundaryGap: false,
+              data: keyList,
+            },
+            yAxis: {
+              type: "value",
+            },
+            series: [
+              {
+                data: valueList,
+                symbolSize: 0,
+                lineStyle: {
+                  width: 1,
+                },
+                type: "line",
+                smooth: true,
+                color: "rgba(58,132,255,.9)",
+                areaStyle: {
+                  color: {
+                    type: "linear",
+                    x: 0,
+                    y: 0,
+                    x2: 0,
+                    y2: 1,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: "rgba(58,132,255, 0.8)", // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: "rgba(58,132,255, 0.1)", // 100% 处的颜色
+                      },
+                    ],
+                    global: false, // 缺省为 false
+                  },
+                },
+              },
+            ],
+          });
+        })
+        .catch(err => {
+          console.log(err);
+          chart.clear();
+        });
+    },
+    formatListData() {
+      let time = "";
+      if (this.form.rangeTime.length) {
+        let start = new Date(this.form.rangeTime[0]);
+        let end = new Date(this.form.rangeTime[1]);
+        let start_hour = start.getHours();
+        let start_min = start.getMinutes();
+        let end_hour = end.getHours();
+        let end_min = end.getMinutes();
+        start_hour = start_hour > 9 ? start_hour + "" : "0" + start_hour;
+        start_min = start_min > 9 ? start_min + "" : "0" + start_min;
+        end_hour = end_hour > 9 ? end_hour + "" : "0" + end_hour;
+        end_min = end_min > 9 ? end_min + "" : "0" + end_min;
+        if (end_hour + end_min === "2359") {
+          end_hour = "24";
+          end_min = "00";
+        }
+        time = start_hour + start_min + "_" + end_hour + end_min;
+      } else {
+        time = "0000_2400";
+      }
+      return {
+        time_range: time,
+      };
+    },
+  },
+  components: {},
+};
+</script>
+
+<style>
+.RealOnline {
+  margin: 10px 15px;
+}
+.RealOnline .has-seconds .el-time-spinner__wrapper:last-child {
+  display: none;
+}
+</style>