提交

src/views/BoutiqueColumn/BoutiqueColumn.vue

@@ -8,7 +8,7 @@
       <el-loading></el-loading>
       <el-tabs
         tab-position="top"
-        style="max-height: 100%;"
+        style="max-height: 100%"
         @tab-click="selectTab"
         v-model="select"
       >
@@ -18,17 +18,16 @@
           :label="item.programName"
           :name="item.component"
         >
-          <div
+          <!-- <div
             class="tab-body"
             v-if="item.component === select || selectA[item.component]"
-          >
-            <!-- <component
-              :is="item.component"
-              ref="child"
-              :item="item"
-            ></component> -->
-            <default-components :item="item" ref="child"></default-components>
-          </div>
+          > -->
+          <default-components
+            :select="select"
+            :item="item"
+            ref="child"
+          ></default-components>
+          <!-- </div> -->
         </el-tab-pane>
       </el-tabs>
     </div>
@@ -37,23 +36,17 @@
 
 <script>
 // @ is an alias to /src
-import { epgList } from "@/api/index";
+import { epgList } from '@/api/index';
 // 重点栏目分析
-// import huashanlunjian from "./views/huashanlunjian.vue";
-// import dialogueSecretary from "./views/dialogueSecretary.vue";
-// import policeStory from "./views/policeStory.vue";
-// import shaanxiNewsSimulcast from "./views/shaanxiNewsSimulcast.vue";
-// import hundredBrokenPlays from "./views/hundredBrokenPlays.vue";
-// import urbanExpressNews from "./views/urbanExpressNews.vue";
-import defaultComponents from "./views/default.vue";
+import defaultComponents from './views/default.vue';
 
 let lastMoreDate = 0;
 export default {
-  name: "boutiqueColumn",
+  name: 'boutiqueColumn',
   data() {
     return {
       columnNames: [],
-      select: "",
+      select: '',
       selectA: {},
     };
   },
@@ -83,15 +76,9 @@ export default {
       }
     },
   },
-  beforeUnmount: function() {},
+  beforeUnmount: function () {},
   components: {
-    // huashanlunjian,
-    // dialogueSecretary,
-    // policeStory,
-    // shaanxiNewsSimulcast,
-    // hundredBrokenPlays,
-    // urbanExpressNews,
-    defaultComponents
+    defaultComponents,
   },
 };
 </script>

src/views/BoutiqueColumn/views/urbanExpressNews.vue → src/views/BoutiqueColumn/views/default copy.vue

@@ -10,6 +10,7 @@
       @expand-change="rowClick"
       @sort-change="sortFun"
       style="width: 100%"
+      :default-sort="{ prop: 'stadate', order: 'descending' }"
     >
       <el-table-column type="expand">
         <template #default="props">
@@ -65,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,
@@ -108,11 +109,9 @@ echarts.use([
 ]);
 const openList = [];
 const openLi = [];
-let type = "WATCHRATE",
-  direction = "DESC";
 export default {
-  name: "urbanExpressNews",
-  props: ["item"],
+  name: 'urbanExpressNews',
+  props: ['item'],
   data() {
     return {
       tableData: [],
@@ -120,6 +119,8 @@ export default {
       load: false,
       current: 0,
       total: 1,
+      direction: 'DESC',
+      type: 'STADATE',
     };
   },
   mounted() {
@@ -136,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;
       });
@@ -162,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
             );
           }
@@ -188,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;
@@ -225,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: {
@@ -267,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',
                   },
                 ],
               ],
@@ -293,7 +295,7 @@ export default {
           },
         ],
       };
-      if (this.item.programType === "simple") {
+      if (this.item.programType === 'simple') {
         delete option.visualMap;
         option.series[0].markArea = undefined;
       }
@@ -311,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],
           },
         ],
@@ -343,38 +345,38 @@ export default {
       return chart;
     },
     sortFun(column) {
-      direction = column.order ? config.order[column.order] : "DESC";
-      type = column.prop ? column.prop.toUpperCase() : "WATCHRATE";
+      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();
@@ -383,7 +385,7 @@ export default {
     },
   },
 
-  beforeUnmount: function() {},
+  beforeUnmount: function () {},
   components: {
     watchrateEle,
   },

src/views/BoutiqueColumn/views/default.vue

@@ -1,395 +1,76 @@
 <template>
-  <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%"
-      :default-sort="{ prop: 'stadate', order: 'descending' }"
+  <el-button type="primary" class="export"> 导出 </el-button>
+  <el-table :data="list">
+    <el-table-column type="expand">
+      <template #default="props">
+        <video :ref="'video' + props.row.epg_id" style="width: 100%;" :src="props.row.video_url"></video>
+        <div :ref="'schedule' + props.row.epg_id" v-text="props.row.epg_id"></div>
+      </template>
+    </el-table-column>
+    <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="stadate"
+      sortable="custom"
     >
