精品节目

src/App.vue

@@ -51,4 +51,7 @@ body .el-date-table td.today span, body .el-select-dropdown__item.selected,body
 body .el-date-editor--daterange.el-input__inner,body .el-date-editor--timerange.el-input__inner{
   width:220px
 }
+.nav{
+  min-height: 100vh;
+}
 </style>

src/api/index.js

@@ -134,3 +134,43 @@ export function channelcsv(data) {
     data
   });
 }
+
+
+/**
+ * 获取精品节目列表
+ * @props {}
+ * @returns {AxiosPromise}
+ */
+ export function epgList() {
+  return ajax({
+    urlType: 'url2',
+    url: "/program",
+    method: "get",
+  });
+}
+/**
+ * 获取精品节目详情
+ * @props {}
+ * @returns {AxiosPromise}
+ */
+export function epgDetail(data) {
+  return ajax({
+    urlType: 'url2',
+    url: "/epg-detail",
+    method: "get",
+    data
+  });
+}
+/**
+ * 获取精品节目指标
+ * @props {}
+ * @returns {AxiosPromise}
+ */
+export function epgResult(data) {
+  return ajax({
+    urlType: 'url2',
+    url: "/epg-result",
+    method: "get",
+    data
+  });
+}

src/config/index.js

@@ -1,13 +1,16 @@
 let useApiUrl = "http://172.16.101.11:8899",
