提交

src/views/BoutiqueColumn/views/default.vue

@@ -66,35 +66,35 @@
     </el-pagination> -->
     <el-button
       type="default"
-      style="margin: 5px auto;display: block"
+      style="margin: 5px auto; display: block"
       v-if="total > tableData.length"
       :loading="load"
-      @click="()=>changePage(current)"
+      @click="() => changePage(current)"
       size="mini"
     >
-      {{ load ? "加载中..." : "加载更多" }}
+      {{ load ? '加载中...' : '加载更多' }}
     </el-button>
   </div>
 </template>
 
 <script>
 // @ is an alias to /src
-import { epgDetail, epgResult } from "@/api/index";
+import { epgDetail, epgResult } from '@/api/index';
 
-import watchrateEle from "../components/watchrate.vue";
+import watchrateEle from '../components/watchrate.vue';
 
-import * as echarts from "echarts/core";
-import { LineChart, BarChart } from "echarts/charts";
+import * as echarts from 'echarts/core';
+import { LineChart, BarChart } from 'echarts/charts';
 import {
   TitleComponent,
   TooltipComponent,
   GridComponent,
   ToolboxComponent,
   VisualMapComponent,
-} from "echarts/components";
-import { LabelLayout, UniversalTransition } from "echarts/features";
-import { CanvasRenderer } from "echarts/renderers";
-import config from "../../../config/index";
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import config from '../../../config/index';
 echarts.use([
   TitleComponent,
   TooltipComponent,
@@ -109,11 +109,9 @@ echarts.use([
 ]);
 const openList = [];
 const openLi = [];
-let type = "STADATE",
-  direction = "DESC";
 export default {
-  name: "urbanExpressNews",
-  props: ["item"],
+  name: 'urbanExpressNews',
+  props: ['item'],
   data() {
     return {
       tableData: [],
@@ -121,6 +119,8 @@ export default {
       load: false,
       current: 0,
       total: 1,
+      direction: 'DESC',
+      type: 'STADATE',
     };
   },
   mounted() {
@@ -137,12 +137,13 @@ export default {
         page: this.current,
         pageSize: this.size,
       };
-      type && (p.sort = type);
-      direction && (p.order = direction);
+      console.log(this.data)
+      this.type && (p.sort = this.type);
+      this.direction && (p.order = this.direction);
       epgResult(p).then(programList => {
         this.total = programList.total;
         if (num === 1) {
-            this.tableData =programList.data;
+          this.tableData = programList.data;
         } else this.tableData = [...this.tableData, ...programList.data];
         this.load = false;
       });
@@ -163,15 +164,15 @@ export default {
         return;
       }
       this.$nextTick(() => {
-        epgDetail({ epgId: row.epg_id, target: ".loadare" + row.epg_id }).then(
+        epgDetail({ epgId: row.epg_id, target: '.loadare' + row.epg_id }).then(
           res => {
             let more = this.createChart(
-              this.$refs["huashanChart" + row.epg_id],
+              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],
+              this.$refs['huashanListChart' + row.epg_id],
               more.height
             );
           }
@@ -189,28 +190,28 @@ export default {
       let option = {
         tooltip: {
           confine: true,
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
-            type: "cross",
+            type: 'cross',
           },
-          formatter: function(data) {
+          formatter: function (data) {
             return data[0].value;
           },
         },
         grid: {
-          top: "5%",
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
+          top: '5%',
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
           containLabel: true,
         },
         xAxis: {
-          type: "category",
+          type: 'category',
           boundaryGap: false,
           data: list.map(v => v.metric),
         },
         yAxis: {
-          type: "value",
+          type: 'value',
           axisLabel: {
             formatter: watchrate => {
               return watchrate;
@@ -226,32 +227,32 @@ export default {
           pieces: [
             {
               lte: 6,
-              color: "green",
+              color: 'green',
             },
             {
               gt: 6,
               lte: 800,
-              color: "red",
+              color: 'red',
             },
             {
               gt: 8,
               lte: 14,
-              color: "green",
+              color: 'green',
             },
             {
               gt: 14,
               lte: 17,
-              color: "red",
+              color: 'red',
             },
             {
               gt: 17,
-              color: "green",
+              color: 'green',
             },
           ],
         },
         series: [
           {
-            type: "line",
+            type: 'line',
             smooth: true,
             data: list.map(v => v.watchrate),
             itemStyle: {
@@ -268,25 +269,25 @@ export default {
             },
             markArea: {
               itemStyle: {
-                color: "rgba(255, 173, 177, 0.4)",
+                color: 'rgba(255, 173, 177, 0.4)',
               },
               data: [
                 [
                   {
-                    name: "Morning Peak",
-                    xAxis: "07:30",
+                    name: 'Morning Peak',
+                    xAxis: '07:30',
                   },
                   {
-                    xAxis: "10:00",
+                    xAxis: '10:00',
                   },
                 ],
                 [
                   {
-                    name: "Evening Peak",
-                    xAxis: "17:30",
+                    name: 'Evening Peak',
+                    xAxis: '17:30',
                   },
                   {
-                    xAxis: "21:15",
+                    xAxis: '21:15',
                   },
                 ],
               ],
@@ -294,7 +295,7 @@ export default {
           },
         ],
       };
-      if (this.item.programType === "simple") {
+      if (this.item.programType === 'simple') {
         delete option.visualMap;
         option.series[0].markArea = undefined;
       }
@@ -312,30 +313,30 @@ export default {
         title: {},
         tooltip: {
           confine: true,
-          trigger: "axis",
+          trigger: 'axis',
           axisPointer: {
-            type: "shadow",
+            type: 'shadow',
           },
         },
         grid: {
           top: 0,
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
           containLabel: true,
         },
         xAxis: {
-          type: "value",
+          type: 'value',
           splitNumber: 2,
         },
         yAxis: {
-          type: "category",
-          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
+          type: 'category',
+          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
         },
         series: [
           {
-            name: "2011",
-            type: "bar",
+            name: '2011',
+            type: 'bar',
             data: [1000, 2000, 4000, 50000, 6000, 70000],
           },
         ],
@@ -344,38 +345,38 @@ export default {
       return chart;
     },
     sortFun(column) {
-      direction = column.order ? config.order[column.order] : "DESC";
-      type = column.prop ? column.prop.toUpperCase() : "STADATE";
+      this.direction = column.order ? config.order[column.order] : 'DESC';
+      this.type = column.prop ? column.prop.toUpperCase() : 'STADATE';
       this.changePage(0);
     },
     exportfun() {
       let xhttp,
         that = this;
       if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
-      else xhttp = new window.ActiveXObject("Microsoft.XMLHTTP");
-      xhttp.responseType = "blob";
+      else xhttp = new window.ActiveXObject('Microsoft.XMLHTTP');
+      xhttp.responseType = 'blob';
       xhttp.open(
-        "GET",
-        config.base.url2 + "/epg-export?programId=" + that.item.id,
+        'GET',
+        config.base.url2 + '/epg-export?programId=' + that.item.id,
         true
       );
       xhttp.send();
-      xhttp.onreadystatechange = function() {
+      xhttp.onreadystatechange = function () {
         if (this.readyState != 4 || this.status != 200) return;
         // 组装a标签
-        let elink = document.createElement("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(""));
+        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";
+          ' ' +
+          [D.getFullYear(), M, E].join('-') +
+          '.csv';
+        elink.style.display = 'none';
         elink.href = URL.createObjectURL(this.response);
         document.body.appendChild(elink);
         elink.click();
@@ -384,7 +385,7 @@ export default {
     },
   },
 
-  beforeUnmount: function() {},
+  beforeUnmount: function () {},
   components: {
     watchrateEle,
   },