feat: 优化指标聚合的接口传参

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

@@ -1,78 +1,89 @@
 <template>
-  <div class="page">
-    <el-card shadow="nover">
-      <el-form inline>
-        <el-form-item label="选择产品：" prop="productKey">
-          <el-select v-model="params.productKey" filterable placeholder="请选择产品" @change="productChange">
-            <el-option v-for="item in productList" :key="item.key" :label="item.name" :value="item.key">
-              <span style="float: left">{{ item.name }}</span>
-              <span style="float: right; font-size: 13px">{{ item.key }}</span>
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="选择设备：" prop="deviceKey">
-          <el-select v-model="params.deviceKey" filterable placeholder="请选择设备">
-            <el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
-              <span style="float: left">{{ item.name }}</span>
-              <span style="float: right; font-size: 13px;margin-left: 12px;">{{ item.key }}</span>
-            </el-option>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item label="选择属性：" prop="properties">
-          <el-select v-model="params.properties" filterable placeholder="请选择属性" @change="propertyChange">
-            <el-option v-for="item in propertyList" :key="item.key" :label="item.name" :value="item.key">
-              <span style="float: left">{{ item.name }}</span>
-              <span style="float: right; font-size: 13px;margin-left: 12px;">{{ item.key }}</span>
-            </el-option>
-          </el-select>
-        </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" date-format="YYYY-MM-DD" time-format="HH:mm" format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期"
-            end-placeholder="结束日期" :clearable="false"></el-date-picker>
-        </el-form-item>
-        <el-form-item label="聚合粒度：" prop="dateType">
-          <el-radio-group v-model="params.dateType" @change="dateTypeChange">
-            <el-radio-button label="1">5分钟</el-radio-button>
-            <el-radio-button label="2">1小时</el-radio-button>
-            <el-radio-button label="3">1天</el-radio-button>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" class="ml10" @click="getData">
-            <el-icon>
-              <ele-Search />
-            </el-icon>
-            查询
-          </el-button>
-          <el-button type="primary" @click="handlePrintChart">
-            <el-icon>
-              <ele-Printer />
-            </el-icon>
-            打印图表
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <div class="title">
-        <el-icon style="margin-right: 5px;">
-          <ele-Histogram />
-        </el-icon>
-        指标聚合统计图
-      </div>
-      <Chart class="flex1" height="12vw" ref="chart" :autoLoading="false" style="margin-top: 20px;" v-loading="loading"></Chart>
-    </el-card>
-  </div>
+	<div class="page">
+		<el-card shadow="nover">
+			<el-form inline>
+				<el-form-item label="选择产品：" prop="productKey">
+					<el-select v-model="params.productKey" filterable placeholder="请选择产品" @change="productChange">
+						<el-option v-for="item in productList" :key="item.key" :label="item.name" :value="item.key">
+							<span style="float: left">{{ item.name }}</span>
+							<span style="float: right; font-size: 13px">{{ item.key }}</span>
+						</el-option>
+					</el-select>
+				</el-form-item>
+
+				<el-form-item label="选择设备：" prop="deviceKey">
+					<el-select v-model="params.deviceKey" filterable placeholder="请选择设备">
+						<el-option v-for="item in deviceList" :key="item.key" :label="item.name" :value="item.key">
+							<span style="float: left">{{ item.name }}</span>
+							<span style="float: right; font-size: 13px; margin-left: 12px">{{ item.key }}</span>
+						</el-option>
+					</el-select>
+				</el-form-item>
+
+				<el-form-item label="选择属性：" prop="properties">
+					<el-select v-model="params.properties" filterable placeholder="请选择属性" @change="propertyChange">
+						<el-option v-for="item in propertyList" :key="item.key" :label="item.name" :value="item.key">
+							<span style="float: left">{{ item.name }}</span>
+							<span style="float: right; font-size: 13px; margin-left: 12px">{{ item.key }}</span>
+						</el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item label="选择时间：" prop="dateRange">
+					<el-date-picker
+						v-model="dateRange"
+						style="width: 360px"
+						value-format="YYYY-MM-DD HH:mm:ss"
+						date-format="YYYY-MM-DD"
+						time-format="HH:mm"
+						format="YYYY-MM-DD HH:mm:ss"
+						type="datetimerange"
+						range-separator="-"
+						start-placeholder="开始日期"
+						end-placeholder="结束日期"
+						:clearable="false"
+					></el-date-picker>
+				</el-form-item>
+				<el-form-item label="聚合粒度：" prop="dateType">
+					<el-radio-group v-model="params.dateType" @change="dateTypeChange">
+						<el-radio-button label="1">5分钟</el-radio-button>
+						<el-radio-button label="2">1小时</el-radio-button>
+						<el-radio-button label="3">1天</el-radio-button>
+					</el-radio-group>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" class="ml10" @click="getData">
+						<el-icon>
+							<ele-Search />
+						</el-icon>
+						查询
+					</el-button>
+					<el-button type="primary" @click="handlePrintChart">
+						<el-icon>
+							<ele-Printer />
+						</el-icon>
+						打印图表
+					</el-button>
+				</el-form-item>
+			</el-form>
+			<div class="title">
+				<el-icon style="margin-right: 5px">
+					<ele-Histogram />
+				</el-icon>
+				指标聚合统计图
+			</div>
+			<Chart class="flex1" height="12vw" ref="chart" :autoLoading="false" style="margin-top: 20px" v-loading="loading"></Chart>
+		</el-card>
+	</div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
-import { ElMessage } from 'element-plus';
-import api from '/@/api/device';
-import dayjs from 'dayjs';
+import { ref, reactive, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import api from '/@/api/device'
+import dayjs from 'dayjs'
 import Chart from '/@/components/chart/index.vue'
 import { getLineOption } from '/@/components/chart/options'
-import { printChart } from '/@/utils/print';
+import { printChart } from '/@/utils/print'
 
 const productList = ref<any[]>([])
 const deviceList = ref<any[]>([])
@@ -82,94 +93,103 @@ const loading = ref(false)
 const propertyName = ref('')
 
 // 聚合力度可选值为"5分钟"、"1小时"和"1天"，对应的最大时间范围为"一周"、"一个月"和"一年"。
+const dateRange = ref([dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')])
 
 const params = reactive({
-  productKey: '',
-  deviceKey: '',
-  properties: '',
-  dateType: '1',
-  dateRange: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
+	productKey: '',
+	deviceKey: '',
+	properties: '',
+	dateType: '1',
+	startDate: dateRange.value[0],
+	endDate: dateRange.value[1],
+})
+
+watch(dateRange, () => {
+	params.startDate = dateRange.value[0]
+	params.endDate = dateRange.value[1]
 })
 
 function dateTypeChange(dateType: string) {
-  switch (dateType) {
-    case '1':
-      params.dateRange = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
-      break;
-    case '2':
-      params.dateRange = [dayjs().subtract(7, 'days').format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
-      break;
-    case '3':
-      params.dateRange = [dayjs().subtract(30, 'days').format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
-      break;
-
-    default:
-      break;
-  }
-
-  getData()
+	switch (dateType) {
+		case '1':
+			dateRange.value = [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
+			break
+		case '2':
+			dateRange.value = [dayjs().subtract(7, 'days').format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
+			break
+		case '3':
+			dateRange.value = [dayjs().subtract(30, 'days').format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
+			break
+		default:
+			break
+	}
+
+	getData()
 }
 
 api.product.getLists({ status: 1 }).then((res: any) => {
-  productList.value = res.product || [];
-});
+	productList.value = res.product || []
+})
 
 function getData() {
-  const diffDay = dayjs(params.dateRange[1], 'YYYY-MM-DD HH:mm:ss').diff(dayjs(params.dateRange[0], 'YYYY-MM-DD HH:mm:ss'), 'days')
-  if (params.dateType === '1' && diffDay > 7) return ElMessage('时间范围不能超过7天')
-  if (params.dateType === '2' && diffDay > 31) return ElMessage('时间范围不能超过1个月')
-  if (params.dateType === '3' && diffDay > 366) return ElMessage('时间范围不能超过一年')
-
-  if (!params.productKey) return ElMessage('请选选择产品')
-  if (!params.deviceKey) return ElMessage('请选选择设备')
-  if (!params.properties) return ElMessage('请选选择属性')
-
-  loading.value = true
-  api.analysis.deviceIndicatorPolymerize(params).then((data: any[]) => {
-    const res = data || []
-    chart.value.draw(
-      getLineOption({
-        datas: [res.map(item => item.dataAverageValue), res.map(item => item.dataMaxValue), res.map(item => item.dataMinValue)],
-        xAxis: res.map(item => item.date),
-        legend: [propertyName.value + '平均值', propertyName.value + '最大值', propertyName.value + '最小值']
-      })
-    )
-  }).finally(() => loading.value = false)
+	const diffDay = dayjs(dateRange.value[1], 'YYYY-MM-DD HH:mm:ss').diff(dayjs(dateRange.value[0], 'YYYY-MM-DD HH:mm:ss'), 'days')
+	if (params.dateType === '1' && diffDay > 7) return ElMessage('时间范围不能超过7天')
+	if (params.dateType === '2' && diffDay > 31) return ElMessage('时间范围不能超过1个月')
+	if (params.dateType === '3' && diffDay > 366) return ElMessage('时间范围不能超过一年')
+
+	if (!params.productKey) return ElMessage('请选选择产品')
+	if (!params.deviceKey) return ElMessage('请选选择设备')
+	if (!params.properties) return ElMessage('请选选择属性')
+
+	loading.value = true
+	api.analysis
+		.deviceIndicatorPolymerize(params)
+		.then((data: any[]) => {
+			const res = data || []
+			chart.value.draw(
+				getLineOption({
+					datas: [res.map((item) => item.dataAverageValue), res.map((item) => item.dataMaxValue), res.map((item) => item.dataMinValue)],
+					xAxis: res.map((item) => item.date),
+					legend: [propertyName.value + '平均值', propertyName.value + '最大值', propertyName.value + '最小值'],
+				})
+			)
+		})
+		.finally(() => (loading.value = false))
 }
 
 function productChange(productKey: string) {
-  params.deviceKey = ''
-  params.properties = ''
-  deviceList.value = []
-  propertyList.value = []
-  api.device.allList({ productKey }).then((res: any) => {
-    deviceList.value = res.device;
-  });
-  api.product.getpropertyList({ productKey }).then((res: any) => {
-    propertyList.value = res;
-  });
+	params.deviceKey = ''
+	params.properties = ''
+	deviceList.value = []
+	propertyList.value = []
+	api.device.allList({ productKey }).then((res: any) => {
+		deviceList.value = res.device
+	})
+	api.product.getpropertyList({ productKey }).then((res: any) => {
+		propertyList.value = res
+	})
 }
 
 function propertyChange(property: string) {
-  propertyName.value = propertyList.value.find(item => item.key === property)?.name
+	propertyName.value = propertyList.value.find((item) => item.key === property)?.name
 }
 
 // 打印图表
 const handlePrintChart = async () => {
-  if (!chart.value) {
-    ElMessage.warning('图表未加载');
-    return;
-  }
-  await printChart(chart.value.$el);
-};
+	if (!chart.value) {
+		ElMessage.warning('图表未加载')
+		return
+	}
+	await printChart(chart.value.$el)
+}
 </script>
 <style scoped>
 .title {
-  font-size: 14px;
-  font-weight: bold;
-  border-bottom: 1px solid #eee;
-  display: flex;
-  align-items: center;
-  padding-bottom: 6px;
+	font-size: 14px;
+	font-weight: bold;
+	border-bottom: 1px solid #eee;
+	display: flex;
+	align-items: center;
+	padding-bottom: 6px;
 }
-</style>
+</style>