|
|
@@ -2,8 +2,42 @@
|
|
|
<div class="page">
|
|
|
<el-card shadow="nover">
|
|
|
<el-form inline>
|
|
|
- <el-form-item label="分类名称">
|
|
|
- <el-input v-model="params.name" placeholder="请输入分类名称" @keyup.enter="getData" class="w-50" clearable />
|
|
|
+ <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">{{ 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">{{ 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">
|
|
|
@@ -14,21 +48,113 @@
|
|
|
</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, toRefs, reactive, onMounted, defineComponent } from 'vue';
|
|
|
-import { ElMessageBox, ElMessage } from 'element-plus';
|
|
|
+import { ref, reactive } 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'
|
|
|
+
|
|
|
+const productList = ref<any[]>([])
|
|
|
+const deviceList = ref<any[]>([])
|
|
|
+const propertyList = ref<any[]>([])
|
|
|
+const chart = ref()
|
|
|
+const loading = ref(false)
|
|
|
+const propertyName = ref('')
|
|
|
+
|
|
|
+// 聚合力度可选值为"5分钟"、"1小时"和"1天"，对应的最大时间范围为"一周"、"一个月"和"一年"。
|
|
|
|
|
|
const params = reactive({
|
|
|
- name: ''
|
|
|
+ productKey: '',
|
|
|
+ deviceKey: '',
|
|
|
+ properties: '',
|
|
|
+ dateType: '1',
|
|
|
+ dateRange: [dayjs().format('YYYY-MM-DD 00:00:00'), dayjs().format('YYYY-MM-DD HH:mm:00')]
|
|
|
})
|
|
|
|
|
|
+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;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+api.product.getLists({ status: 1 }).then((res: any) => {
|
|
|
+ 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.deviceIndicatorTrend(params).then((res: any[]) => {
|
|
|
+ console.log(res)
|
|
|
+ console.log(propertyName.value)
|
|
|
+ chart.value.draw(
|
|
|
+ getLineOption({
|
|
|
+ datas: [res.map(item => item.dataValue)],
|
|
|
+ xAxis: res.map(item => item.date),
|
|
|
+ legend: [propertyName.value + '平均值', propertyName.value + '最大值', propertyName.value + '最小值']
|
|
|
+ })
|
|
|
+ )
|
|
|
+ }).finally(() => loading.value = false)
|
|
|
}
|
|
|
|
|
|
-</script>
|
|
|
+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;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function propertyChange(property: string) {
|
|
|
+ propertyName.value = propertyList.value.find(item => item.key === property)?.name
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-bottom: 6px;
|
|
|
+}
|
|
|
+</style>
|