+  useApiUrl1 = "http://172.16.101.11:9000",
   isRelease = false; //是否是线上发布版本
 if (process.env.NODE_ENV !== "development") {
   useApiUrl = "http://172.16.101.11:8899";
+  useApiUrl1 = "http://172.16.101.11:9000";
   isRelease = true;
 }
 
 export default {
   base: {
     url: useApiUrl,
+    url2: useApiUrl1,
     timeout: 60000,
     isRelease,
     requestRetry: 4,

src/router/index.js

@@ -28,6 +28,11 @@ const routes = [
     path: "/liveChannel",
     name: 'LiveChannel',
     component: () => import(/* webpackChunkName: "LiveChannel" */ '../views/LiveChannel.vue')
+  },
+  {
+    path: "/boutiqueColumn",
+    name: 'boutiqueColumn',
+    component: () => import(/* webpackChunkName: "boutiqueColumn" */ '../views/BoutiqueColumn/BoutiqueColumn.vue')
   }
 ]
 

src/utils/request.js

@@ -1,19 +1,19 @@
 import config from "../config/index";
-// import { ElMessage } from 'element-plus'
 
-function getdata(data){
-  let text = ""
+function getdata(data) {
+  let text = "";
   for (const key in data) {
-    text += key + '=' + data[key] + '&';
+    text += key + "=" + data[key] + "&";
   }
-  text ? text = '?' + text : ""
-  text = text.replace(/&$/, '')
-  return text
+  text ? (text = "?" + text) : "";
+  text = text.replace(/&$/, "");
+  return text;
 }
 
-export default function (ori) {
-  let url = config.base.url + ori.url + getdata(ori.data || {})
-  if(ori.downCsv) return window.open(url)
+export default function(ori) {
+  let baseurl = config.base[ori.urlType || 'url'];
+  let url = baseurl + ori.url + getdata(ori.data || {});
+  if (ori.downCsv) return window.open(url);
   return new Promise((resolve, reject) => {
     var xhttp;
     if (window.XMLHttpRequest) xhttp = new XMLHttpRequest();
@@ -25,21 +25,15 @@ export default function (ori) {
     xhttp.onreadystatechange = function() {
       if (this.readyState != 4 || this.status != 200) return;
       let data = {};
-      try{
-        data = JSON.parse(this.responseText || '{}');
-      }catch(err){
-        console.error(err)
-        reject(err)
+      try {
+        data = JSON.parse(this.responseText || "{}");
+      } catch (err) {
+        console.error(err);
+        reject(err);
       }
-      data.response && (data = data.response)
-      if(!data.status) {
-        // ElMessage({
-        //   message: '请求走丢了',
-        //   type: 'warning',
-        // })
-        return reject(data.message)
-      }
-      resolve(data.data || data.response)
+      data.response && (data = data.response);
+      if (!ori.urlType && !data.status) return reject(data.message);
+      resolve(data.data || data.response);
     };
   });
 }

src/views/BoutiqueColumn/BoutiqueColumn.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="boutiqueColumn">
+    <el-tabs tab-position="left" style="max-height: 100%;">
+      <el-tab-pane
+        v-for="(item, i) in columnNames"
+        :key="i"
+        :label="item.programName"
+      >
+        <el-scrollbar height="100vh" always wrap-class="scorll">
+          <div class="tab-body">
+            <keep-alive>
+              <component
+                v-if="item.component"
+                :is="item.component"
+                :item="item"
+              ></component>
+            </keep-alive>
+          </div>
+        </el-scrollbar>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+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";
+
+export default {
+  name: "boutiqueColumn",
+  data() {
+    return {
+      columnNames: [],
+    };
+  },
+  mounted() {
+    epgList().then(programList => {
+      this.columnNames = programList || [];
+    });
+  },
+  computed: {},
+  methods: {},
+  beforeUnmount: function() {},
+  components: {
+    huashanlunjian,
+    dialogueSecretary,
+    policeStory,
+    shaanxiNewsSimulcast,
+    hundredBrokenPlays,
+    urbanExpressNews,
+  },
+};
+</script>
+
+<style>
+.boutiqueColumn {
+  padding: 10px 15px;
+  height: 100vh;
+  box-sizing: border-box;
+}
+</style>

src/views/BoutiqueColumn/views/dialogueSecretary.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="dialogueSecretary">
+    <el-table :data="tableData" @expand-change="rowClick" style="width: 100%">
+      <el-table-column type="expand">
+        <template #default="props">
+          <div>
+            <el-row>
+              <el-col :span="20">
+                <div :ref="'huashanChart' + props.row.index"></div>
+              </el-col>
+              <el-col :span="4">
+                <div :ref="'huashanListChart' + props.row.index"></div>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="日期" prop="stadate" />
+      <el-table-column label="标题" prop="program_name" />
+      <!-- <el-table-column label="主题" prop="tagging" /> -->
+    </el-table>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { epgDetail, epgResult } from "@/api/index";
+
+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";
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  BarChart,
+  CanvasRenderer,
+  ToolboxComponent,
+  VisualMapComponent,
+  LabelLayout,
+  UniversalTransition,
+]);
+const openList = [];
+const openLi = [];
+export default {
+  name: "dialogueSecretary",
+  props: ["item"],
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  mounted() {
+    epgResult({ programId: this.item.id }).then(programList => {
+      this.tableData = programList;
+    });
+  },
+  computed: {},
+  methods: {
+    rowClick(row) {
+      if (
+        openList[row.index] !== undefined ||
+        openLi[row.index] !== undefined
+      ) {
+        if (openList[row.index]) {
+          openList[row.index].dispose();
+          openList[row.index] = undefined;
+        }
+        if (openLi[row.index]) {
+          openLi[row.index].dispose();
+          openLi[row.index] = undefined;
+        }
+        return;
+      }
+      epgDetail({ epgId: row.epg_id }).then(res => {
+        console.log(res);
+        let more = this.createChart(
+          this.$refs["huashanChart" + row.index],
+          res
+        );
+        openList[row.index] = more.chart;
+        openLi[row.index] = this.createBarChart(
+          this.$refs["huashanListChart" + row.index],
+          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",
+          axisPointer: {
+            type: "cross",
+          },
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        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: [
+          {
+            name: "Electricity",
+            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",
+                  },
+                ],
+              ],
+            },
+          },
+        ],
+      };
+      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",
+          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;
+    },
+  },
+
+  beforeUnmount: function() {},
+  components: {},
+};
+</script>
+
+<style></style>

src/views/BoutiqueColumn/views/huashanlunjian.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="huashanlunjian">
+    <el-table :data="tableData" @expand-change="rowClick" style="width: 100%">
+      <el-table-column type="expand">
+        <template #default="props">
+          <div>
+            <el-row>
+              <el-col :span="20">
+                <div :ref="'huashanChart' + props.row.index"></div>
+              </el-col>
+              <el-col :span="4">
+                <div :ref="'huashanListChart' + props.row.index"></div>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="日期" prop="stadate" />
+      <el-table-column label="标题" prop="program_name" />
+      <!-- <el-table-column label="主题" prop="tagging" /> -->
+    </el-table>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { epgDetail, epgResult } from "@/api/index";
+
+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";
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  BarChart,
+  CanvasRenderer,
+  ToolboxComponent,
+  VisualMapComponent,
+  LabelLayout,
+  UniversalTransition,
+]);
+const openList = [];
+const openLi = [];
+export default {
+  name: "huashanlunjian",
+  props: ["item"],
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  mounted() {
+    epgResult({ programId: this.item.id }).then(programList => {
+      this.tableData = programList;
+    });
+  },
+  computed: {},
+  methods: {
+    rowClick(row) {
+      if (
+        openList[row.index] !== undefined ||
+        openLi[row.index] !== undefined
+      ) {
+        if (openList[row.index]) {
+          openList[row.index].dispose();
+          openList[row.index] = undefined;
+        }
+        if (openLi[row.index]) {
+          openLi[row.index].dispose();
+          openLi[row.index] = undefined;
+        }
+        return;
+      }
+      epgDetail({ epgId: row.epg_id }).then(res => {
+        console.log(res);
+        let more = this.createChart(
+          this.$refs["huashanChart" + row.index],
+          res
+        );
+        openList[row.index] = more.chart;
+        openLi[row.index] = this.createBarChart(
+          this.$refs["huashanListChart" + row.index],
+          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",
+          axisPointer: {
+            type: "cross",
+          },
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        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: [
+          {
+            name: "Electricity",
+            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",
+                  },
+                ],
+              ],
+            },
+          },
+        ],
+      };
+      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",
+          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;
+    },
+  },
+
+  beforeUnmount: function() {},
+  components: {},
+};
+</script>
+
+<style></style>