-      <el-table-column type="expand">
-        <template #default="props">
-          <div :class="'loadare' + props.row.epg_id">
-            <el-row v-if="item.programType !== 'simple'">
-              <el-col :span="20">
-                <div :ref="'huashanChart' + props.row.epg_id"></div>
-              </el-col>
-              <el-col :span="4">
-                <div :ref="'huashanListChart' + props.row.epg_id"></div>
-              </el-col>
-            </el-row>
-            <div v-else :ref="'huashanChart' + props.row.epg_id"></div>
-          </div>
-        </template>
-      </el-table-column>
-      <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="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"
-            :zoom="item.maxRate"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- <el-pagination
-      :page-size="size"
-      v-if="total / size > 1"
-      v-model:current-page="current"
-      @current-change="changePage"
-      :total="total"
+      <template #default="scope"> {{ scope.row.occrate }}% </template>
+    </el-table-column>
+    <el-table-column
+      align="center"
+      label="日期"
+      prop="stadate"
+      sortable="custom"
     >
-    </el-pagination> -->
-    <el-button
-      type="default"
-      style="margin: 5px auto; display: block"
-      v-if="total > tableData.length"
-      :loading="load"
-      @click="() => changePage(current)"
-      size="mini"
-    >
-      {{ load ? '加载中...' : '加载更多' }}
-    </el-button>
-  </div>
+      <template #default="scope">
+        <watchrate-ele
+          :watchrate="scope.row.watchrate"
+          :zoom="scope.row.maxRate"
+        />
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
-
-<script>
+<script setup>
 // @ is an alias to /src
-import { epgDetail, epgResult } from '@/api/index';
-
+import { epgResult } from '@/api/index';
+import { defineProps, ref } from 'vue';
 import watchrateEle from '../components/watchrate.vue';
 
