|
|
@@ -0,0 +1,265 @@
|
|
|
+<template>
|
|
|
+ <div class="Key">
|
|
|
+ <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-date-picker
|
|
|
+ v-model="form.date"
|
|
|
+ type="daterange"
|
|
|
+ placeholder="日期"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ :disabled-date="time => disabledDate(time)"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分析周期">
|
|
|
+ <el-select v-model="form.cycle" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in cycleList"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-if="form.area" label="地区">
|
|
|
+ <el-select v-model="form.area" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in areaList"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ :disabled="item.disabled"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="电台">
|
|
|
+ <el-select
|
|
|
+ multiple
|
|
|
+ v-model="form.rb"
|
|
|
+ collapse-tags
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ @change="channelSelect"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in radioList"
|
|
|
+ :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">
|
|
|
+ <bilateral-bar-chart
|
|
|
+ ref="chart"
|
|
|
+ v-if="tableData.length"
|
|
|
+ keyName="name"
|
|
|
+ :list="tableData"
|
|
|
+ :tabs="[
|
|
|
+ {
|
|
|
+ name: '收听率',
|
|
|
+ key: 'radio_rate',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '占有率',
|
|
|
+ key: 'market_rate',
|
|
|
+ },
|
|
|
+ ]"
|
|
|
+ ></bilateral-bar-chart>
|
|
|
+ <div style="text-align: right; padding: 1em 0">
|
|
|
+ <el-button size="small" type="primary" @click="onExport">
|
|
|
+ 导出
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="tableData"
|
|
|
+ :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
|
|
|
+ style="width: 100%"
|
|
|
+ >
|
|
|
+ <el-table-column align="center" prop="" label="" width="30">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column type="index" />
|
|
|
+ <el-table-column align="center" prop="name" label="广播" />
|
|
|
+ <el-table-column align="center" prop="program_name" label="栏目名称" />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="radio_rate"
|
|
|
+ sortable
|
|
|
+ :formatter="
|
|
|
+ (row, column, cellValue) => (cellValue * 100).toFixed(4) + '%'
|
|
|
+ "
|
|
|
+ label="收听率"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ align="center"
|
|
|
+ prop="market_rate"
|
|
|
+ sortable
|
|
|
+ :formatter="
|
|
|
+ (row, column, cellValue) => (cellValue * 100).toFixed(4) + '%'
|
|
|
+ "
|
|
|
+ label="占有率"
|
|
|
+ />
|
|
|
+ </el-table>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// @ is an alias to /src
|
|
|
+import bilateralBarChart from "@/components/bilateralBarChart";
|
|
|
+
|
|
|
+import { audioKeyGet, audioList, audioAreaList } from "@/api/index";
|
|
|
+import config from "@/config/index";
|
|
|
+export default {
|
|
|
+ name: "Key",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ rb: [],
|
|
|
+ cycle: "None",
|
|
|
+ date: [],
|
|
|
+ area: undefined,
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
+ radioList: [],
|
|
|
+ areaList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ const t = new Date(Date.now() - 86400000),
|
|
|
+ y = t.getFullYear(),
|
|
|
+ m = t.getMonth() + 1 > 9 ? t.getMonth() + 1 : "0" + (t.getMonth() + 1),
|
|
|
+ d = t.getDate() > 9 ? t.getDate() : "0" + t.getDate(),
|
|
|
+ date = [y, m, d].join("-");
|
|
|
+ this.form.date = [date, date];
|
|
|
+ audioList().then(r => {
|
|
|
+ let radioList = [
|
|
|
+ {
|
|
|
+ name: "全部",
|
|
|
+ value: "全部",
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ for (let i = 0; i < (r || []).length; i++) {
|
|
|
+ const v = (r || [])[i];
|
|
|
+ radioList.push({
|
|
|
+ name: v,
|
|
|
+ value: v,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.radioList = radioList;
|
|
|
+ this.form.rb = [radioList[0].name];
|
|
|
+ });
|
|
|
+
|
|
|
+ // 地区
|
|
|
+ audioAreaList().then(r => {
|
|
|
+ console.log(r);
|
|
|
+ this.areaList = r || [];
|
|
|
+ this.form.area = this.areaList[0];
|
|
|
+ });
|
|
|
+
|
|
|
+ this.onSubmit();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ cycleList() {
|
|
|
+ return config.audioCycle;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ playTime(row) {
|
|
|
+ return row.start_time.split(" ")[1] + "~" + row.end_time.split(" ")[1];
|
|
|
+ },
|
|
|
+ disabledDate(time) {
|
|
|
+ let timeNow = time.getTime();
|
|
|
+ return (
|
|
|
+ timeNow > Date.now() - 86400000 || timeNow < new Date("2021-12-31")
|
|
|
+ );
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ audioKeyGet(this.formatListData())
|
|
|
+ .then(r => {
|
|
|
+ this.tableData = r || [];
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.tableData = [];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ formatListData() {
|
|
|
+ let s = (this.form.date[0] || "").replace(/-/g, ""),
|
|
|
+ e = (this.form.date[1] || "").replace(/-/g, ""),
|
|
|
+ rb = [];
|
|
|
+ for (let i = 0; i < this.form.rb.length; i++) {
|
|
|
+ const v = this.form.rb[i];
|
|
|
+ if (v !== "全部") rb.push(v);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ start: s,
|
|
|
+ end: e,
|
|
|
+ range: this.form.cycle,
|
|
|
+ names: rb,
|
|
|
+ area: this.form.area || undefined,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ channelSelect(a) {
|
|
|
+ if (!a.length) return;
|
|
|
+ if (a[a.length - 1] === "全部") return (this.form.rb = ["全部"]);
|
|
|
+ let l = [];
|
|
|
+ for (let i = 0; i < a.length; i++) {
|
|
|
+ const v = a[i];
|
|
|
+ if (v === "全部") continue;
|
|
|
+ l.push(v);
|
|
|
+ }
|
|
|
+ this.form.rb = l;
|
|
|
+ },
|
|
|
+ onExport() {
|
|
|
+ audioKeyGet(this.formatListData()).then(r => {
|
|
|
+ // 生成数据
|
|
|
+ let strcsv = "data:text/csv;charset=utf-8,\uFEFF广播,栏目名称,收听率,占有率\r\n";
|
|
|
+ (r || []).map(v => {
|
|
|
+ strcsv += [
|
|
|
+ v.name,
|
|
|
+ v.program_name,
|
|
|
+ v.radio_rate * 100 + "%",
|
|
|
+ v.market_rate * 100 + "%",
|
|
|
+ "\r\n",
|
|
|
+ ].join(",");
|
|
|
+ });
|
|
|
+ // 导出
|
|
|
+ let link = document.createElement("a");
|
|
|
+ link.id = "download-csv";
|
|
|
+ link.setAttribute("href", encodeURI(strcsv));
|
|
|
+ link.setAttribute("download", "重点栏目分析" + ".csv");
|
|
|
+ // document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ link = undefined;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeUnmount: function () {},
|
|
|
+ components: { bilateralBarChart },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.Key {
|
|
|
+ margin: 10px 15px;
|
|
|
+}
|
|
|
+</style>
|
liyongli