src/views/BoutiqueColumn/views/hundredBrokenPlays.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="HundredBrokenPlays">
+    <el-table :data="tableData" @expand-change="rowClick" style="width: 100%">
+      <el-table-column type="expand">
+        <template #default="props">
+          <div>
+            <el-row>
+              <el-col :span="20">
+                <div :ref="'huashanChart' + props.row.index"></div>
+              </el-col>
+              <el-col :span="4">
+                <div :ref="'huashanListChart' + props.row.index"></div>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="日期" prop="stadate" />
+      <el-table-column label="标题" prop="program_name" />
+      <!-- <el-table-column label="主题" prop="tagging" /> -->
+    </el-table>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { epgDetail, epgResult } from "@/api/index";
+
+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";
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  BarChart,
+  CanvasRenderer,
+  ToolboxComponent,
+  VisualMapComponent,
+  LabelLayout,
+  UniversalTransition,
+]);
+const openList = [];
+const openLi = [];
+export default {
+  name: "HundredBrokenPlays",
+  props: ["item"],
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  mounted() {
+    epgResult({ programId: this.item.id }).then(programList => {
+      this.tableData = programList;
+    });
+  },
+  computed: {},
+  methods: {
+    rowClick(row) {
+      if (
+        openList[row.index] !== undefined ||
+        openLi[row.index] !== undefined
+      ) {
+        if (openList[row.index]) {
+          openList[row.index].dispose();
+          openList[row.index] = undefined;
+        }
+        if (openLi[row.index]) {
+          openLi[row.index].dispose();
+          openLi[row.index] = undefined;
+        }
+        return;
+      }
+      epgDetail({ epgId: row.epg_id }).then(res => {
+        console.log(res);
+        let more = this.createChart(
+          this.$refs["huashanChart" + row.index],
+          res
+        );
+        openList[row.index] = more.chart;
+        openLi[row.index] = this.createBarChart(
+          this.$refs["huashanListChart" + row.index],
+          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",
+          axisPointer: {
+            type: "cross",
+          },
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        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: [
+          {
+            name: "Electricity",
+            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",
+                  },
+                ],
+              ],
+            },
+          },
+        ],
+      };
+      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",
+          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;
+    },
+  },
+
+  beforeUnmount: function() {},
+  components: {},
+};
+</script>
+
+<style></style>

