组织运行概况调试

src/components/e-charts/bar-chart.vue

@@ -11,40 +11,45 @@ export default {
       default: () => {
         return {
           legendData: [],
-          seriesData: []
+          seriesData: [],
         };
-      }
+      },
     },
     bar_width: {
       type: Number,
-      default: 12
+      default: 12,
     },
     colors: {
       type: Array,
       default: () => {
         return ["#274fee", "#274fee"];
-      }
+      },
     },
     bar_border_radius: {
       type: Array,
       default: () => {
         return [10, 10, 10, 10];
-      }
+      },
     },
     show_split: {
       type: Boolean,
-      default: false
+      default: false,
     },
     x_router: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
+    xAxis_text_length: {
+      type: Number,
+      default: 0,
+    },
   },
   data: () => ({}),
   mounted() {},
   methods: {
     bar() {
       let self = this;
+
       return {
         tooltip: {
           trigger: "axis",
@@ -55,14 +60,14 @@ export default {
               htmlStr += params[i].value;
             }
             return htmlStr;
-          }
+          },
         },
         grid: {
           left: 10,
           right: 10,
           bottom: 25,
           top: 25,
-          containLabel: true
+          containLabel: true,
         },
         xAxis: [
           {
@@ -72,65 +77,71 @@ export default {
               margin: 20,
               color: "#0d1847",
               textStyle: {
-                fontSize: 12
+                fontSize: 12,
               },
               interval: 0,
               rotate: self.x_router,
-              /* formatter: function(value) {
-                let valueTxt = "";
-                if (value.length > 6) {
-                  valueTxt = value.substring(0, 5) + "...";
+              formatter: function(value) {
+                let maxLen = self.xAxis_text_length;
+
+                if (maxLen > 1) {
+                  let valueTxt = "";
+                  if (value.length > maxLen) {
+                    valueTxt = value.substring(0, maxLen - 1) + "...";
+                  } else {
+                    valueTxt = value;
+                  }
+                  return valueTxt;
                 } else {
-                  valueTxt = value;
+                  return value;
                 }
-                return valueTxt;
-              } */
+              },
             },
             axisLine: {
               lineStyle: {
-                color: "#f2f2f2"
-              }
+                color: "#f2f2f2",
+              },
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitArea: {
               show: true,
               areaStyle: {
                 color: ["#fff", "#f8f9fd"],
-                opacity: 0.5
+                opacity: 0.5,
               },
-              interval: 0
+              interval: 0,
             },
             axisPointer: {
               type: "shadow",
             },
-          }
+          },
         ],
         yAxis: [
           {
             axisLabel: {
               color: "#a9aec0",
               textStyle: {
-                fontSize: 12
-              }
+                fontSize: 12,
+              },
             },
             minInterval: 1,
             axisLine: {
               lineStyle: {
-                color: "rgba(0, 0, 0, 0)"
-              }
+                color: "rgba(0, 0, 0, 0)",
+              },
             },
             axisTick: {
-              show: false
+              show: false,
             },
             splitLine: {
               lineStyle: {
                 color: "#f2f2f2",
-                type: "solid"
-              }
-            }
-          }
+                type: "solid",
+              },
+            },
+          },
         ],
         series: [
           {
@@ -148,24 +159,24 @@ export default {
                     [
                       {
                         offset: 0,
-                        color: self.colors[0] // 0% 处的颜色
+                        color: self.colors[0], // 0% 处的颜色
                       },
                       {
                         offset: 1,
-                        color: self.colors[1] // 100% 处的颜色
-                      }
+                        color: self.colors[1], // 100% 处的颜色
+                      },
                     ],
                     false
                   );
                 },
-                barBorderRadius: self.bar_border_radius
-              }
-            }
-          }
-        ]
+                barBorderRadius: self.bar_border_radius,
+              },
+            },
+          },
+        ],
       };
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped>
@@ -173,4 +184,4 @@ export default {
   width: 100%;
   height: 100%;
 }
-</style>
+</style>
\ No newline at end of file

src/components/e-charts/commentlist.vue

 <template>
   <ul class="comments_list apaas_scroll">
-    <li class="comment_card" v-for="(item, index) in data" :key="'comment_' + index">
+    <li
+      class="comment_card"
+      v-for="(item, index) in data"
+      :key="'comment_' + index"
+    >
       <div class="comment-left">
-        <el-avatar :size="45" fit="cover" :src="item.picture_path || require('../../assets/imgs/img_head.png')" />
+        <el-avatar
+          :size="45"
+          fit="cover"
+          :src="item.picture_path || require('../../assets/imgs/img_head.png')"
+        />
       </div>
       <div class="comment-right">
         <p class="comment-base">
-          <span class="comment-user_name text_clip" v-text="item.user_name"></span>
-          <span class="comment-time text_clip" v-text="getTimeText(item.add_time || '')"></span>
+          <span
+            class="comment-user_name text_clip"
+            v-text="item.user_name"
+          ></span>
+          <span
+            class="comment-time text_clip"
+            v-text="getTimeText(item.add_time || '')"
+          ></span>
         </p>
         <div class="commnet-rate">
           <el-rate