-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';
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LineChart,
-  BarChart,
-  CanvasRenderer,
-  ToolboxComponent,
-  VisualMapComponent,
-  LabelLayout,
-  UniversalTransition,
-]);
-const openList = [];
-const openLi = [];
-export default {
-  name: 'urbanExpressNews',
-  props: ['item'],
-  data() {
-    return {
-      tableData: [],
-      size: 10,
-      load: false,
-      current: 0,
-      total: 1,
-      direction: 'DESC',
-      type: 'STADATE',
-    };
-  },
-  mounted() {
-    this.changePage(this.current);
-  },
-  computed: {},
-  methods: {
-    changePage(num) {
-      if (this.load || this.total <= num * this.size) return;
-      this.current = ++num;
-      this.load = true;
-      const p = {
-        programId: this.item.id,
-        page: this.current,
-        pageSize: this.size,
-      };
-      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;
-        } else this.tableData = [...this.tableData, ...programList.data];
-        this.load = false;
-      });
-    },
-    rowClick(row) {
-      if (
-        openList[row.epg_id] !== undefined ||
-        openLi[row.epg_id] !== undefined
-      ) {
-        if (openList[row.epg_id]) {
-          openList[row.epg_id].dispose();
-          openList[row.epg_id] = undefined;
-        }
-        if (openLi[row.epg_id]) {
-          openLi[row.epg_id].dispose();
-          openLi[row.epg_id] = undefined;
-        }
-        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
-            );
-          }
-        );
-      });
-    },
-    createChart(ele, list) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      const height = (ele.offsetWidth * 6) / 16;
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        tooltip: {
-          confine: true,
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-          },
-          formatter: function (data) {
-            return data[0].value;
-          },
-        },
-        grid: {
-          top: '5%',
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: list.map(v => v.metric),
-        },
-        yAxis: {
-          type: 'value',
-          axisLabel: {
-            formatter: watchrate => {
-              return watchrate;
-            },
-          },
-          axisPointer: {
-            snap: true,
-          },
-        },
-        visualMap: {
-          show: false,
-          dimension: 0,
-          pieces: [
-            {
-              lte: 6,
-              color: 'green',
-            },
-            {
-              gt: 6,
-              lte: 800,
-              color: 'red',
-            },
-            {
-              gt: 8,
-              lte: 14,
-              color: 'green',
-            },
-            {
-              gt: 14,
-              lte: 17,
-              color: 'red',
-            },
-            {
-              gt: 17,
-              color: 'green',
-            },
-          ],
-        },
-        series: [
-          {
-            type: 'line',
-            smooth: true,
-            data: list.map(v => v.watchrate),
-            itemStyle: {
-              opacity: 0,
-            },
-            lineStyle: {
-              width: 1,
-            },
-            emphasis: {
-              scale: false,
-              lineStyle: {
-                width: 1,
-              },
-            },
-            markArea: {
-              itemStyle: {
-                color: 'rgba(255, 173, 177, 0.4)',
-              },
-              data: [
-                [
-                  {
-                    name: 'Morning Peak',
-                    xAxis: '07:30',
-                  },
-                  {
-                    xAxis: '10:00',
-                  },
-                ],
-                [
-                  {
-                    name: 'Evening Peak',
-                    xAxis: '17:30',
-                  },
-                  {
-                    xAxis: '21:15',
-                  },
-                ],
-              ],
-            },
-          },
-        ],
-      };
-      if (this.item.programType === 'simple') {
-        delete option.visualMap;
-        option.series[0].markArea = undefined;
-      }
-      option && chart.setOption(option);
-      return { chart, height };
-    },
-    createBarChart(ele, height) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        title: {},
-        tooltip: {
-          confine: true,
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
-          },
-        },
-        grid: {
-          top: 0,
-          left: '3%',
-          right: '4%',
-          bottom: '3%',
-          containLabel: true,
-        },
-        xAxis: {
-          type: 'value',
-          splitNumber: 2,
-        },
-        yAxis: {
-          type: 'category',
-          data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
-        },
-        series: [
-          {
-            name: '2011',
-            type: 'bar',
-            data: [1000, 2000, 4000, 50000, 6000, 70000],
-          },
-        ],
-      };
-      option && chart.setOption(option);
-      return chart;
-    },
-    sortFun(column) {
-      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';
-      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: {
-    watchrateEle,
-  },
+const props = defineProps({
+  item: Object,
+  select: String,
+});
+const resultP = {
+  programId: props.item.id,
+  page: 1,
+  pageSize: 10,
+  sort: 'STADATE',
+  order: 'DESC',
 };
+const list = ref([]);
+
+function getEpgResult() {
+  epgResult(resultP).then(r => {
+    resultP.total = r.total || 0;
+    
+    list.value = (r.data || []).map(v => {
+      v.maxMarketRate = r.maxMarketRate;
+      v.maxRate = r.maxRate;
+      return v;
+    });
+  });
+}
+
+getEpgResult();
+
+console.log(props.item);
 </script>
 
 <style></style>

src/views/BoutiqueColumn/views/dialogueSecretary.vue

@@ -1,393 +0,0 @@
-<template>
-  <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">
-        <template #default="props">
-          <div :class="'loadare' + props.row.epg_id">
-            <el-row v-if="item.programType !== 'simple'">
-              <el-col :span="20">
-                <div :ref="'huashanChart' + props.row.epg_id"></div>
-              </el-col>
-              <el-col :span="4">
-                <div :ref="'huashanListChart' + props.row.epg_id"></div>
-              </el-col>
-            </el-row>
-            <div v-else :ref="'huashanChart' + props.row.epg_id"></div>
-          </div>
-        </template>
-      </el-table-column>
-      <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="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"
-            :zoom="item.maxRate"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- <el-pagination
-      :page-size="size"
-      v-if="total / size > 1"
-      v-model:current-page="current"
-      @current-change="changePage"
-      :total="total"
-    >
-    </el-pagination> -->
-    <el-button
-      type="default"
-      style="margin: 5px auto;display: block"
-      v-if="total > tableData.length"
-      :loading="load"
-      @click="()=>changePage(current)"
-      size="mini"
-    >
-      {{ load ? "加载中..." : "加载更多" }}
-    </el-button>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import { epgDetail, epgResult } from "@/api/index";
-
-import watchrateEle from "../components/watchrate.vue";
-
-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";
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LineChart,
-  BarChart,
-  CanvasRenderer,
-  ToolboxComponent,
-  VisualMapComponent,
-  LabelLayout,
-  UniversalTransition,
-]);
-const openList = [];
-const openLi = [];
-let type = "WATCHRATE",
-  direction = "DESC";
-export default {
-  name: "dialogueSecretary",
-  props: ["item"],
-  data() {
-    return {
-      tableData: [],
-      size: 10,
-      load: false,
-      current: 0,
-      total: 1,
-    };
-  },
-  mounted() {
-    this.changePage(this.current);
-  },
-  computed: {},
-  methods: {
-    changePage(num) {
-      if (this.load || this.total <= num * this.size) return;
-      this.current = ++num;
-      this.load = true;
-      const p = {
-        programId: this.item.id,
-        page: this.current,
-        pageSize: this.size,
-      };
-      type && (p.sort = type);
-      direction && (p.order = direction);
-      epgResult(p).then(programList => {
-        this.total = programList.total;
-        if (num === 1) {
-            this.tableData =programList.data;
-        } else this.tableData = [...this.tableData, ...programList.data];
-        this.load = false;
-      });
-    },
-    rowClick(row) {
-      if (
-        openList[row.epg_id] !== undefined ||
-        openLi[row.epg_id] !== undefined
-      ) {
-        if (openList[row.epg_id]) {
-          openList[row.epg_id].dispose();
-          openList[row.epg_id] = undefined;
-        }
-        if (openLi[row.epg_id]) {
-          openLi[row.epg_id].dispose();
-          openLi[row.epg_id] = undefined;
-        }
-        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
-            );
-          }
-        );
-      });
-    },
-    createChart(ele, list) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      const height = (ele.offsetWidth * 6) / 16;
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        tooltip: {
-          confine: true,
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-          },
-          formatter: function(data) {
-            return data[0].value;
-          },
-        },
-        grid: {
-          top: "5%",
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: list.map(v => v.metric),
-        },
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: watchrate => {
-              return watchrate;
-            },
-          },
-          axisPointer: {
-            snap: true,
-          },
-        },
-        visualMap: {
-          show: false,
-          dimension: 0,
-          pieces: [
-            {
-              lte: 6,
-              color: "green",
-            },
-            {
-              gt: 6,
-              lte: 800,
-              color: "red",
-            },
-            {
-              gt: 8,
-              lte: 14,
-              color: "green",
-            },
-            {
-              gt: 14,
-              lte: 17,
-              color: "red",
-            },
-            {
-              gt: 17,
-              color: "green",
-            },
-          ],
-        },
-        series: [
-          {
-            type: "line",
-            smooth: true,
-            data: list.map(v => v.watchrate),
-            itemStyle: {
-              opacity: 0,
-            },
-            lineStyle: {
-              width: 1,
-            },
-            emphasis: {
-              scale: false,
-              lineStyle: {
-                width: 1,
-              },
-            },
-            markArea: {
-              itemStyle: {
-                color: "rgba(255, 173, 177, 0.4)",
-              },
-              data: [
-                [
-                  {
-                    name: "Morning Peak",
-                    xAxis: "07:30",
-                  },
-                  {
-                    xAxis: "10:00",
-                  },
-                ],
-                [
-                  {
-                    name: "Evening Peak",
-                    xAxis: "17:30",
-                  },
-                  {
-                    xAxis: "21:15",
-                  },
-                ],
-              ],
-            },
-          },
-        ],
-      };
-      if (this.item.programType === "simple") {
-        delete option.visualMap;
-        option.series[0].markArea = undefined;
-      }
-      option && chart.setOption(option);
-      return { chart, height };
-    },
-    createBarChart(ele, height) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        title: {},
-        tooltip: {
-          confine: true,
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
-          },
-        },
-        grid: {
-          top: 0,
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "value",
-          splitNumber: 2,
-        },
-        yAxis: {
-          type: "category",
-          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
-        },
-        series: [
-          {
-            name: "2011",
-            type: "bar",
-            data: [1000, 2000, 4000, 50000, 6000, 70000],
-          },
-        ],
-      };
-      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(0);
-    },
-    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() {},
-  components: {
-    watchrateEle,
-  },
-};
-</script>
-
-<style></style>