src/views/BoutiqueColumn/views/policeStory.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="policeStory">
+    <el-table :data="tableData" @expand-change="rowClick" style="width: 100%">
+      <el-table-column type="expand">
+        <template #default="props">
+          <div>
+            <el-row>
+              <el-col :span="20">
+                <div :ref="'huashanChart' + props.row.index"></div>
+              </el-col>
+              <el-col :span="4">
+                <div :ref="'huashanListChart' + props.row.index"></div>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="日期" prop="stadate" />
+      <el-table-column label="标题" prop="program_name" />
+      <!-- <el-table-column label="主题" prop="tagging" /> -->
+    </el-table>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { epgDetail, epgResult } from "@/api/index";
+
+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";
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  BarChart,
+  CanvasRenderer,
+  ToolboxComponent,
+  VisualMapComponent,
+  LabelLayout,
+  UniversalTransition,
+]);
+const openList = [];
+const openLi = [];
+export default {
+  name: "policeStory",
+  props: ["item"],
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  mounted() {
+    epgResult({ programId: this.item.id }).then(programList => {
+      this.tableData = programList;
+    });
+  },
+  computed: {},
+  methods: {
+    rowClick(row) {
+      if (
+        openList[row.index] !== undefined ||
+        openLi[row.index] !== undefined
+      ) {
+        if (openList[row.index]) {
+          openList[row.index].dispose();
+          openList[row.index] = undefined;
+        }
+        if (openLi[row.index]) {
+          openLi[row.index].dispose();
+          openLi[row.index] = undefined;
+        }
+        return;
+      }
+      epgDetail({ epgId: row.epg_id }).then(res => {
+        console.log(res);
+        let more = this.createChart(
+          this.$refs["huashanChart" + row.index],
+          res
+        );
+        openList[row.index] = more.chart;
+        openLi[row.index] = this.createBarChart(
+          this.$refs["huashanListChart" + row.index],
+          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",
+          axisPointer: {
+            type: "cross",
+          },
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        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: [
+          {
+            name: "Electricity",
+            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",
+                  },
+                ],
+              ],
+            },
+          },
+        ],
+      };
+      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",
+          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;
+    },
+  },
+
+  beforeUnmount: function() {},
+  components: {},
+};
+</script>
+
+<style></style>

