图形分析接收接口数据修改、资源监控开发、告警管理开发、首页图形拖拽

src/components/echartsList/bar.vue

@@ -136,7 +136,7 @@
           // })
         },
 
-        dataChangeValue(val, days, timeArr) {
+        dataChangeValue(val, timeArr, iconVal) {
           if (timeArr) {
             this.chartData(timeArr);
           }

src/components/echartsList/dateTimeSelect.vue

@@ -1,5 +1,17 @@
 <template>
     <div class="ultabs" :style="{'margin-top': dateShowType && (dateShowType === 'day' ||  dateShowType === 'month') ? '35px' : '10px'}">
+      <div v-if="sideIcon" style="display: inline-block;padding-left: 1px;float: right;">
+        <el-dropdown trigger="click">
+          <span class="el-dropdown-link">
+            <i style="font-size: 1.5rem;margin-top: 5px;" class="el-icon-s-tools"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-for="item of sideIcon && sideIcon.iconName" class="clearfix">
+              <div @click="onChange(item)">{{item.name}}</div>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
       <ul style="display: inline-block;padding-left: 1px;vertical-align: middle;margin:0;float: right;">
         <template v-if="dateShowType === 'day'">
           <li :class="{ 'activesbgs' : isActive == 'DAY' }" @click="toggle('DAY',7)">前7天</li>
@@ -32,6 +44,10 @@
         dateShowType: {
           type: String,
           default: null
+        },
+        sideIcon: {
+          type: Object,
+          default: () => {}
         }
       },
       data() {
@@ -63,7 +79,7 @@
         },
         // 时间选择器
         dateChange() {
-          this.$emit("dataChange", this.isActive, [], this.dateRange);
+          this.$emit("dataChange", this.isActive, this.dateRange);
           // this.getDaysOfPreviousMonth(this.dateRange[0], this.dateRange[1]);
         },
         // 获取当前日期前7天的所有日期（格式：YYYY-MM-DD）
@@ -83,7 +99,7 @@
             dayList.push(`${year}-${month}-${day}`);
           }
           let timeArr = [dayList[0], dayList[dayList.length - 1]];
-          this.$emit("dataChange", this.isActive, [], timeArr);
+          this.$emit("dataChange", this.isActive, timeArr);
           // this.$emit("dataChange", this.isActive, dayList);
         },
         // 获取前一个月的所有日期
@@ -123,7 +139,7 @@
             tempDate.setDate(tempDate.getDate() + 1);
           }
           let timeArr = [dateCollection[0], dateCollection[dateCollection.length - 1]];
-          this.$emit("dataChange", this.isActive, [], timeArr);
+          this.$emit("dataChange", this.isActive, timeArr);
           // this.$emit("dataChange", this.isActive, oneMonthDays);
         },
         // 获取前三个月的月
@@ -147,9 +163,12 @@
             threeMonths.unshift(`${targetYear}-${monthStr}`);
           }
           let timeArr = [threeMonths[0], threeMonths[threeMonths.length - 1]];
-          this.$emit("dataChange", this.isActive, [], timeArr);
+          this.$emit("dataChange", this.isActive, timeArr);
           // this.$emit("dataChange", this.isActive, threeMonths);
         },
+        onChange(val){
+          this.$emit("dataChange", null, null, val);
+        },
       }
     }
 </script>

src/components/echartsList/line.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
+        <DateTimeSelect v-if="!(lineData && lineData.hiddenTime)" :sideIcon="sideIcon" :dateShowType="dateShowType" @dataChange="dataChangeValue"></DateTimeSelect>
         <div :id="`lineChart` + num" style="width:100%;height: 100%;" />
     </div>
 </template>
@@ -28,6 +28,10 @@
           type: Function,
           default: () => {
           }
+        },
+        sideIcon: {
+          type: Object,
+          default: () => {}
         }
       },
       watch: {
@@ -58,7 +62,7 @@
       methods: {
         getList(title, dataXY) {
           const lineDataListIntance = echarts.init(document.getElementById('lineChart' + this.num));
-          let titleList = {text: title, x: '50%', y: '3%', textAlign: 'center'};
+          let titleList = {text: title, x: '50%', y: '3%', textAlign: 'center',textStyle: {fontSize: 16}};
           if (dataXY && dataXY.titleVal) {
             titleList = Object.assign({},titleList, dataXY.titleVal);
           }
@@ -125,11 +129,14 @@
           //   lineDataListIntance.resize()
           // })
         },
-        dataChangeValue(val, days, timeArr) {
+        dataChangeValue(val, timeArr, iconVal) {
           // 调用父级页面传过来的事件，在父级中处理该方法的逻辑--
           if (timeArr) {
             this.chartData(timeArr);
           }
+          if (iconVal) {
+            this.chartData({iconVal: iconVal})
+          }
           // let lineDataList = days && days.length > 0 ? days: this.lineData.lineXData;
           // this.getList(this.title, {data: this.lineData.data, lineXData: lineDataList});
         }