src/views/BoutiqueColumn/views/huashanlunjian.vue

@@ -1,390 +0,0 @@
-<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">
-        <template #default="props">
-          <div :class="'loadare' + props.row.epg_id">
-            <el-row v-if="item.programType !== 'simple'">
-              <el-col :span="20">
-                <div :ref="'huashanChart' + props.row.epg_id"></div>
-              </el-col>
-              <el-col :span="4">
-                <div :ref="'huashanListChart' + props.row.epg_id"></div>
-              </el-col>
-            </el-row>
-            <div v-else :ref="'huashanChart' + props.row.epg_id"></div>
-          </div>
-        </template>
-      </el-table-column>
-      <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="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"
-            :zoom="item.maxRate"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- <el-pagination
-      :page-size="size"
-      v-if="total / size > 1"
-      v-model:current-page="current"
-      @current-change="changePage"
-      :total="total"
-    >
-    </el-pagination> -->
-    <el-button
-      type="default"
-      style="margin: 5px auto;display: block"
-      v-if="total > tableData.length"
-      :loading="load"
-      @click="()=>changePage(current)"
-      size="mini"
-    >
-      {{ load ? "加载中..." : "加载更多" }}
-    </el-button>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import { epgDetail, epgResult } from "@/api/index";
-
-import watchrateEle from "../components/watchrate.vue";
-
-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";
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LineChart,
-  BarChart,
-  CanvasRenderer,
-  ToolboxComponent,
-  VisualMapComponent,
-  LabelLayout,
-  UniversalTransition,
-]);
-const openList = [];
-const openLi = [];
-let type = "WATCHRATE",
-  direction = "DESC";
-
-export default {
-  name: "huashanlunjian",
-  props: ["item"],
-  data() {
-    return {
-      load: false,
-      tableData: [],
-      size: 10,
-      current: 0,
-      total: 1,
-    };
-  },
-  mounted() {
-    this.changePage(this.current);
-  },
-  computed: {},
-  methods: {
-    changePage(num) {
-      if (this.load || this.total <= num * this.size) return;
-      this.current = ++num;
-      this.load = true;
-      const p = {
-        programId: this.item.id,
-        page: this.current,
-        pageSize: this.size,
-      };
-      type && (p.sort = type);
-      direction && (p.order = direction);
-      epgResult(p).then(programList => {
-        this.total = programList.total;
-        if (num === 1) {
-            this.tableData =programList.data;
-        } else this.tableData = [...this.tableData, ...programList.data];
-        this.load = false;
-      });
-    },
-    rowClick(row) {
-      if (
-        openList[row.epg_id] !== undefined ||
-        openLi[row.epg_id] !== undefined
-      ) {
-        if (openList[row.epg_id]) {
-          openList[row.epg_id].dispose();
-          openList[row.epg_id] = undefined;
-        }
-        if (openLi[row.epg_id]) {
-          openLi[row.epg_id].dispose();
-          openLi[row.epg_id] = undefined;
-        }
-        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
-            );
-          }
-        );
-      });
-    },
-    createChart(ele, list) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      const height = (ele.offsetWidth * 6) / 16;
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          confine: true,
-          axisPointer: {
-            type: "cross",
-          },
-          formatter: function(data) {
-            return data[0].value;
-          },
-        },
-        grid: {
-          top: "5%",
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: list.map(v => v.metric),
-        },
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: watchrate => {
-              return watchrate;
-            },
-          },
-          axisPointer: {
-            snap: true,
-          },
-        },
-        visualMap: {
-          show: false,
-          dimension: 0,
-          pieces: [
-            {
-              lte: 6,
-              color: "green",
-            },
-            {
-              gt: 6,
-              lte: 800,
-              color: "red",
-            },
-            {
-              gt: 8,
-              lte: 14,
-              color: "green",
-            },
-            {
-              gt: 14,
-              lte: 17,
-              color: "red",
-            },
-            {
-              gt: 17,
-              color: "green",
-            },
-          ],
-        },
-        series: [
-          {
-            type: "line",
-            smooth: true,
-            data: list.map(v => v.watchrate),
-            itemStyle: {
-              opacity: 0,
-            },
-            lineStyle: {
-              width: 1,
-            },
-            emphasis: {
-              scale: false,
-              lineStyle: {
-                width: 1,
-              },
-            },
-            markArea: {
-              itemStyle: {
-                color: "rgba(255, 173, 177, 0.4)",
-              },
-              data: [
-                [
-                  {
-                    name: "Morning Peak",
-                    xAxis: "07:30",
-                  },
-                  {
-                    xAxis: "10:00",
-                  },
-                ],
-                [
-                  {
-                    name: "Evening Peak",
-                    xAxis: "17:30",
-                  },
-                  {
-                    xAxis: "21:15",
-                  },
-                ],
-              ],
-            },
-          },
-        ],
-      };
-      if (this.item.programType === "simple") {
-        delete option.visualMap;
-        option.series[0].markArea = undefined;
-      }
-      option && chart.setOption(option);
-      return { chart, height };
-    },
-    createBarChart(ele, height) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        title: {},
-        tooltip: {
-          confine: true,
-          trigger: "axis",
-        },
-        grid: {
-          top: 0,
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "value",
-          splitNumber: 2,
-        },
-        yAxis: {
-          type: "category",
-        },
-        series: [
-          {
-            name: "2011",
-            type: "bar",
-            data: [1000, 2000, 4000, 50000, 6000, 70000],
-          },
-        ],
-      };
-      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(0);
-    },
-    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: {
-    watchrateEle,
-  },
-};
-</script>
-
-<style></style>

