fea: 指标趋势增加时间选择快捷按钮

src/views/iot/dataAnalysis/exponentialTrend/index.vue

@@ -30,10 +30,16 @@
         </el-form-item>
         <el-form-item label="选择时间：" prop="dateRange">
           <el-date-picker v-model="params.dateRange" style="width: 360px" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
-            :clearable="false"></el-date-picker>
+            :clearable="false">
+          </el-date-picker>
+          <el-button-group class="ml10">
+            <el-button @click="changeDate(1)" :type="activeIndex == 1 ?  'primary' : ''">最近一小时</el-button>
+            <el-button @click="changeDate(2)" :type="activeIndex == 2 ?  'primary' : ''">最近24小时</el-button>
+            <el-button @click="changeDate(3)" :type="activeIndex == 3 ?  'primary' : ''">最近一周</el-button>
+          </el-button-group>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" class="ml10" @click="getData">
+          <el-button type="primary" @click="getData">
             <el-icon>
               <ele-Search />
             </el-icon>
@@ -66,18 +72,44 @@ const propertyList = ref<any[]>([])
 const chart = ref()
 const loading = ref(false)
 const propertyName = ref('')
-
+const activeIndex = ref(1);
 const params = reactive({
   productKey: '',
   deviceKey: '',
   properties: '',
-  dateRange: [dayjs().format('YYYY-MM-DD HH:00:00'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  dateRange: [dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')],
 })
 
 api.product.getLists({ status: 1 }).then((res: any) => {
   productList.value = res.product || [];
 });
 
+// 仪表盘折线按钮
+const changeDate = (key:number) => {
+  if (!params.productKey) return ElMessage('请选选择产品')
+  if (!params.deviceKey) return ElMessage('请选选择设备')
+  if (!params.properties) return ElMessage('请选选择属性')
+  // 1 近1小时 2近24小时 3近一周
+  activeIndex.value = key;
+  if(key === 1) {
+    // 近1小时
+    params.dateRange = [dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH:mm:ss'), dayjs().format('YYYY-MM-DD HH:mm:ss')]
+  }else if(key === 2) {
+    // 近24小时
+     params.dateRange = [
+      dayjs().subtract(24, 'hour').format('YYYY-MM-DD HH:mm:ss'),
+      dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    ]
+  }else if(key === 3) {
+    // 近一周
+    params.dateRange = [
+      dayjs().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss'),
+      dayjs().format('YYYY-MM-DD HH:mm:ss'),
+    ]
+  }
+  getData();
+}
+
 function getData() {
   if (!params.productKey) return ElMessage('请选选择产品')
   if (!params.deviceKey) return ElMessage('请选选择设备')
@@ -90,7 +122,13 @@ function getData() {
       getLineOption({
         datas: [res.map(item => item.dataValue)],
         xAxis: res.map(item => item.date),
-        legend: [propertyName.value]
+        legend: [propertyName.value],
+        dataZoom: [{ // 这部分是dataZoom的配置
+            type: 'slider', // 这里可以选择你需要的dataZoom类型
+            start: 0, // 数据窗口范围的起始百分比
+            end: 100,// 数据窗口范围的结束百分比
+            xAxisIndex: [0, 2],
+        }]
       })
     )
   }).finally(() => loading.value = false)