src/views/BoutiqueColumn/views/shaanxiNewsSimulcast.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="shaanxiNewsSimulcast">
+    <el-table :data="tableData" @expand-change="rowClick" style="width: 100%">
+      <el-table-column type="expand">
+        <template #default="props">
+          <div>
+            <el-row>
+              <el-col :span="20">
+                <div :ref="'huashanChart' + props.row.index"></div>
+              </el-col>
+              <el-col :span="4">
+                <div :ref="'huashanListChart' + props.row.index"></div>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="日期" prop="stadate" />
+      <el-table-column label="标题" prop="program_name" />
+      <!-- <el-table-column label="主题" prop="tagging" /> -->
+    </el-table>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { epgDetail, epgResult } from "@/api/index";
+
+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";
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LineChart,
+  BarChart,
+  CanvasRenderer,
+  ToolboxComponent,
+  VisualMapComponent,
+  LabelLayout,
+  UniversalTransition,
+]);
+const openList = [];
+const openLi = [];
+export default {
+  name: "shaanxiNewsSimulcast",
+  props: ["item"],
+  data() {
+    return {
+      tableData: [],
+    };
+  },
+  mounted() {
+    epgResult({ programId: this.item.id }).then(programList => {
+      this.tableData = programList;
+    });
+  },
+  computed: {},
+  methods: {
+    rowClick(row) {
+      if (
+        openList[row.index] !== undefined ||
+        openLi[row.index] !== undefined
+      ) {
+        if (openList[row.index]) {
+          openList[row.index].dispose();
+          openList[row.index] = undefined;
+        }
+        if (openLi[row.index]) {
+          openLi[row.index].dispose();
+          openLi[row.index] = undefined;
+        }
+        return;
+      }
+      epgDetail({ epgId: row.epg_id }).then(res => {
+        console.log(res);
+        let more = this.createChart(
+          this.$refs["huashanChart" + row.index],
+          res
+        );
+        openList[row.index] = more.chart;
+        openLi[row.index] = this.createBarChart(
+          this.$refs["huashanListChart" + row.index],
+          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",
+          axisPointer: {
+            type: "cross",
+          },
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        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: [
+          {
+            name: "Electricity",
+            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",
+                  },
+                ],
+              ],
+            },
+          },
+        ],
+      };
+      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",
+          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;
+    },
+  },
+
+  beforeUnmount: function() {},
+  components: {},
+};
+</script>
+
+<style></style>

src/views/BoutiqueColumn/views/urbanExpressNews.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="urbanExpressNews">
+    <el-table :data="tableData" @expand-change="rowClick" style="width: 100%">
+      <el-table-column type="expand">
+        <template #default="props">
+          <div>
+            <el-row>
+              <el-col :span="20">
+                <div :ref="'huashanChart' + props.row.index"></div>
+              </el-col>
+              <el-col :span="4">
+                <div :ref="'huashanListChart' + props.row.index"></div>
+              </el-col>
+            </el-row>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="日期" prop="stadate" />
+      <el-table-column label="标题" prop="program_name" />
+      <!-- <el-table-column label="主题" prop="tagging" /> -->
+    </el-table>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import { epgDetail, epgResult } from "@/api/index";
+
+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";
+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: [],
+    };
+  },
+  mounted() {
+    epgResult({ programId: this.item.id }).then(programList => {
+      this.tableData = programList;
+    });
+  },
+  computed: {},
+  methods: {
+    rowClick(row) {
+      if (
+        openList[row.index] !== undefined ||
+        openLi[row.index] !== undefined
+      ) {
+        if (openList[row.index]) {
+          openList[row.index].dispose();
+          openList[row.index] = undefined;
+        }
+        if (openLi[row.index]) {
+          openLi[row.index].dispose();
+          openLi[row.index] = undefined;
+        }
+        return;
+      }
+      epgDetail({ epgId: row.epg_id }).then(res => {
+        console.log(res);
+        let more = this.createChart(
+          this.$refs["huashanChart" + row.index],
+          res
+        );
+        openList[row.index] = more.chart;
+        openLi[row.index] = this.createBarChart(
+          this.$refs["huashanListChart" + row.index],
+          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",
+          axisPointer: {
+            type: "cross",
+          },
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            saveAsImage: {},
+          },
+        },
+        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: [
+          {
+            name: "Electricity",
+            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",
+                  },
+                ],
+              ],
+            },
+          },
+        ],
+      };
+      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",
+          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;
+    },
+  },
+
+  beforeUnmount: function() {},
+  components: {},
+};
+</script>
+
+<style></style>