src/views/BoutiqueColumn/views/hundredBrokenPlays.vue

@@ -1,394 +0,0 @@
-<template>
-  <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">
-        <template #default="props">
-          <div :class="'loadare' + props.row.epg_id">
-            <el-row v-if="item.programType !== 'simple'">
-              <el-col :span="20">
-                <div :ref="'huashanChart' + props.row.epg_id"></div>
-              </el-col>
-              <el-col :span="4">
-                <div :ref="'huashanListChart' + props.row.epg_id"></div>
-              </el-col>
-            </el-row>
-            <div v-else :ref="'huashanChart' + props.row.epg_id"></div>
-          </div>
-        </template>
-      </el-table-column>
-      <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="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"
-            :zoom="item.maxRate"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- <el-pagination
-      :page-size="size"
-      v-if="total / size > 1"
-      v-model:current-page="current"
-      @current-change="changePage"
-      :total="total"
-    >
-    </el-pagination> -->
-    <el-button
-      type="default"
-      style="margin: 5px auto;display: block"
-      v-if="total > tableData.length"
-      :loading="load"
-      @click="()=>changePage(current)"
-      size="mini"
-    >
-      {{ load ? "加载中..." : "加载更多" }}
-    </el-button>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import { epgDetail, epgResult } from "@/api/index";
-
-import watchrateEle from "../components/watchrate.vue";
-
-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";
-
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LineChart,
-  BarChart,
-  CanvasRenderer,
-  ToolboxComponent,
-  VisualMapComponent,
-  LabelLayout,
-  UniversalTransition,
-]);
-const openList = [];
-const openLi = [];
-let type = "WATCHRATE",
-  direction = "DESC";
-export default {
-  name: "HundredBrokenPlays",
-  props: ["item"],
-  data() {
-    return {
-      tableData: [],
-      size: 10,
-      load: false,
-      current: 0,
-      total: 1,
-    };
-  },
-  mounted() {
-    this.changePage(this.current);
-  },
-  computed: {},
-  methods: {
-    changePage(num) {
-      if (this.load || this.total <= num * this.size) return;
-      this.current = ++num;
-      this.load = true;
-      const p = {
-        programId: this.item.id,
-        page: this.current,
-        pageSize: this.size,
-      };
-      type && (p.sort = type);
-      direction && (p.order = direction);
-      epgResult(p).then(programList => {
-        this.total = programList.total;
-        if (num === 1) {
-            this.tableData =programList.data;
-        } else this.tableData = [...this.tableData, ...programList.data];
-        this.load = false;
-      });
-    },
-    rowClick(row) {
-      if (
-        openList[row.epg_id] !== undefined ||
-        openLi[row.epg_id] !== undefined
-      ) {
-        if (openList[row.epg_id]) {
-          openList[row.epg_id].dispose();
-          openList[row.epg_id] = undefined;
-        }
-        if (openLi[row.epg_id]) {
-          openLi[row.epg_id].dispose();
-          openLi[row.epg_id] = undefined;
-        }
-        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
-            );
-          }
-        );
-      });
-    },
-    createChart(ele, list) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      const height = (ele.offsetWidth * 6) / 16;
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          confine: true,
-          axisPointer: {
-            type: "cross",
-          },
-          formatter: function(data) {
-            return data[0].value;
-          },
-        },
-        grid: {
-          top: "5%",
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: list.map(v => v.metric),
-        },
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: watchrate => {
-              return watchrate;
-            },
-          },
-          axisPointer: {
-            snap: true,
-          },
-        },
-        visualMap: {
-          show: false,
-          dimension: 0,
-          pieces: [
-            {
-              lte: 6,
-              color: "green",
-            },
-            {
-              gt: 6,
-              lte: 800,
-              color: "red",
-            },
-            {
-              gt: 8,
-              lte: 14,
-              color: "green",
-            },
-            {
-              gt: 14,
-              lte: 17,
-              color: "red",
-            },
-            {
-              gt: 17,
-              color: "green",
-            },
-          ],
-        },
-        series: [
-          {
-            type: "line",
-            smooth: true,
-            data: list.map(v => v.watchrate),
-            itemStyle: {
-              opacity: 0,
-            },
-            lineStyle: {
-              width: 1,
-            },
-            emphasis: {
-              scale: false,
-              lineStyle: {
-                width: 1,
-              },
-            },
-            markArea: {
-              itemStyle: {
-                color: "rgba(255, 173, 177, 0.4)",
-              },
-              data: [
-                [
-                  {
-                    name: "Morning Peak",
-                    xAxis: "07:30",
-                  },
-                  {
-                    xAxis: "10:00",
-                  },
-                ],
-                [
-                  {
-                    name: "Evening Peak",
-                    xAxis: "17:30",
-                  },
-                  {
-                    xAxis: "21:15",
-                  },
-                ],
-              ],
-            },
-          },
-        ],
-      };
-      if (this.item.programType === "simple") {
-        delete option.visualMap;
-        option.series[0].markArea = undefined;
-      }
-      option && chart.setOption(option);
-      return { chart, height };
-    },
-    createBarChart(ele, height) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        title: {},
-        tooltip: {
-          trigger: "axis",
-          confine: true,
-          axisPointer: {
-            type: "shadow",
-          },
-        },
-        grid: {
-          top: 0,
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "value",
-          splitNumber: 2,
-        },
-        yAxis: {
-          type: "category",
-          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
-        },
-        series: [
-          {
-            name: "2011",
-            type: "bar",
-            data: [1000, 2000, 4000, 50000, 6000, 70000],
-          },
-        ],
-      };
-      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(0);
-    },
-    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() {},
-  components: {
-    watchrateEle,
-  },
-};
-</script>
-
-<style></style>

