提交

src/components/LiveOverviewChart.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="LiveOverviewChart" ref="LiveOverviewChart"></div>
+</template>
+
+<script>
+// import * as echarts from "echarts";
+// import config from "@/config/index";
+import * as echarts from 'echarts/core';
+import { BarChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  GridComponent,
+  LegendComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([
+  TitleComponent,
+  GridComponent,
+  CanvasRenderer,
+  LegendComponent,
+  BarChart,
+]);
+
+let chart = undefined;
+export default {
+  name: 'LiveOverviewChart',
+  props: ['list','title','dataKey'],
+  data: function () {
+    return {};
+  },
+  filters: {},
+  methods: {
+    numform(n) {
+      let num = n;
+      if (isNaN(n)) num = "0";
+      else if (n >= 100000000)
+        num =
+          ((n / 100000000).toFixed(2) - 0 + "").replace(
+            /\B(?=(?:\d{3})+\b)/g,
+            ","
+          ) + "亿";
+      else if (n >= 10000)
+        num =
+          ((n / 10000).toFixed(2) - 0 + "").replace(
+            /\B(?=(?:\d{3})+\b)/g,
+            ","
+          ) + "万";
+      else num = (num + "").replace(/\B(?=(?:\d{3})+\b)/g, ",");
+      return num;
+    },
+    createChart() {
+      if (!this.$refs.LiveOverviewChart) return;
+      chart = echarts.init(this.$refs.LiveOverviewChart,  undefined, {
+        height: (this.$refs.LiveOverviewChart.offsetWidth * 6) / 16,
+        width: this.$refs.LiveOverviewChart.offsetWidth
+      });
+      const data = [];
+      const key = [];
+      const list = JSON.parse(JSON.stringify(this.list)).sort((a, b) => {
+        return b[this.dataKey] - a[this.dataKey];
+      });
+      for (let i = 0; i < list.length; i++) {
+        const v = list[i];
+        data.push(v[this.dataKey]);
+        key.push(v.centerName);
+      }
+      chart.setOption({
+        title: {
+          text: this.title,
+          subtext: '',
+        },
+        grid: { left: 80, top: 50, bottom: 30, right: 10 },
+        xAxis: {
+          type: 'category',
+          data: key,
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            formatter: v => {
+              return this.numform(v);
+            },
+          },
+        },
+        series: [
+          {
+            type: 'bar',
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: '#83bff6' },
+                { offset: 0.5, color: '#188df0' },
+                { offset: 1, color: '#188df0' },
+              ]),
+            },
+            data,
+          },
+        ],
+      });
+    },
+  },
+  mounted() {
+    this.createChart();
+  },
+  beforeUnmount: function () {
+    chart.dispose();
+  },
+  components: {},
+};
+</script>
+<style></style>

src/components/TreemapChart.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="LiveOverviewChart" ref="LiveOverviewChart"></div>
+</template>
+
+<script>
+// import * as echarts from "echarts";
+// import config from "@/config/index";
+import * as echarts from 'echarts/core';
+import { PieChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  GridComponent,
+  LegendComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([
+  TitleComponent,
+  GridComponent,
+  CanvasRenderer,
+  LegendComponent,
+  PieChart,
+]);
+
+let chart = undefined;
+export default {
+  name: 'LiveOverviewChart',
+  props: ['list', 'dataKey', 'title', 'dy'],
+  data: function () {
+    return {};
+  },
+  filters: {},
+  methods: {
+    createChart() {
+      if (!this.$refs.LiveOverviewChart) return;
+      chart = echarts.init(this.$refs.LiveOverviewChart, undefined, {
+        height: (this.$refs.LiveOverviewChart.offsetWidth * 6) / 16,
+        width: this.$refs.LiveOverviewChart.offsetWidth,
+      });
+      const data = [];
+      const list = JSON.parse(JSON.stringify(this.list)).sort((a, b) => {
+        return b[this.dataKey] - a[this.dataKey];
+      });
+      for (let i = 0; i < list.length; i++) {
+        const v = list[i];
+        v[this.dataKey] && data.push({
+          value: v[this.dataKey],
+          name: v.centerName,
+        });
+      }
+      chart.setOption({
+        title: {
+          text: this.title,
+          subtext: '',
+        },
+        label: {
+          alignTo: 'edge',
+          formatter: '{name|{b}}\n{time|{c} ' + (this.dy || '') + '}',
+          minMargin: 5,
+          edgeDistance: 10,
+          lineHeight: 15,
+          rich: {
+            time: {
+              fontSize: 10,
+              color: '#999',
+            },
+          },
+        },
+        series: [
+          {
+            name: 'Access From',
+            type: 'pie',
+            radius: '50%',
+            data,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)',
+              },
+            },
+          },
+        ],
+      });
+    },
+  },
+  mounted() {
+    this.createChart();
+  },
+  beforeUnmount: function () {
+    chart.dispose();
+  },
+  components: {},
+};
+</script>
+<style></style>

