提交

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <el-config-provider :locale="locale">
-    <el-scrollbar height="100vh" always wrap-class="scorll">
-      <div id="nav" class="lingdu_main">
+    <el-scrollbar height="100vh" always wrap-class="scorll" @scroll="scroll">
+      <div id="nav" ref="nav" class="lingdu_main">
         <!-- <router-link to="/">栏目</router-link> |
       <router-link to="/channel">频道</router-link> |
       <router-link to="/realData">直播数据</router-link> -->
@@ -20,7 +20,14 @@ export default {
       locale,
     };
   },
-  methods: {},
+  methods: {
+    scroll(scroll) {
+      let allheight = this.$refs.nav.offsetHeight - document.body.offsetHeight;
+      let warn = allheight - scroll.scrollTop;
+      if (warn > 10) return;
+      console.log("--", warn, this);
+    },
+  },
   components: {},
 };
 </script>
@@ -38,31 +45,37 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
 }
-body{
+body {
   position: relative;
 }
 body .el-date-table td.current:not(.disabled) span,
-body .el-date-table td.end-date span, body .el-date-table td.start-date span{
-  background-color: #313759 
+body .el-date-table td.end-date span,
+body .el-date-table td.start-date span {
+  background-color: #313759;
 }
-body .el-range-editor.is-active,body .el-select .el-input.is-focus .el-input__inner, body .el-select .el-input__inner:focus{
-  border-color: #313759 
+body .el-range-editor.is-active,
+body .el-select .el-input.is-focus .el-input__inner,
+body .el-select .el-input__inner:focus {
+  border-color: #313759;
 }
-body .el-date-table td.today span, body .el-select-dropdown__item.selected,body .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
-  color: #313759 
+body .el-date-table td.today span,
+body .el-select-dropdown__item.selected,
+body .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+  color: #313759;
 }
-body .el-date-editor--daterange.el-input__inner,body .el-date-editor--timerange.el-input__inner{
-  width:220px
+body .el-date-editor--daterange.el-input__inner,
+body .el-date-editor--timerange.el-input__inner {
+  width: 220px;
 }
-.nav{
+.nav {
   min-height: 100vh;
 }
 
 .lingdu_main .el-breadcrumb {
-  margin-bottom: 10px!important;
+  margin-bottom: 10px !important;
 }
 
 .lingdu_main .el-breadcrumb__item .el-breadcrumb__inner {
-  font-weight: 700!important;
+  font-weight: 700 !important;
 }
 </style>

src/config/index.js

@@ -17,6 +17,10 @@ export default {
     requestRetry: 4,
     requestRetryDelay: 800,
   },
+  order:{
+    ascending: "ASC",
+    descending: "DESC",
+  },
   cycle: [
     {
       label: "全天时段(00:00~24:00)",

src/views/BoutiqueColumn/BoutiqueColumn.vue

@@ -86,4 +86,8 @@ export default {
 .tab-body {
   padding-bottom: 20px;
 }
+.export{
+    float: right!important;
+    margin: 10px;
+}
 </style>

src/views/BoutiqueColumn/views/dialogueSecretary.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="huashanlunjian">
+  <div class="dialogueSecretary">
+    <el-button type="primary" class="export" @click="exportfun">
+      导出
+    </el-button>
     <el-table
       :data="tableData"
       :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#333333' }"
       v-if="tableData.length"
       @expand-change="rowClick"
+      @sort-change="sortFun"
       style="width: 100%"
     >
       <el-table-column type="expand">
@@ -22,9 +26,27 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="日期" prop="stadate" />
+      <el-table-column
+        align="center"
+        label="日期"
+        prop="stadate"
+        sortable="custom"
+      />
       <el-table-column align="center" label="栏目" prop="program_name" />
-      <el-table-column align="center" label="收视率" prop="watchrate">
+      <el-table-column
+        align="center"
+        label="市场占有率"
+        prop="occrate"
+        sortable="custom"
+      >
+        <template #default="scope"> {{ scope.row.occrate }}% </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="收视率"
+        prop="watchrate"
+        sortable="custom"
+      >
         <template #default="scope">
           <watchrate-ele
             :watchrate="scope.row.watchrate"
@@ -33,14 +55,24 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination
+    <!-- <el-pagination
       :page-size="size"
       v-if="total / size > 1"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
     >
-    </el-pagination>
+    </el-pagination> -->
+    <el-button
+      type="default"
+      style="margin: 5px auto;display: block"
+      v-if="total > tableData.length"
+      :loading="load"
+      @click="changePage"
+      size="mini"
+    >
+      {{ load ? "加载中..." : "加载更多" }}
+    </el-button>
   </div>
 </template>
 
@@ -61,6 +93,7 @@ import {
 } from "echarts/components";
 import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
+import config from "../../../config/index";
 echarts.use([
   TitleComponent,
   TooltipComponent,
@@ -75,6 +108,8 @@ echarts.use([
 ]);
 const openList = [];
 const openLi = [];
+let type = "WATCHRATE",
+  direction = "DESC";
 export default {
   name: "dialogueSecretary",
   props: ["item"],
@@ -82,31 +117,32 @@ export default {
     return {
       tableData: [],
       size: 10,
-      current: 1,
+      load: false,
+      current: 0,
       total: 1,
     };
   },
   mounted() {
-    epgResult({
-      programId: this.item.id,
-      page: this.current,
-      pageSize: this.size,
-    }).then(programList => {
-      this.total = programList.total;
-      this.tableData = programList.data;
-    });
+    this.changePage(this.current);
   },
   computed: {},
   methods: {
-    changePage(newPage) {
-      this.current = newPage;
-      epgResult({
+    changePage() {
+      //   this.current = newPage;
+      if (this.load) return;
+      this.current++;
+      this.load = true;
+      const p = {
         programId: this.item.id,
         page: this.current,
         pageSize: this.size,
-      }).then(programList => {
+      };
+      type && (p.sort = type);
+      direction && (p.order = direction);
+      epgResult(p).then(programList => {
         this.total = programList.total;
-        this.tableData = programList.data;
+        this.tableData = [...this.tableData, ...programList.data];
+        this.load = false;
       });
     },
     rowClick(row) {
@@ -303,6 +339,45 @@ export default {
       option && chart.setOption(option);
       return chart;
     },
+    sortFun(column) {
+      direction = column.order ? config.order[column.order] : "DESC";
+      type = column.prop ? column.prop.toUpperCase() : "WATCHRATE";
+      this.changePage(1);
+    },
+    exportfun() {
+      let xhttp,
+        that = this;
+      if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
+      else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
+      xhttp.responseType = "blob";
+      xhttp.open(
+        "GET",
+        config.base.url2 + "/epg-export?programId=" + that.item.id,
+        true
+      );
+      xhttp.send();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState != 4 || this.status != 200) return;
+        // 组装a标签
+        let elink = document.createElement("a");
+        // 设置下载文件名
+        let D = new Date(),
+          M = D.getMonth() + 1,
+          E = D.getDate();
+        M > 9 ? "" : (M = ["0", M].join(""));
+        E > 9 ? "" : (E = ["0", E].join(""));
+        elink.download =
+          that.item.programName +
+          " " +
+          [D.getFullYear(), M, E].join("-") +
+          ".csv";
+        elink.style.display = "none";
+        elink.href = URL.createObjectURL(this.response);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+      };
+    },
   },
 
   beforeUnmount: function() {},

src/views/BoutiqueColumn/views/huashanlunjian.vue

@@ -1,9 +1,13 @@
 <template>
   <div class="huashanlunjian">
+    <el-button type="primary" class="export" @click="exportfun">
+      导出
+    </el-button>
     <el-table
       :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#333333' }"
       :data="tableData"
       @expand-change="rowClick"
+      @sort-change="sortFun"
       style="width: 100%"
     >
       <el-table-column type="expand">
@@ -21,9 +25,27 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="日期" prop="stadate" />
+      <el-table-column
+        align="center"
+        label="日期"
+        prop="stadate"
+        sortable="custom"
+      />
       <el-table-column align="center" label="栏目" prop="program_name" />
-      <el-table-column align="center" label="收视率" prop="watchrate">
+      <el-table-column
+        align="center"
+        label="市场占有率"
+        prop="occrate"
+        sortable="custom"
+      >
+        <template #default="scope"> {{ scope.row.occrate }}% </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="收视率"
+        prop="watchrate"
+        sortable="custom"
+      >
         <template #default="scope">
           <watchrate-ele
             :watchrate="scope.row.watchrate"
@@ -32,14 +54,24 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination
+    <!-- <el-pagination
       :page-size="size"
       v-if="total / size > 1"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
     >
-    </el-pagination>
+    </el-pagination> -->
+    <el-button
+      type="default"
+      style="margin: 5px auto;display: block"
+      v-if="total > tableData.length"
+      :loading="load"
+      @click="changePage"
+      size="mini"
+    >
+      {{ load ? "加载中..." : "加载更多" }}
+    </el-button>
   </div>
 </template>
 
@@ -60,6 +92,8 @@ import {
 } from "echarts/components";
 import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
+
+import config from "../../../config/index";
 echarts.use([
   TitleComponent,
   TooltipComponent,
@@ -74,38 +108,42 @@ echarts.use([
 ]);
 const openList = [];
 const openLi = [];
+let type = "WATCHRATE",
+  direction = "DESC";
+
 export default {
   name: "huashanlunjian",
   props: ["item"],
   data() {
     return {
+      load: false,
       tableData: [],
       size: 10,
-      current: 1,
+      current: 0,
       total: 1,
     };
   },
   mounted() {
-    epgResult({
-      programId: this.item.id,
-      page: this.current,
-      pageSize: this.size,
-    }).then(programList => {
-      this.total = programList.total;
-      this.tableData = programList.data;
-    });
+    this.changePage(this.current);
   },
   computed: {},
   methods: {
-    changePage(newPage) {
-      this.current = newPage;
-      epgResult({
+    changePage() {
+      //   this.current = newPage;
+      if (this.load) return;
+      this.current++;
+      this.load = true;
+      const p = {
         programId: this.item.id,
         page: this.current,
         pageSize: this.size,
-      }).then(programList => {
+      };
+      type && (p.sort = type);
+      direction && (p.order = direction);
+      epgResult(p).then(programList => {
         this.total = programList.total;
-        this.tableData = programList.data;
+        this.tableData = [...this.tableData, ...programList.data];
+        this.load = false;
       });
     },
     rowClick(row) {
@@ -298,6 +336,46 @@ export default {
       option && chart.setOption(option);
       return chart;
     },
+    sortFun(column) {
+      direction = column.order ? config.order[column.order] : "DESC";
+      type = column.prop ? column.prop.toUpperCase() : "WATCHRATE";
+      this.changePage(1);
+    },
+    exportfun() {
+      // window.open(config.base.url2 + '/epg-export?programId=' + this.item.id)
+      let xhttp,
+        that = this;
+      if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
+      else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
+      xhttp.responseType = "blob";
+      xhttp.open(
+        "GET",
+        config.base.url2 + "/epg-export?programId=" + that.item.id,
+        true
+      );
+      xhttp.send();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState != 4 || this.status != 200) return;
+        // 组装a标签
+        let elink = document.createElement("a");
+        // 设置下载文件名
+        let D = new Date(),
+          M = D.getMonth() + 1,
+          E = D.getDate();
+        M > 9 ? "" : (M = ["0", M].join(""));
+        E > 9 ? "" : (E = ["0", E].join(""));
+        elink.download =
+          that.item.programName +
+          " " +
+          [D.getFullYear(), M, E].join("-") +
+          ".csv";
+        elink.style.display = "none";
+        elink.href = URL.createObjectURL(this.response);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+      };
+    },
   },
   beforeUnmount: function() {},
   components: {

src/views/BoutiqueColumn/views/hundredBrokenPlays.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="huashanlunjian">
+  <div class="hundredBrokenPlays">
+    <el-button type="primary" class="export" @click="exportfun">
+      导出
+    </el-button>
     <el-table
       :data="tableData"
       v-if="tableData.length"
       :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#333333' }"
       @expand-change="rowClick"
+      @sort-change="sortFun"
       style="width: 100%"
     >
       <el-table-column type="expand">
@@ -22,9 +26,27 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="日期" prop="stadate" />
+      <el-table-column
+        align="center"
+        label="日期"
+        prop="stadate"
+        sortable="custom"
+      />
       <el-table-column align="center" label="栏目" prop="program_name" />
-      <el-table-column align="center" label="收视率" prop="watchrate">
+      <el-table-column
+        align="center"
+        label="市场占有率"
+        prop="occrate"
+        sortable="custom"
+      >
+        <template #default="scope"> {{ scope.row.occrate }}% </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="收视率"
+        prop="watchrate"
+        sortable="custom"
+      >
         <template #default="scope">
           <watchrate-ele
             :watchrate="scope.row.watchrate"
@@ -33,14 +55,24 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination
+    <!-- <el-pagination
       :page-size="size"
       v-if="total / size > 1"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
     >
-    </el-pagination>
+    </el-pagination> -->
+    <el-button
+      type="default"
+      style="margin: 5px auto;display: block"
+      v-if="total > tableData.length"
+      :loading="load"
+      @click="changePage"
+      size="mini"
+    >
+      {{ load ? "加载中..." : "加载更多" }}
+    </el-button>
   </div>
 </template>
 
@@ -61,6 +93,8 @@ import {
 } from "echarts/components";
 import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
+import config from "../../../config/index";
+
 echarts.use([
   TitleComponent,
   TooltipComponent,
@@ -75,6 +109,8 @@ echarts.use([
 ]);
 const openList = [];
 const openLi = [];
+let type = "WATCHRATE",
+  direction = "DESC";
 export default {
   name: "HundredBrokenPlays",
   props: ["item"],
@@ -82,31 +118,32 @@ export default {
     return {
       tableData: [],
       size: 10,
-      current: 1,
+      load: false,
+      current: 0,
       total: 1,
     };
   },
   mounted() {
-    epgResult({
-      programId: this.item.id,
-      page: this.current,
-      pageSize: this.size,
-    }).then(programList => {
-      this.total = programList.total;
-      this.tableData = programList.data;
-    });
+    this.changePage(this.current);
   },
   computed: {},
   methods: {
-    changePage(newPage) {
-      this.current = newPage;
-      epgResult({
+    changePage() {
+      //   this.current = newPage;
+      if (this.load) return;
+      this.current++;
+      this.load = true;
+      const p = {
         programId: this.item.id,
         page: this.current,
         pageSize: this.size,
-      }).then(programList => {
+      };
+      type && (p.sort = type);
+      direction && (p.order = direction);
+      epgResult(p).then(programList => {
         this.total = programList.total;
-        this.tableData = programList.data;
+        this.tableData = [...this.tableData, ...programList.data];
+        this.load = false;
       });
     },
     rowClick(row) {
@@ -125,17 +162,19 @@ export default {
         return;
       }
       this.$nextTick(() => {
-        epgDetail({ epgId: row.epg_id, target: ".loadare" + row.epg_id }).then(res => {
-          let more = this.createChart(
-            this.$refs["huashanChart" + row.epg_id],
-            res
-          );
-          openList[row.epg_id] = more.chart;
-          openLi[row.epg_id] = this.createBarChart(
-            this.$refs["huashanListChart" + row.epg_id],
-            more.height
-          );
-        });
+        epgDetail({ epgId: row.epg_id, target: ".loadare" + row.epg_id }).then(
+          res => {
+            let more = this.createChart(
+              this.$refs["huashanChart" + row.epg_id],
+              res
+            );
+            openList[row.epg_id] = more.chart;
+            openLi[row.epg_id] = this.createBarChart(
+              this.$refs["huashanListChart" + row.epg_id],
+              more.height
+            );
+          }
+        );
       });
     },
     createChart(ele, list) {
@@ -301,6 +340,45 @@ export default {
       option && chart.setOption(option);
       return chart;
     },
+    sortFun(column) {
+      direction = column.order ? config.order[column.order] : "DESC";
+      type = column.prop ? column.prop.toUpperCase() : "WATCHRATE";
+      this.changePage(1);
+    },
+    exportfun() {
+      let xhttp,
+        that = this;
+      if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
+      else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
+      xhttp.responseType = "blob";
+      xhttp.open(
+        "GET",
+        config.base.url2 + "/epg-export?programId=" + that.item.id,
+        true
+      );
+      xhttp.send();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState != 4 || this.status != 200) return;
+        // 组装a标签
+        let elink = document.createElement("a");
+        // 设置下载文件名
+        let D = new Date(),
+          M = D.getMonth() + 1,
+          E = D.getDate();
+        M > 9 ? "" : (M = ["0", M].join(""));
+        E > 9 ? "" : (E = ["0", E].join(""));
+        elink.download =
+          that.item.programName +
+          " " +
+          [D.getFullYear(), M, E].join("-") +
+          ".csv";
+        elink.style.display = "none";
+        elink.href = URL.createObjectURL(this.response);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+      };
+    },
   },
 
   beforeUnmount: function() {},

src/views/BoutiqueColumn/views/policeStory.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="huashanlunjian">
+  <div class="policeStory">
+    <el-button type="primary" class="export" @click="exportfun">
+      导出
+    </el-button>
     <el-table
       :data="tableData"
       v-if="tableData.length"
       :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#333333' }"
       @expand-change="rowClick"
+      @sort-change="sortFun"
       style="width: 100%"
     >
       <el-table-column type="expand">
@@ -22,9 +26,27 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="日期" prop="stadate" />
+      <el-table-column
+        align="center"
+        label="日期"
+        prop="stadate"
+        sortable="custom"
+      />
       <el-table-column align="center" label="栏目" prop="program_name" />
-      <el-table-column align="center" label="收视率" prop="watchrate">
+      <el-table-column
+        align="center"
+        label="市场占有率"
+        prop="occrate"
+        sortable="custom"
+      >
+        <template #default="scope"> {{ scope.row.occrate }}% </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="收视率"
+        prop="watchrate"
+        sortable="custom"
+      >
         <template #default="scope">
           <watchrate-ele
             :watchrate="scope.row.watchrate"
@@ -33,14 +55,24 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination
+    <!-- <el-pagination
       :page-size="size"
       v-if="total / size > 1"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
     >
-    </el-pagination>
+    </el-pagination> -->
+    <el-button
+      type="default"
+      style="margin: 5px auto;display: block"
+      v-if="total > tableData.length"
+      :loading="load"
+      @click="changePage"
+      size="mini"
+    >
+      {{ load ? "加载中..." : "加载更多" }}
+    </el-button>
   </div>
 </template>
 
@@ -61,6 +93,7 @@ import {
 } from "echarts/components";
 import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
+import config from "../../../config/index";
 echarts.use([
   TitleComponent,
   TooltipComponent,
@@ -75,6 +108,8 @@ echarts.use([
 ]);
 const openList = [];
 const openLi = [];
+let type = "WATCHRATE",
+  direction = "DESC";
 export default {
   name: "policeStory",
   props: ["item"],
@@ -82,31 +117,32 @@ export default {
     return {
       tableData: [],
       size: 10,
-      current: 1,
+      load: false,
+      current: 0,
       total: 1,
     };
   },
   mounted() {
-    epgResult({
-      programId: this.item.id,
-      page: this.current,
-      pageSize: this.size,
-    }).then(programList => {
-      this.total = programList.total;
-      this.tableData = programList.data;
-    });
+    this.changePage(this.current);
   },
   computed: {},
   methods: {
-    changePage(newPage) {
-      this.current = newPage;
-      epgResult({
+    changePage() {
+      //   this.current = newPage;
+      if (this.load) return;
+      this.current++;
+      this.load = true;
+      const p = {
         programId: this.item.id,
         page: this.current,
         pageSize: this.size,
-      }).then(programList => {
+      };
+      type && (p.sort = type);
+      direction && (p.order = direction);
+      epgResult(p).then(programList => {
         this.total = programList.total;
-        this.tableData = programList.data;
+        this.tableData = [...this.tableData, ...programList.data];
+        this.load = false;
       });
     },
     rowClick(row) {
@@ -125,17 +161,19 @@ export default {
         return;
       }
       this.$nextTick(() => {
-        epgDetail({ epgId: row.epg_id, target: ".loadare" + row.epg_id }).then(res => {
-          let more = this.createChart(
-            this.$refs["huashanChart" + row.epg_id],
-            res
-          );
-          openList[row.epg_id] = more.chart;
-          openLi[row.epg_id] = this.createBarChart(
-            this.$refs["huashanListChart" + row.epg_id],
-            more.height
-          );
-        });
+        epgDetail({ epgId: row.epg_id, target: ".loadare" + row.epg_id }).then(
+          res => {
+            let more = this.createChart(
+              this.$refs["huashanChart" + row.epg_id],
+              res
+            );
+            openList[row.epg_id] = more.chart;
+            openLi[row.epg_id] = this.createBarChart(
+              this.$refs["huashanListChart" + row.epg_id],
+              more.height
+            );
+          }
+        );
       });
     },
     createChart(ele, list) {
@@ -301,6 +339,45 @@ export default {
       option && chart.setOption(option);
       return chart;
     },
+    sortFun(column) {
+      direction = column.order ? config.order[column.order] : "DESC";
+      type = column.prop ? column.prop.toUpperCase() : "WATCHRATE";
+      this.changePage(1);
+    },
+    exportfun() {
+      let xhttp,
+        that = this;
+      if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
+      else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
+      xhttp.responseType = "blob";
+      xhttp.open(
+        "GET",
+        config.base.url2 + "/epg-export?programId=" + that.item.id,
+        true
+      );
+      xhttp.send();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState != 4 || this.status != 200) return;
+        // 组装a标签
+        let elink = document.createElement("a");
+        // 设置下载文件名
+        let D = new Date(),
+          M = D.getMonth() + 1,
+          E = D.getDate();
+        M > 9 ? "" : (M = ["0", M].join(""));
+        E > 9 ? "" : (E = ["0", E].join(""));
+        elink.download =
+          that.item.programName +
+          " " +
+          [D.getFullYear(), M, E].join("-") +
+          ".csv";
+        elink.style.display = "none";
+        elink.href = URL.createObjectURL(this.response);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+      };
+    },
   },
 
   beforeUnmount: function() {},

src/views/BoutiqueColumn/views/shaanxiNewsSimulcast.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="shaanxiNewslunjian">
+  <div class="shaanxiNewsSimulcast">
+    <el-button type="primary" class="export" @click="exportfun">
+      导出
+    </el-button>
     <el-table
       :data="tableData"
       v-if="tableData.length"
       :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#333333' }"
       @expand-change="rowClick"
+      @sort-change="sortFun"
       style="width: 100%"
     >
       <el-table-column type="expand">
@@ -22,9 +26,27 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="日期" prop="stadate" />
+      <el-table-column
+        align="center"
+        label="日期"
+        prop="stadate"
+        sortable="custom"
+      />
       <el-table-column align="center" label="栏目" prop="program_name" />
-      <el-table-column align="center" label="收视率" prop="watchrate">
+      <el-table-column
+        align="center"
+        label="市场占有率"
+        prop="occrate"
+        sortable="custom"
+      >
+        <template #default="scope"> {{ scope.row.occrate }}% </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="收视率"
+        prop="watchrate"
+        sortable="custom"
+      >
         <template #default="scope">
           <watchrate-ele
             :watchrate="scope.row.watchrate"
@@ -33,14 +55,24 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination
+    <!-- <el-pagination
       v-if="total / size > 1"
       :page-size="size"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
     >
-    </el-pagination>
+    </el-pagination> -->
+    <el-button
+      type="default"
+      style="margin: 5px auto;display: block"
+      v-if="total > tableData.length"
+      :loading="load"
+      @click="changePage"
+      size="mini"
+    >
+      {{ load ? "加载中..." : "加载更多" }}
+    </el-button>
   </div>
 </template>
 
@@ -61,6 +93,7 @@ import {
 } from "echarts/components";
 import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
+import config from "../../../config/index";
 echarts.use([
   TitleComponent,
   TooltipComponent,
@@ -75,6 +108,8 @@ echarts.use([
 ]);
 const openList = [];
 const openLi = [];
+let type = "WATCHRATE",
+  direction = "DESC";
 export default {
   name: "shaanxiNewsSimulcast",
   props: ["item"],
@@ -82,31 +117,32 @@ export default {
     return {
       tableData: [],
       size: 10,
-      current: 1,
+      load: false,
+      current: 0,
       total: 1,
     };
   },
   mounted() {
-    epgResult({
-      programId: this.item.id,
-      page: this.current,
-      pageSize: this.size,
-    }).then(programList => {
-      this.total = programList.total;
-      this.tableData = programList.data;
-    });
+    this.changePage(this.current);
   },
   computed: {},
   methods: {
-    changePage(newPage) {
-      this.current = newPage;
-      epgResult({
+    changePage() {
+      //   this.current = newPage;
+      if (this.load) return;
+      this.current++;
+      this.load = true;
+      const p = {
         programId: this.item.id,
         page: this.current,
         pageSize: this.size,
-      }).then(programList => {
+      };
+      type && (p.sort = type);
+      direction && (p.order = direction);
+      epgResult(p).then(programList => {
         this.total = programList.total;
-        this.tableData = programList.data;
+        this.tableData = [...this.tableData, ...programList.data];
+        this.load = false;
       });
     },
     rowClick(row) {
@@ -125,17 +161,19 @@ export default {
         return;
       }
       this.$nextTick(() => {
-        epgDetail({ epgId: row.epg_id, target: ".loadare" + row.epg_id }).then(res => {
-          let more = this.createChart(
-            this.$refs["shaanxiNewsChart" + row.epg_id],
-            res
-          );
-          openList[row.epg_id] = more.chart;
-          openLi[row.epg_id] = this.createBarChart(
-            this.$refs["shaanxiNewsListChart" + row.epg_id],
-            more.height
-          );
-        });
+        epgDetail({ epgId: row.epg_id, target: ".loadare" + row.epg_id }).then(
+          res => {
+            let more = this.createChart(
+              this.$refs["shaanxiNewsChart" + row.epg_id],
+              res
+            );
+            openList[row.epg_id] = more.chart;
+            openLi[row.epg_id] = this.createBarChart(
+              this.$refs["shaanxiNewsListChart" + row.epg_id],
+              more.height
+            );
+          }
+        );
       });
     },
     createChart(ele, list) {
@@ -301,6 +339,45 @@ export default {
       option && chart.setOption(option);
       return chart;
     },
+    sortFun(column) {
+      direction = column.order ? config.order[column.order] : "DESC";
+      type = column.prop ? column.prop.toUpperCase() : "WATCHRATE";
+      this.changePage(1);
+    },
+    exportfun() {
+      let xhttp,
+        that = this;
+      if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
+      else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
+      xhttp.responseType = "blob";
+      xhttp.open(
+        "GET",
+        config.base.url2 + "/epg-export?programId=" + that.item.id,
+        true
+      );
+      xhttp.send();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState != 4 || this.status != 200) return;
+        // 组装a标签
+        let elink = document.createElement("a");
+        // 设置下载文件名
+        let D = new Date(),
+          M = D.getMonth() + 1,
+          E = D.getDate();
+        M > 9 ? "" : (M = ["0", M].join(""));
+        E > 9 ? "" : (E = ["0", E].join(""));
+        elink.download =
+          that.item.programName +
+          " " +
+          [D.getFullYear(), M, E].join("-") +
+          ".csv";
+        elink.style.display = "none";
+        elink.href = URL.createObjectURL(this.response);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+      };
+    },
   },
 
   beforeUnmount: function() {},

src/views/BoutiqueColumn/views/urbanExpressNews.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="huashanlunjian">
+  <div class="urbanExpressNews">
+    <el-button type="primary" class="export" @click="exportfun">
+      导出
+    </el-button>
     <el-table
       :data="tableData"
       v-if="tableData.length"
       :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#333333' }"
       @expand-change="rowClick"
+      @sort-change="sortFun"
       style="width: 100%"
     >
       <el-table-column type="expand">
@@ -22,9 +26,27 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="日期" prop="stadate" />
+      <el-table-column
+        align="center"
+        label="日期"
+        prop="stadate"
+        sortable="custom"
+      />
       <el-table-column align="center" label="栏目" prop="program_name" />
-      <el-table-column align="center" label="收视率" prop="watchrate">
+      <el-table-column
+        align="center"
+        label="市场占有率"
+        prop="occrate"
+        sortable="custom"
+      >
+        <template #default="scope"> {{ scope.row.occrate }}% </template>
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="收视率"
+        prop="watchrate"
+        sortable="custom"
+      >
         <template #default="scope">
           <watchrate-ele
             :watchrate="scope.row.watchrate"
@@ -33,14 +55,24 @@
         </template>
       </el-table-column>
     </el-table>
-    <el-pagination
+    <!-- <el-pagination
       :page-size="size"
       v-if="total / size > 1"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
     >
-    </el-pagination>
+    </el-pagination> -->
+    <el-button
+      type="default"
+      style="margin: 5px auto;display: block"
+      v-if="total > tableData.length"
+      :loading="load"
+      @click="changePage"
+      size="mini"
+    >
+      {{ load ? "加载中..." : "加载更多" }}
+    </el-button>
   </div>
 </template>
 
@@ -61,6 +93,7 @@ import {
 } from "echarts/components";
 import { LabelLayout, UniversalTransition } from "echarts/features";
 import { CanvasRenderer } from "echarts/renderers";
+import config from "../../../config/index";
 echarts.use([
   TitleComponent,
   TooltipComponent,
@@ -75,6 +108,8 @@ echarts.use([
 ]);
 const openList = [];
 const openLi = [];
+let type = "WATCHRATE",
+  direction = "DESC";
 export default {
   name: "urbanExpressNews",
   props: ["item"],
@@ -82,31 +117,32 @@ export default {
     return {
       tableData: [],
       size: 10,
-      current: 1,
+      load: false,
+      current: 0,
       total: 1,
     };
   },
   mounted() {
-    epgResult({
-      programId: this.item.id,
-      page: this.current,
-      pageSize: this.size,
-    }).then(programList => {
-      this.total = programList.total;
-      this.tableData = programList.data;
-    });
+    this.changePage(this.current);
   },
   computed: {},
   methods: {
-    changePage(newPage) {
-      this.current = newPage;
-      epgResult({
+    changePage() {
+      //   this.current = newPage;
+      if (this.load) return;
+      this.current++;
+      this.load = true;
+      const p = {
         programId: this.item.id,
         page: this.current,
         pageSize: this.size,
-      }).then(programList => {
+      };
+      type && (p.sort = type);
+      direction && (p.order = direction);
+      epgResult(p).then(programList => {
         this.total = programList.total;
-        this.tableData = programList.data;
+        this.tableData = [...this.tableData, ...programList.data];
+        this.load = false;
       });
     },
     rowClick(row) {
@@ -125,17 +161,19 @@ export default {
         return;
       }
       this.$nextTick(() => {
-        epgDetail({ epgId: row.epg_id, target: ".loadare" + row.epg_id }).then(res => {
-          let more = this.createChart(
-            this.$refs["huashanChart" + row.epg_id],
-            res
-          );
-          openList[row.epg_id] = more.chart;
-          openLi[row.epg_id] = this.createBarChart(
-            this.$refs["huashanListChart" + row.epg_id],
-            more.height
-          );
-        });
+        epgDetail({ epgId: row.epg_id, target: ".loadare" + row.epg_id }).then(
+          res => {
+            let more = this.createChart(
+              this.$refs["huashanChart" + row.epg_id],
+              res
+            );
+            openList[row.epg_id] = more.chart;
+            openLi[row.epg_id] = this.createBarChart(
+              this.$refs["huashanListChart" + row.epg_id],
+              more.height
+            );
+          }
+        );
       });
     },
     createChart(ele, list) {
@@ -301,6 +339,45 @@ export default {
       option && chart.setOption(option);
       return chart;
     },
+    sortFun(column) {
+      direction = column.order ? config.order[column.order] : "DESC";
+      type = column.prop ? column.prop.toUpperCase() : "WATCHRATE";
+      this.changePage(1);
+    },
+    exportfun() {
+      let xhttp,
+        that = this;
+      if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
+      else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
+      xhttp.responseType = "blob";
+      xhttp.open(
+        "GET",
+        config.base.url2 + "/epg-export?programId=" + that.item.id,
+        true
+      );
+      xhttp.send();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState != 4 || this.status != 200) return;
+        // 组装a标签
+        let elink = document.createElement("a");
+        // 设置下载文件名
+        let D = new Date(),
+          M = D.getMonth() + 1,
+          E = D.getDate();
+        M > 9 ? "" : (M = ["0", M].join(""));
+        E > 9 ? "" : (E = ["0", E].join(""));
+        elink.download =
+          that.item.programName +
+          " " +
+          [D.getFullYear(), M, E].join("-") +
+          ".csv";
+        elink.style.display = "none";
+        elink.href = URL.createObjectURL(this.response);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+      };
+    },
   },
 
   beforeUnmount: function() {},