@@ -30,8 +44,16 @@ export default {
   props: {
     data: {
       type: Array,
-      required: true
-    }
+      required: true,
+    },
+  },
+  watch: {
+    data: {
+      handler() {
+        this.autoScroll();
+      },
+      deep: true,
+    },
   },
   methods: {
     getTimeText(time) {
@@ -48,11 +70,17 @@ export default {
         let itemHeight = 77;
         let curScrollTop = this.$el.scrollTop + itemHeight;
 
-        if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) {
+        if (
+          curScrollTop >=
+          this.$el.scrollHeight - this.$el.clientHeight + itemHeight
+        ) {
           curScrollTop = 0;
         }
 
-        this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight);
+        this.$el.scrollTop = Math.min(
+          curScrollTop,
+          this.$el.scrollHeight - this.$el.clientHeight
+        );
       }, 1500);
     },
     mouseenter() {
@@ -62,7 +90,7 @@ export default {
     },
     mouseleave() {
       this.autoScroll();
-    }
+    },
   },
   mounted() {
     this.autoScroll();
@@ -74,7 +102,7 @@ export default {
     if (this.timer) {
       clearInterval(this.timer);
     }
-  }
+  },
 };
 </script>
 

src/components/e-charts/the-list.vue

@@ -14,12 +14,12 @@
         >
           {{ idx + 1 }}.
         </span>
-        <img :src="item.img" />
+        <img :src="item.PicturePath || require('../../assets/imgs/img_head.png')" />
         <p class="text_clip">
-          <span class="name">{{ item.name }}</span><br>
-          <span class="init">{{ item.init }}</span>
+          <span class="name">{{ item.UserName }}</span><br>
+          <span class="init">{{ item.SystemName }}</span>
         </p>
-        <span class="count">{{ getCount(item.count) }}次</span>
+        <span class="count">{{ getCount(item.Count) }}次</span>
       </li>
     </ul>
   </div>
@@ -35,8 +35,13 @@ export default {
       },
     },
   },
-  data() {
-    return {};
+  watch: {
+    data: {
+      handler() {
+        this.autoScroll();
+      },
+      deep: true,
+    },
   },
   methods: {
     getCount(val) {

src/components/e-charts/toplist.vue

 <template>
-  <div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
+  <div
+    class="top_list apaas_scroll"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+  >
     <ul>
       <li class="item_list" v-for="(option, index) in options" :key="index">
         <div class="item_index">
           <span v-text="'TOP' + (index + 1)"></span>
         </div>
         <div class="item_logo">
-          <el-avatar shape="square" :size="28" fit="cover" :src="option.cover" />
+          <el-avatar
+            shape="square"
+            :size="28"
+            fit="cover"
+            :src="option.cover"
+          />
         </div>
         <div class="item_detail">
           <p class="item_info">
@@ -20,7 +29,13 @@
             </span>
             <span v-else>{{ option.service_name }}</span>
             <span
-              v-text="isPercent?((option.request_count/targetValue)*100).toFixed(2)+'%':helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')"
+              v-text="
+                isPercent
+                  ? ((option.request_count / targetValue) * 100).toFixed(2) +
+                    '%'
+                  : helper.numberFormat(option.request_count, 2) +
+                    (option.request_count > 10000 ? '万次' : '次')
+              "
             ></span>
           </p>
           <el-progress
@@ -41,31 +56,34 @@ export default {
   props: {
     options: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     targetValue: {
       type: Number,
-      default: () => 0
+      default: () => 0,
     },
-    isShowjt:{
-      type:Boolean,
-      default:true
+    isShowjt: {
+      type: Boolean,
+      default: true,
+    },
+    isPercent: {
+      type: Boolean,
+      default: false,
     },
-    isPercent:{
-      type:Boolean,
-      default:false
-    }
   },
   data() {
     return {
       timer: null,
-      helper
+      helper,
     };
   },
   watch: {
-    text() {
-      this.autoScroll();
-    }
+    options: {
+      handler() {
+        this.autoScroll();
+      },
+      deep: true,
+    },
   },
   methods: {
     getPercent(value) {
@@ -85,10 +103,16 @@ export default {
       this.timer = setInterval(() => {
         let itemHeight = 50;
         let curScrollTop = this.$el.scrollTop + itemHeight;
-        if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) {
+        if (
+          curScrollTop >=
+          this.$el.scrollHeight - this.$el.clientHeight + itemHeight
+        ) {
           curScrollTop = 0;
         }
-        this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight);
+        this.$el.scrollTop = Math.min(
+          curScrollTop,
+          this.$el.scrollHeight - this.$el.clientHeight
+        );
       }, 1500);
     },
     mouseenter() {
@@ -116,11 +140,11 @@ export default {
         default:
           this.$message({
             message: "查看详情失败",
-            type: "warning"
+            type: "warning",
           });
           break;
       }
-    }
+    },
   },
   mounted() {
     this.autoScroll();
@@ -132,7 +156,7 @@ export default {
     if (this.timer) {
       clearInterval(this.timer);
     }
-  }
+  },
 };
 </script>