src/config/index.js

@@ -20,7 +20,7 @@ let url = 'http://172.16.101.20:8762/cxzx-kuyun',
 let base = '';
 // let isRelease = false; //是否是线上发布版本
 if (process.env.NODE_ENV !== 'development') {
-  base = window.parent.location.origin || '';
+//   base = window.parent.location.origin || '';
   url = base + '/cxzx-kuyun';
   url2 = base + '/cxzx-program';
   kuyunApi = base + '/cxzx-fm';

src/router/index.js

@@ -230,6 +230,13 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "Proofread" */ "../views/Proofread/index.vue"),
   },
+  //  全媒体平台-直播概览
+  {
+    path: "/LiveOverview",
+    name: "LiveOverview",
+    component: () =>
+      import(/* webpackChunkName: "Proofread" */ "../views/LiveOverview/index.vue"),
+  },
 
   countryRouter, // 全国数据
 ];

src/views/Jugou/Jugouout.vue

@@ -368,6 +368,9 @@ export default {
     },
     videoload() {
       this.videoerrorStart = false;
+      const video = document.querySelector('video');
+      let w = Math.ceil((500 * video.videoWidth) / video.videoHeight);
+      video.style.width = w + 'px';
     },
     formateNum(n) {
       let num = n;
@@ -393,6 +396,9 @@ export default {
 </script>
 
 <style>
+body {
+  overflow: hidden;
+}
 .Jugouout {
   min-width: 1149px;
   padding: 10px 12px;
@@ -402,6 +408,8 @@ export default {
   width: 100%;
   height: 500px;
   background-color: #000;
+  margin: 0 auto;
+  display: block;
 }
 .Jugouout .lineinfobackground {
   font-size: 12px;

src/views/LiveOverview/index.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="LiveOverview">
+    <!-- <div class="row">
+      <div :class="{ col: true }" v-for="(item, index) in LOlist" :key="index">
+        <countTo :startVal="0" :endVal="item.views" :duration="100" />
+        <p v-text="item.centerName"></p>
+      </div>
+    </div> -->
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
+      <el-breadcrumb-item>直播概览</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-card v-if="LOlist.length">
+      <chart title="部门访问人次" :list="LOlist" dataKey="views" />
+    </el-card>
+    <br />
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card v-if="LOlist.length">
+          <TreemapChart
+            title="部门直播场次数"
+            dy="场"
+            :list="LOlist"
+            dataKey="liveNum"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card v-if="LOlist.length">
+          <TreemapChart
+            title="部门直播营收"
+            dy="元"
+            :list="LOlist"
+            dataKey="money"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+    <br />
+    <el-card v-if="department.length">
+      <chart title="栏目访问人次" :list="department" dataKey="views" />
+    </el-card>
+    <br />
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <el-card v-if="department.length">
+          <TreemapChart
+            title="栏目直播场次数"
+            dy="场"
+            :list="department"
+            dataKey="liveNum"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card v-if="department.length">
+          <TreemapChart
+            title="栏目直播营收"
+            dy="元"
+            :list="department"
+            dataKey="money"
+          />
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { getLiveOverview, getLiveByCol } from '@/api/index';
+// import countTo from '@/components/counto/vue-countTo.vue';
+
+import chart from '@/components/LiveOverviewChart.vue';
+import TreemapChart from '@/components/TreemapChart.vue';
+
+export default {
+  name: 'LiveOverview',
+  data() {
+    return {
+      LOlist: [],
+      department: [],
+    };
+  },
+  mounted() {
+    getLiveOverview({}).then(r => {
+      this.LOlist = r || [];
+    });
+    getLiveByCol({}).then(r => {
+      this.department = r || [];
+    });
+  },
+  computed: {},
+  methods: {},
+  components: {
+    // countTo,
+    chart,
+    TreemapChart,
+  },
+};
+</script>
+
+<style scoped>
+.LiveOverview {
+  padding: 1em;
+}
+.row {
+  display: flex;
+}
+.col {
+  flex: 1;
+  text-align: center;
+  border-top: 3px solid #ffffff;
+  line-height: 1.5em;
+  padding: 1em 0;
+  cursor: pointer;
+}
+
+.col > span {
+  font-size: 20px;
+  color: #396fff;
+}
+</style>