|
@@ -0,0 +1,135 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="SingleDay">
|
|
|
|
+ <el-breadcrumb separator-class="el-icon-arrow-right">
|
|
|
|
+ <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-autocomplete
|
|
|
|
+ v-model="form.program"
|
|
|
|
+ :fetch-suggestions="querySearchAsync"
|
|
|
|
+ placeholder="请输入节目名"
|
|
|
|
+ @select="handleSelect"
|
|
|
|
+ />
|
|
|
|
+ </el-form-item>
|
|
|
|
+ <el-form-item label="区域">
|
|
|
|
+ <el-cascader
|
|
|
|
+ v-model="form.region"
|
|
|
|
+ :options="region"
|
|
|
|
+ :props="{ children: 'options' }"
|
|
|
|
+ ></el-cascader>
|
|
|
|
+ </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">
|
|
|
|
+ <flow-charts
|
|
|
|
+ :list="tableData"
|
|
|
|
+ v-if="tableData.length"
|
|
|
|
+ xName="time_stamp"
|
|
|
|
+ :subsection="subsection"
|
|
|
|
+ :keys="chartKeys"
|
|
|
|
+ ></flow-charts>
|
|
|
|
+ </el-card>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+// @ is an alias to /src
|
|
|
|
+import { overlapSearchTitle,realflow } from "@/api/kuyun";
|
|
|
|
+
|
|
|
|
+import flowCharts from "@/views/Country/components/flowCharts";
|
|
|
|
+
|
|
|
|
+import config from "@/config/index";
|
|
|
|
+export default {
|
|
|
|
+ name: "Channel",
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ form: {
|
|
|
|
+ program: "",
|
|
|
|
+ region: -1,
|
|
|
|
+ },
|
|
|
|
+ tableData: [],
|
|
|
|
+ subsection: [],
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ chartKeys() {
|
|
|
|
+ return [
|
|
|
|
+ {
|
|
|
|
+ key: "tv_ratings",
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ },
|
|
|
|
+ region() {
|
|
|
|
+ return config.region;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ querySearchAsync(queryString, cb) {
|
|
|
|
+ if (!queryString) {
|
|
|
|
+ cb([]);
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ overlapSearchTitle("kw=" + queryString).then(r => {
|
|
|
|
+ let li = (r || []).map(v => {
|
|
|
|
+ return {
|
|
|
|
+ value: v.name,
|
|
|
|
+ id: v.id,
|
|
|
|
+ };
|
|
|
|
+ });
|
|
|
|
+ cb(li);
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ handleSelect(item) {
|
|
|
|
+ this.form.tv_id = item.id || "";
|
|
|
|
+ },
|
|
|
|
+ onSubmit() {
|
|
|
|
+ realflow("tv_id=" + this.form.tv_id +
|
|
|
|
+ "&area_id=" +
|
|
|
|
+ this.form.region).then(r=>{
|
|
|
|
+ console.log(r)
|
|
|
|
+ this.tableData = (r || {}).list
|
|
|
|
+ this.subsection = (r || {}).high_low
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ matrer(row, column, cellValue) {
|
|
|
|
+ return (cellValue * 100).toFixed(4) - 0 + "%";
|
|
|
|
+ },
|
|
|
|
+ selectAll(a, key, val) {
|
|
|
|
+ if (!a.length) return;
|
|
|
|
+ let select = a[a.length - 1];
|
|
|
|
+ if (select === val) this.form[key] = [val];
|
|
|
|
+ else
|
|
|
|
+ this.form[key] = (a.join(",") + ",")
|
|
|
|
+ .replace(val + ",", "")
|
|
|
|
+ .replace(/,$/, "")
|
|
|
|
+ .split(",");
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ components: { flowCharts },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style>
|
|
|
|
+.SingleDay {
|
|
|
|
+ margin: 10px 15px;
|
|
|
|
+}
|
|
|
|
+.SingleDay .nowrap .cell {
|
|
|
|
+ white-space: nowrap;
|
|
|
|
+}
|
|
|
|
+</style>
|