优化

src/views/BoutiqueColumn/views/dialogueSecretary.vue

@@ -2,14 +2,14 @@
   <div class="huashanlunjian">
     <el-table
       :data="tableData"
-      :header-cell-style="{ backgroundColor: '#f4f5f7',color: '#606266' }"
+      :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
       v-if="tableData.length"
       @expand-change="rowClick"
       style="width: 100%"
     >
       <el-table-column type="expand">
         <template #default="props">
-          <div>
+          <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>
@@ -26,13 +26,16 @@
       <el-table-column align="center" label="标题" prop="program_name" />
       <el-table-column align="center" label="收视率" prop="watchrate">
         <template #default="scope">
-          <watchrate-ele :watchrate="scope.row.watchrate" :zoom="item.maxRate"/>
+          <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-if="total / size > 1"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
@@ -107,7 +110,7 @@ export default {
       });
     },
     rowClick(row) {
-       if (
+      if (
         openList[row.epg_id] !== undefined ||
         openLi[row.epg_id] !== undefined
       ) {
@@ -119,17 +122,21 @@ export default {
           openLi[row.epg_id].dispose();
           openLi[row.epg_id] = undefined;
         }
-        return
+        return;
       }
-      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
+      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
+            );
+          }
         );
       });
     },
@@ -306,5 +313,3 @@ export default {
 </script>
 
 <style></style>
-
-

src/views/BoutiqueColumn/views/hundredBrokenPlays.vue

@@ -3,13 +3,13 @@
     <el-table
       :data="tableData"
       v-if="tableData.length"
-      :header-cell-style="{ backgroundColor: '#f4f5f7',color: '#606266' }"
+      :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
       @expand-change="rowClick"
       style="width: 100%"
     >
       <el-table-column type="expand">
         <template #default="props">
-          <div>
+          <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>
@@ -26,13 +26,16 @@
       <el-table-column align="center" label="标题" prop="program_name" />
       <el-table-column align="center" label="收视率" prop="watchrate">
         <template #default="scope">
-          <watchrate-ele :watchrate="scope.row.watchrate" :zoom="item.maxRate"/>
+          <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-if="total / size > 1"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
@@ -107,7 +110,7 @@ export default {
       });
     },
     rowClick(row) {
-     if (
+      if (
         openList[row.epg_id] !== undefined ||
         openLi[row.epg_id] !== undefined
       ) {
@@ -119,18 +122,20 @@ export default {
           openLi[row.epg_id].dispose();
           openLi[row.epg_id] = undefined;
         }
-        return
+        return;
       }
-      epgDetail({ epgId: 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
-        );
+      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) {
@@ -306,6 +311,3 @@ export default {
 </script>
 
 <style></style>
-
-
-

src/views/BoutiqueColumn/views/policeStory.vue

@@ -3,13 +3,13 @@
     <el-table
       :data="tableData"
       v-if="tableData.length"
-      :header-cell-style="{ backgroundColor: '#f4f5f7',color: '#606266' }"
+      :header-cell-style="{ backgroundColor: '#f4f5f7', color: '#606266' }"
       @expand-change="rowClick"
       style="width: 100%"
     >
       <el-table-column type="expand">
         <template #default="props">
-          <div>
+          <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>
@@ -26,13 +26,16 @@
       <el-table-column align="center" label="标题" prop="program_name" />
       <el-table-column align="center" label="收视率" prop="watchrate">
         <template #default="scope">
-          <watchrate-ele :watchrate="scope.row.watchrate" :zoom="item.maxRate"/>
+          <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-if="total / size > 1"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
@@ -107,7 +110,7 @@ export default {
       });
     },
     rowClick(row) {
-     if (
+      if (
         openList[row.epg_id] !== undefined ||
         openLi[row.epg_id] !== undefined
       ) {
@@ -119,18 +122,20 @@ export default {
           openLi[row.epg_id].dispose();
           openLi[row.epg_id] = undefined;
         }
-        return
+        return;
       }
-      epgDetail({ epgId: 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
-        );
+      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) {
@@ -306,8 +311,3 @@ export default {
 </script>
 
 <style></style>
-
-
-
-
-

src/views/BoutiqueColumn/views/shaanxiNewsSimulcast.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="huashanlunjian">
+  <div class="shaanxiNewslunjian">
     <el-table
       :data="tableData"
       v-if="tableData.length"
@@ -9,16 +9,16 @@
     >
       <el-table-column type="expand">
         <template #default="props">
-          <div>
+          <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>
+                <div :ref="'shaanxiNewsChart' + props.row.epg_id"></div>
               </el-col>
               <el-col :span="4">
-                <div :ref="'huashanListChart' + props.row.epg_id"></div>
+                <div :ref="'shaanxiNewsListChart' + props.row.epg_id"></div>
               </el-col>
             </el-row>
-            <div v-else :ref="'huashanChart' + props.row.epg_id"></div>
+            <div v-else :ref="'shaanxiNewsChart' + props.row.epg_id"></div>
           </div>
         </template>
       </el-table-column>
@@ -34,7 +34,7 @@
       </el-table-column>
     </el-table>
     <el-pagination
-      v-if="total/size > 1"
+      v-if="total / size > 1"
       :page-size="size"
       v-model:current-page="current"
       @current-change="changePage"
@@ -124,16 +124,18 @@ export default {
         }
         return;
       }
-      epgDetail({ epgId: 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
-        );
+      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) {

src/views/BoutiqueColumn/views/urbanExpressNews.vue

@@ -9,7 +9,7 @@
     >
       <el-table-column type="expand">
         <template #default="props">
-          <div>
+          <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>
@@ -35,7 +35,7 @@
     </el-table>
     <el-pagination
       :page-size="size"
-      v-if="total/size > 1"
+      v-if="total / size > 1"
       v-model:current-page="current"
       @current-change="changePage"
       :total="total"
@@ -124,16 +124,18 @@ export default {
         }
         return;
       }
-      epgDetail({ epgId: 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
-        );
+      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) {