src/views/BoutiqueColumn/views/policeStory.vue

@@ -1,394 +0,0 @@
-<template>
-  <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">
-        <template #default="props">
-          <div :class="'loadare' + props.row.epg_id">
-            <el-row v-if="item.programType !== 'simple'">
-              <el-col :span="20">
-                <div :ref="'huashanChart' + props.row.epg_id"></div>
-              </el-col>
-              <el-col :span="4">
-                <div :ref="'huashanListChart' + props.row.epg_id"></div>
-              </el-col>
-            </el-row>
-            <div v-else :ref="'huashanChart' + props.row.epg_id"></div>
-          </div>
-        </template>
-      </el-table-column>
-      <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="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"
-            :zoom="item.maxRate"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- <el-pagination
-      :page-size="size"
-      v-if="total / size > 1"
-      v-model:current-page="current"
-      @current-change="changePage"
-      :total="total"
-    >
-    </el-pagination> -->
-    <el-button
-      type="default"
-      style="margin: 5px auto;display: block"
-      v-if="total > tableData.length"
-      :loading="load"
-      @click="()=>changePage(current)"
-      size="mini"
-    >
-      {{ load ? "加载中..." : "加载更多" }}
-    </el-button>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import { epgDetail, epgResult } from "@/api/index";
-
-import watchrateEle from "../components/watchrate.vue";
-
-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";
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LineChart,
-  BarChart,
-  CanvasRenderer,
-  ToolboxComponent,
-  VisualMapComponent,
-  LabelLayout,
-  UniversalTransition,
-]);
-const openList = [];
-const openLi = [];
-let type = "WATCHRATE",
-  direction = "DESC";
-export default {
-  name: "policeStory",
-  props: ["item"],
-  data() {
-    return {
-      tableData: [],
-      size: 10,
-      load: false,
-      current: 0,
-      total: 1,
-    };
-  },
-  mounted() {
-    this.changePage(this.current);
-  },
-  computed: {},
-  methods: {
-    changePage(num) {
-        console.log(num)
-      if (this.load || this.total <= num * this.size) return;
-      this.current = ++num;
-      this.load = true;
-      const p = {
-        programId: this.item.id,
-        page: num,
-        pageSize: this.size,
-      };
-      type && (p.sort = type);
-      direction && (p.order = direction);
-      epgResult(p).then(programList => {
-        this.total = programList.total;
-        if (num === 1) {
-            this.tableData =programList.data;
-        } else this.tableData = [...this.tableData, ...programList.data];
-        this.load = false;
-      });
-    },
-    rowClick(row) {
-      if (
-        openList[row.epg_id] !== undefined ||
-        openLi[row.epg_id] !== undefined
-      ) {
-        if (openList[row.epg_id]) {
-          openList[row.epg_id].dispose();
-          openList[row.epg_id] = undefined;
-        }
-        if (openLi[row.epg_id]) {
-          openLi[row.epg_id].dispose();
-          openLi[row.epg_id] = undefined;
-        }
-        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
-            );
-          }
-        );
-      });
-    },
-    createChart(ele, list) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      const height = (ele.offsetWidth * 6) / 16;
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          confine: true,
-          axisPointer: {
-            type: "cross",
-          },
-          formatter: function(data) {
-            return data[0].value;
-          },
-        },
-        grid: {
-          top: "5%",
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: list.map(v => v.metric),
-        },
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: watchrate => {
-              return watchrate;
-            },
-          },
-          axisPointer: {
-            snap: true,
-          },
-        },
-        visualMap: {
-          show: false,
-          dimension: 0,
-          pieces: [
-            {
-              lte: 6,
-              color: "green",
-            },
-            {
-              gt: 6,
-              lte: 800,
-              color: "red",
-            },
-            {
-              gt: 8,
-              lte: 14,
-              color: "green",
-            },
-            {
-              gt: 14,
-              lte: 17,
-              color: "red",
-            },
-            {
-              gt: 17,
-              color: "green",
-            },
-          ],
-        },
-        series: [
-          {
-            type: "line",
-            smooth: true,
-            data: list.map(v => v.watchrate),
-            itemStyle: {
-              opacity: 0,
-            },
-            lineStyle: {
-              width: 1,
-            },
-            emphasis: {
-              scale: false,
-              lineStyle: {
-                width: 1,
-              },
-            },
-            markArea: {
-              itemStyle: {
-                color: "rgba(255, 173, 177, 0.4)",
-              },
-              data: [
-                [
-                  {
-                    name: "Morning Peak",
-                    xAxis: "07:30",
-                  },
-                  {
-                    xAxis: "10:00",
-                  },
-                ],
-                [
-                  {
-                    name: "Evening Peak",
-                    xAxis: "17:30",
-                  },
-                  {
-                    xAxis: "21:15",
-                  },
-                ],
-              ],
-            },
-          },
-        ],
-      };
-      if (this.item.programType === "simple") {
-        delete option.visualMap;
-        option.series[0].markArea = undefined;
-      }
-      option && chart.setOption(option);
-      return { chart, height };
-    },
-    createBarChart(ele, height) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        title: {},
-        tooltip: {
-          trigger: "axis",
-          confine: true,
-          axisPointer: {
-            type: "shadow",
-          },
-        },
-        grid: {
-          top: 0,
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "value",
-          splitNumber: 2,
-        },
-        yAxis: {
-          type: "category",
-          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
-        },
-        series: [
-          {
-            name: "2011",
-            type: "bar",
-            data: [1000, 2000, 4000, 50000, 6000, 70000],
-          },
-        ],
-      };
-      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(0);
-    },
-    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() {},
-  components: {
-    watchrateEle,
-  },
-};
-</script>
-
-<style></style>

src/views/BoutiqueColumn/views/shaanxiNewsSimulcast.vue

@@ -1,393 +0,0 @@
-<template>
-  <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">
-        <template #default="props">
-          <div :class="'loadare' + props.row.epg_id">
-            <el-row v-if="item.programType !== 'simple'">
-              <el-col :span="20">
-                <div :ref="'shaanxiNewsChart' + props.row.epg_id"></div>
-              </el-col>
-              <el-col :span="4">
-                <div :ref="'shaanxiNewsListChart' + props.row.epg_id"></div>
-              </el-col>
-            </el-row>
-            <div v-else :ref="'shaanxiNewsChart' + props.row.epg_id"></div>
-          </div>
-        </template>
-      </el-table-column>
-      <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="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"
-            :zoom="item.maxRate"
-          />
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- <el-pagination
-      v-if="total / size > 1"
-      :page-size="size"
-      v-model:current-page="current"
-      @current-change="changePage"
-      :total="total"
-    >
-    </el-pagination> -->
-    <el-button
-      type="default"
-      style="margin: 5px auto;display: block"
-      v-if="total > tableData.length"
-      :loading="load"
-      @click="()=>changePage(current)"
-      size="mini"
-    >
-      {{ load ? "加载中..." : "加载更多" }}
-    </el-button>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import { epgDetail, epgResult } from "@/api/index";
-
-import watchrateEle from "../components/watchrate.vue";
-
-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";
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LineChart,
-  BarChart,
-  CanvasRenderer,
-  ToolboxComponent,
-  VisualMapComponent,
-  LabelLayout,
-  UniversalTransition,
-]);
-const openList = [];
-const openLi = [];
-let type = "WATCHRATE",
-  direction = "DESC";
-export default {
-  name: "shaanxiNewsSimulcast",
-  props: ["item"],
-  data() {
-    return {
-      tableData: [],
-      size: 10,
-      load: false,
-      current: 0,
-      total: 1,
-    };
-  },
-  mounted() {
-    this.changePage(this.current);
-  },
-  computed: {},
-  methods: {
-    changePage(num) {
-      if (this.load || this.total <= num * this.size) return;
-      this.current = ++num;
-      this.load = true;
-      const p = {
-        programId: this.item.id,
-        page: this.current,
-        pageSize: this.size,
-      };
-      type && (p.sort = type);
-      direction && (p.order = direction);
-      epgResult(p).then(programList => {
-        this.total = programList.total;
-        if (num === 1) {
-            this.tableData =programList.data;
-        } else this.tableData = [...this.tableData, ...programList.data];
-        this.load = false;
-      });
-    },
-    rowClick(row) {
-      if (
-        openList[row.epg_id] !== undefined ||
-        openLi[row.epg_id] !== undefined
-      ) {
-        if (openList[row.epg_id]) {
-          openList[row.epg_id].dispose();
-          openList[row.epg_id] = undefined;
-        }
-        if (openLi[row.epg_id]) {
-          openLi[row.epg_id].dispose();
-          openLi[row.epg_id] = undefined;
-        }
-        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
-            );
-          }
-        );
-      });
-    },
-    createChart(ele, list) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      const height = (ele.offsetWidth * 6) / 16;
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        tooltip: {
-          trigger: "axis",
-          confine: true,
-          axisPointer: {
-            type: "cross",
-          },
-          formatter: function(data) {
-            return data[0].value;
-          },
-        },
-        grid: {
-          top: "5%",
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: list.map(v => v.metric),
-        },
-        yAxis: {
-          type: "value",
-          axisLabel: {
-            formatter: watchrate => {
-              return watchrate;
-            },
-          },
-          axisPointer: {
-            snap: true,
-          },
-        },
-        visualMap: {
-          show: false,
-          dimension: 0,
-          pieces: [
-            {
-              lte: 6,
-              color: "green",
-            },
-            {
-              gt: 6,
-              lte: 800,
-              color: "red",
-            },
-            {
-              gt: 8,
-              lte: 14,
-              color: "green",
-            },
-            {
-              gt: 14,
-              lte: 17,
-              color: "red",
-            },
-            {
-              gt: 17,
-              color: "green",
-            },
-          ],
-        },
-        series: [
-          {
-            type: "line",
-            smooth: true,
-            data: list.map(v => v.watchrate),
-            itemStyle: {
-              opacity: 0,
-            },
-            lineStyle: {
-              width: 1,
-            },
-            emphasis: {
-              scale: false,
-              lineStyle: {
-                width: 1,
-              },
-            },
-            markArea: {
-              itemStyle: {
-                color: "rgba(255, 173, 177, 0.4)",
-              },
-              data: [
-                [
-                  {
-                    name: "Morning Peak",
-                    xAxis: "07:30",
-                  },
-                  {
-                    xAxis: "10:00",
-                  },
-                ],
-                [
-                  {
-                    name: "Evening Peak",
-                    xAxis: "17:30",
-                  },
-                  {
-                    xAxis: "21:15",
-                  },
-                ],
-              ],
-            },
-          },
-        ],
-      };
-      if (this.item.programType === "simple") {
-        delete option.visualMap;
-        option.series[0].markArea = undefined;
-      }
-      option && chart.setOption(option);
-      return { chart, height };
-    },
-    createBarChart(ele, height) {
-      if (!ele) return;
-      const chart = echarts.init(ele);
-      chart.resize({
-        height,
-        width: ele.offsetWidth,
-      });
-      let option = {
-        title: {},
-        tooltip: {
-          trigger: "axis",
-          confine: true,
-          axisPointer: {
-            type: "shadow",
-          },
-        },
-        grid: {
-          top: 0,
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        xAxis: {
-          type: "value",
-          splitNumber: 2,
-        },
-        yAxis: {
-          type: "category",
-          data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
-        },
-        series: [
-          {
-            name: "2011",
-            type: "bar",
-            data: [1000, 2000, 4000, 50000, 6000, 70000],
-          },
-        ],
-      };
-      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(0);
-    },
-    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() {},
-  components: {
-    watchrateEle,
-  },
-};
-</script>
-
-<style></style>