统计分析
This commit is contained in:
geting
parent
97780a4631
commit
78b13f4232
37
ui/dasadmin/src/api/backend/statAnalysis/request.ts
Normal file
37
ui/dasadmin/src/api/backend/statAnalysis/request.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import createAxios from '/@/utils/axios'
|
||||
|
||||
export const queryWindTurbinesPages = () => {
|
||||
return createAxios({
|
||||
url: '/api/page/turbines/queryWindTurbinesPages',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export const historyReq = (data: {
|
||||
devices: {
|
||||
deviceId: string
|
||||
attributes: string
|
||||
}
|
||||
startTime: string
|
||||
endTime: string
|
||||
}) => {
|
||||
return createAxios({
|
||||
url: '/api/data/history',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
|
||||
export const runAirBlowerReq = (
|
||||
data: {
|
||||
deviceId: string
|
||||
serviceName: string
|
||||
opValue: 1 | 0
|
||||
}[]
|
||||
) => {
|
||||
return createAxios({
|
||||
url: '/api/page/turbines/windTurbinesControl',
|
||||
method: 'post',
|
||||
data: data,
|
||||
})
|
||||
}
|
||||
15
ui/dasadmin/src/lang/common/zh-cn/statAnalysis.ts
Normal file
15
ui/dasadmin/src/lang/common/zh-cn/statAnalysis.ts
Normal file
@ -0,0 +1,15 @@
|
||||
export default {
|
||||
PowerCurveAnalysis: '功率曲线分析',
|
||||
trendAnalysis: '趋势分析',
|
||||
trendComparison: '趋势对比',
|
||||
deviceId: '风机',
|
||||
attributes: '测点名称',
|
||||
interval: '间隔',
|
||||
search: '查询',
|
||||
import: '下载',
|
||||
export: '导出',
|
||||
time: '时间',
|
||||
max: '最大值',
|
||||
min: '最小值',
|
||||
average: '平均值',
|
||||
}
|
||||
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="measurement">
|
||||
<el-table :columns="tableColumn" :data="tableData" @sort-change="sortChange" max-height="495">
|
||||
<el-table-column
|
||||
v-for="item in tableColumn"
|
||||
:key="item.prop"
|
||||
:label="item.label"
|
||||
:prop="item.prop"
|
||||
:width="item.width ?? ''"
|
||||
:align="item.align"
|
||||
:sortable="item.sortable"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-radio
|
||||
v-if="item.prop === 'index'"
|
||||
:label="scope.$index"
|
||||
v-model="selectedIndex"
|
||||
@change="handleRadioChange(scope.$index, scope.row)"
|
||||
> </el-radio
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div>
|
||||
<el-pagination
|
||||
v-model:current-page="pageSetting.current"
|
||||
v-model:page-size="pageSetting.pageSize"
|
||||
:total="pageSetting.total"
|
||||
:page-sizes="pageSetting.pageSizes"
|
||||
background
|
||||
:pager-count="7"
|
||||
layout="prev, pager, next, jumper,sizes,total"
|
||||
@change="getcurrentPage"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, ref, watch, defineEmits } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { ModelAttributeFieldsEnums, GetModelAttributeType } from '/@/views/backend/auth/model/type'
|
||||
import { getModelAttributeListReq, getRealValueListReq } from '/@/api/backend/deviceModel/request'
|
||||
|
||||
const props = defineProps({
|
||||
iotModelId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
deviceId: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const selectedIndex = ref(null)
|
||||
const tableColumn = [
|
||||
{
|
||||
type: 'selection',
|
||||
prop: 'index',
|
||||
width: 55,
|
||||
},
|
||||
{
|
||||
label: '序号',
|
||||
prop: 'porder',
|
||||
width: 76,
|
||||
align: 'center',
|
||||
sortable: 'custom',
|
||||
},
|
||||
{
|
||||
label: '属性名称',
|
||||
prop: 'attributeName',
|
||||
align: 'left',
|
||||
sortable: 'custom',
|
||||
},
|
||||
{
|
||||
label: '属性编码',
|
||||
prop: 'attributeCode',
|
||||
align: 'left',
|
||||
width: 200,
|
||||
sortable: 'custom',
|
||||
},
|
||||
{
|
||||
label: '子系统',
|
||||
prop: 'subSystem',
|
||||
align: 'left',
|
||||
width: 110,
|
||||
sortable: false,
|
||||
},
|
||||
]
|
||||
const tableData = ref<any[]>([])
|
||||
const emit = defineEmits(['handleRadioChange'])
|
||||
const handleRadioChange = (index, row) => {
|
||||
emit('handleRadioChange', row)
|
||||
console.log(row)
|
||||
}
|
||||
const getAttributeList = () => {
|
||||
console.log(props)
|
||||
const requestData: GetModelAttributeType = {
|
||||
iotModelId: props.iotModelId,
|
||||
pageNum: pageSetting.current,
|
||||
pageSize: pageSetting.pageSize,
|
||||
attributeType: '138',
|
||||
orderColumn: sortData.orderColumn,
|
||||
orderType: sortData.orderType,
|
||||
}
|
||||
console.log('🚀 ~ getAttributeList ~ requestData:', requestData)
|
||||
console.log(requestData)
|
||||
return new Promise((resolve) => {
|
||||
getModelAttributeListReq(requestData)
|
||||
.then((res) => {
|
||||
if (res.rows && res.rows.length > 0) {
|
||||
const codeList: any = []
|
||||
const data = res.rows!.map((item) => {
|
||||
codeList.push(item.attributeCode)
|
||||
return {
|
||||
...item,
|
||||
attributeTypeName:
|
||||
item.attributeType === 138
|
||||
? '模拟量'
|
||||
: item.attributeType === 139
|
||||
? '累积量'
|
||||
: item.attributeType === 140
|
||||
? '离散量'
|
||||
: item.attributeType!,
|
||||
}
|
||||
})
|
||||
pageSetting.total = res.total
|
||||
resolve({ data, codeList })
|
||||
} else {
|
||||
if (res.rows && res.rows.length === 0) {
|
||||
tableData.value = []
|
||||
} else {
|
||||
ElMessage.error(res.msg)
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error(err?.response?.data?.msg ?? '查询失败')
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getRealValueList = (data: { deviceId: string; attributes: string[] }, list?: any) => {
|
||||
return new Promise((resolve) => {
|
||||
getRealValueListReq([data]).then((res) => {
|
||||
if (res.success && res.data) {
|
||||
resolve({ realVal: res.data, list })
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getCompleteData = () => {
|
||||
getAttributeList()
|
||||
.then(({ data, codeList }: any) => {
|
||||
return getRealValueList({ deviceId: props.deviceId, attributes: codeList }, data)
|
||||
})
|
||||
.then((realData: any) => {
|
||||
console.log(realData)
|
||||
|
||||
const data = realData.list.map((item: any) => {
|
||||
const realValItem = realData.realVal[props.deviceId]?.[item.attributeCode?.toLowerCase()]
|
||||
return {
|
||||
...item,
|
||||
realTimeValue: realValItem ? (realValItem % 1 === 0 ? realValItem : realValItem.toFixed(3)) : '-',
|
||||
}
|
||||
})
|
||||
|
||||
tableData.value = data
|
||||
})
|
||||
}
|
||||
|
||||
const sortData = reactive<{ orderColumn?: keyof typeof ModelAttributeFieldsEnums; orderType?: 'asc' | 'desc' }>({
|
||||
orderColumn: 'porder',
|
||||
orderType: 'asc',
|
||||
})
|
||||
|
||||
const sortChange = ({ prop, order }: { prop: keyof typeof ModelAttributeFieldsEnums; order: 'ascending' | 'descending' | null }) => {
|
||||
const propEnums = {
|
||||
attributeCode: 'attribute_code',
|
||||
attributeName: 'attribute_name',
|
||||
attributeTypeName: 'attribute_type',
|
||||
porder: 'porder',
|
||||
serviceCode: 'service_code',
|
||||
serviceName: 'service_name',
|
||||
serviceTypeName: 'service_type',
|
||||
}
|
||||
const orderType = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : undefined
|
||||
const filed = propEnums[prop as keyof typeof propEnums] as keyof typeof ModelAttributeFieldsEnums
|
||||
sortData.orderColumn = orderType ? filed : undefined
|
||||
sortData.orderType = orderType
|
||||
getCompleteData()
|
||||
}
|
||||
|
||||
const pageSetting = reactive({
|
||||
current: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
pageSizes: [10, 20, 30],
|
||||
})
|
||||
|
||||
const getcurrentPage = () => {
|
||||
getCompleteData()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.show,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
getCompleteData()
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
513
ui/dasadmin/src/views/backend/statAnalysis/index.vue
Normal file
513
ui/dasadmin/src/views/backend/statAnalysis/index.vue
Normal file
@ -0,0 +1,513 @@
|
||||
<template>
|
||||
<div class="statAnalysis">
|
||||
<el-menu :default-active="activeIndex" class="headerList" mode="horizontal" @select="handleSelect">
|
||||
<el-menu-item v-for="(item, index) in headerList" :index="index" :key="index"> {{ item }} </el-menu-item>
|
||||
</el-menu>
|
||||
<div class="contain">
|
||||
<el-header class="headerPart">
|
||||
<div class="topLeft">
|
||||
<div class="selectPart">
|
||||
<span>{{ t('statAnalysis.deviceId') }}</span>
|
||||
<el-select
|
||||
v-model="statAnalysisSelect.deviceId"
|
||||
@change="selectstatAnalysis('deviceId')"
|
||||
:placeholder="'请选择' + t('statAnalysis.deviceId')"
|
||||
class="statAnalysisSelect"
|
||||
>
|
||||
<el-option v-for="v in statAnalysisSelectOptions.deviceId" :key="v.value" :label="v.label" :value="v.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="selectPart">
|
||||
<span>{{ t('statAnalysis.attributes') }}</span>
|
||||
<el-input
|
||||
class="statAnalysisSelect"
|
||||
v-model="statAnalysisSelect.attributes"
|
||||
@click="showMeasure = true"
|
||||
:placeholder="'请选择' + t('statAnalysis.attributes')"
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="selectPart">
|
||||
<span>{{ t('statAnalysis.interval') }}</span>
|
||||
<el-select
|
||||
v-model="statAnalysisSelect.interval"
|
||||
@change="selectstatAnalysis('interval')"
|
||||
:placeholder="'请选择' + t('statAnalysis.interval')"
|
||||
class="statAnalysisSelect"
|
||||
>
|
||||
<el-option v-for="v in statAnalysisSelectOptions.interval" :key="v.value" :label="v.label" :value="v.value"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topRight">
|
||||
<el-button type="primary" @click="statAnalysisOperate()">{{ t('statAnalysis.search') }}</el-button>
|
||||
<el-button style="color: #0064aa" @click="statAnalysiImport()">{{ t('statAnalysis.import') }}</el-button>
|
||||
<el-button style="color: #0064aa" @click="statAnalysisExport()">{{ t('statAnalysis.export') }}</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<div class="timeColumns" :class="{ expand: isExpand }">
|
||||
<div class="headerPart" v-for="(time, index) in times" :key="index">
|
||||
<div class="topLeft">
|
||||
<div class="selectPart">
|
||||
<span>{{ customName }}</span>
|
||||
<span>{{ t('statAnalysis.time') }}</span>
|
||||
<el-date-picker
|
||||
class="datetime-picker"
|
||||
v-model="times[index]"
|
||||
:type="statAnalysisSelect.interval == '1d' ? 'daterange' : 'datetimerange'"
|
||||
:value-format="statAnalysisSelect.interval == '1d' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
|
||||
:teleported="false"
|
||||
:shortcuts="shortcuts"
|
||||
@change="timechange(index)"
|
||||
/>
|
||||
</div>
|
||||
<div class="topLeft">
|
||||
<div class="selectPart" v-if="index === times.length - 1">
|
||||
<el-button type="primary" size="small" :icon="Plus" circle @click="addTime(index)"> </el-button>
|
||||
</div>
|
||||
<div class="selectPart" v-if="index !== 0">
|
||||
<el-button type="danger" size="small" :icon="Delete" @click="switchTime(index)" circle />
|
||||
</div>
|
||||
<div class="selectPart">
|
||||
<span>{{ t('statAnalysis.max') }}</span>
|
||||
<span class="max">11</span>
|
||||
</div>
|
||||
<div class="selectPart">
|
||||
<span>{{ t('statAnalysis.min') }}</span>
|
||||
<span class="min">22</span>
|
||||
</div>
|
||||
<div class="selectPart">
|
||||
<span>{{ t('statAnalysis.average') }}</span>
|
||||
<span class="average">33</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="times.length > 2" class="ralIcon" @click="handleClick">
|
||||
<el-icon :size="20" color="#0064AA"><DArrowRight /></el-icon>
|
||||
</div>
|
||||
<div ref="chartContainer" style="width: 100%; height: 400px"></div>
|
||||
<el-dialog v-model="showMeasure" title="测点名称" :width="800">
|
||||
<template #header>
|
||||
<div class="measureSlotHeader">
|
||||
<span style="font-size: 20px">测点名称</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="measureSlot">
|
||||
<MeasurementPage :show="showMeasure" :iotModelId="iotModelId" @handleRadioChange="handleRadioChange"></MeasurementPage>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="showMeasure = false">取消</el-button>
|
||||
<el-button type="primary" @click="selectstatAnalysisAttributes"> 确认 </el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { SelectTypeObjType, SelectTypeKeyUnionType, TableDataObjType, TableColumnType } from './type'
|
||||
import { onUnmounted, reactive, ref, watch, nextTick, onMounted, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { queryWindTurbinesPages, historyReq } from '/@/api/backend/statAnalysis/request'
|
||||
import { ElMessage, TableInstance, ElMenu } from 'element-plus'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useConfig } from '/@/stores/config'
|
||||
import { DArrowRight, Plus, Delete } from '@element-plus/icons-vue'
|
||||
import MeasurementPage from './analysisAttributes.vue'
|
||||
import * as echarts from 'echarts'
|
||||
const config = useConfig()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const activeIndex = ref(0)
|
||||
const { t } = useI18n()
|
||||
const headerList = [t('statAnalysis.PowerCurveAnalysis'), t('statAnalysis.trendAnalysis'), t('statAnalysis.trendComparison')]
|
||||
const statAnalysisSelect = reactive({
|
||||
deviceId: '',
|
||||
attributes: '',
|
||||
attributeCode: '',
|
||||
interval: '',
|
||||
time: '',
|
||||
})
|
||||
const times = reactive([{ time: '' }])
|
||||
const addTime = (index) => {
|
||||
console.log(index)
|
||||
console.log(times)
|
||||
times.push({ time: '' })
|
||||
}
|
||||
const switchTime = (index) => {
|
||||
times.splice(index, 1)
|
||||
}
|
||||
const timechange = (value) => {
|
||||
const count = getTimeIntervals(times[0][0], times[0][1])
|
||||
const count1 = getTimeIntervals(times[value][0], times[value][1])
|
||||
if (count !== count1) {
|
||||
times[value] = { time: '' }
|
||||
value = ElMessage.warning('查询时间点错误，请重新舒服')
|
||||
}
|
||||
console.log('🚀 ~ timechange ~ count:', count)
|
||||
}
|
||||
const isExpand = ref(false)
|
||||
const handleClick = () => {
|
||||
isExpand.value = !isExpand.value
|
||||
console.log(isExpand)
|
||||
}
|
||||
|
||||
const iotModelId = ref('')
|
||||
watch(
|
||||
() => statAnalysisSelect.deviceId,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
const row = statAnalysisSelectOptions.deviceId.filter((item) => {
|
||||
console.log(item.value == newVal)
|
||||
return item.value == newVal
|
||||
})
|
||||
console.log()
|
||||
iotModelId.value = row[0].iotModelId
|
||||
console.log('🚀 ~ iotModelId:', iotModelId)
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
)
|
||||
|
||||
const showMeasure = ref(false)
|
||||
const selectedAttrRow = ref({
|
||||
attributeCode: '',
|
||||
attributeName: '',
|
||||
})
|
||||
const handleRadioChange = (value) => {
|
||||
const { attributeCode, attributeName } = { ...value }
|
||||
selectedAttrRow.attributeCode = attributeCode
|
||||
selectedAttrRow.attributeName = attributeName
|
||||
}
|
||||
const selectstatAnalysisAttributes = () => {
|
||||
statAnalysisSelect.attributes = selectedAttrRow.attributeName
|
||||
console.log('🚀 ~ selectstatAnalysisAttributes ~ selectedAttrRow:', selectedAttrRow)
|
||||
statAnalysisSelect.attributeCode = selectedAttrRow.attributeCode
|
||||
showMeasure.value = false
|
||||
}
|
||||
|
||||
const chartContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
const option = {
|
||||
// dataZoom: [
|
||||
// {
|
||||
// type: 'inside',
|
||||
// start: 0,
|
||||
// end: 100,
|
||||
// },
|
||||
// {
|
||||
// start: 0,
|
||||
// },
|
||||
// ],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'cross',
|
||||
// label: {
|
||||
// backgroundColor: '#6a7985',
|
||||
// },
|
||||
// },
|
||||
},
|
||||
legend: {
|
||||
right: 10,
|
||||
top: 0,
|
||||
icon: 'rect',
|
||||
itemGap: 20,
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
data: [],
|
||||
selected: {},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [],
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
},
|
||||
}
|
||||
|
||||
const statAnalysisSelectOptions = reactive({
|
||||
interval: [
|
||||
{ label: '五分钟', value: '5m' },
|
||||
{ label: '十五分钟', value: '15m' },
|
||||
{ label: '一小时', value: '1h' },
|
||||
{ label: '一天', value: '1d' },
|
||||
{ label: '原始', value: 'NONE' },
|
||||
],
|
||||
deviceId: [],
|
||||
})
|
||||
const customName = ref('第一条数据')
|
||||
const chart = ref(null)
|
||||
onMounted(() => {
|
||||
if (chartContainer.value) {
|
||||
chart.value = echarts.init(chartContainer.value)
|
||||
chart.value.setOption(option)
|
||||
}
|
||||
queryWindTurbines()
|
||||
})
|
||||
const queryWindTurbines = () => {
|
||||
queryWindTurbinesPages().then((res) => {
|
||||
if (res.code == 200) {
|
||||
statAnalysisSelectOptions.deviceId = res.data.map((item) => {
|
||||
return {
|
||||
value: item.irn,
|
||||
label: item.name ?? '-',
|
||||
iotModelId: item.modelId,
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
window.onresize = () => {
|
||||
chart.resize()
|
||||
}
|
||||
|
||||
const handleSelect = () => {}
|
||||
const selectstatAnalysis = () => {}
|
||||
|
||||
const shortcuts = [
|
||||
{
|
||||
text: '昨日',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '前三天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '前七天',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
{
|
||||
text: '上个月',
|
||||
value: () => {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
return [start, end]
|
||||
},
|
||||
},
|
||||
]
|
||||
const getTimeIntervals = (startTimestamp, endTimestamp) => {
|
||||
const startDate = new Date(startTimestamp)
|
||||
const endDate = new Date(endTimestamp)
|
||||
let count = 0
|
||||
|
||||
switch (statAnalysisSelect.interval) {
|
||||
case 'NONE':
|
||||
count = Math.floor((endDate - startDate) / 1000)
|
||||
break
|
||||
case '5m':
|
||||
count = Math.floor((endDate - startDate) / (5 * 60 * 1000))
|
||||
break
|
||||
case '15m':
|
||||
count = Math.floor((endDate - startDate) / (15 * 60 * 1000))
|
||||
break
|
||||
case '1h':
|
||||
count = Math.floor((endDate - startDate) / (1 * 60 * 60 * 1000))
|
||||
break
|
||||
case '1d':
|
||||
count = Math.floor((endDate - startDate) / (1 * 24 * 60 * 60 * 1000))
|
||||
break
|
||||
// default:
|
||||
// throw new Error('Invalid interval')
|
||||
}
|
||||
|
||||
return count
|
||||
}
|
||||
const statAnalysisOperate = () => {
|
||||
console.log(statAnalysisSelect)
|
||||
console.log(times)
|
||||
times.forEach((time) => {
|
||||
if (time[0] && time[1]) {
|
||||
const requestData = {
|
||||
devices: [
|
||||
{
|
||||
deviceId: statAnalysisSelect.deviceId,
|
||||
attributes: [statAnalysisSelect.attributeCode],
|
||||
},
|
||||
],
|
||||
interval: statAnalysisSelect.interval,
|
||||
startTime: new Date(time[0]).getTime(),
|
||||
endTime: new Date(time[1]).getTime(),
|
||||
}
|
||||
historyDataReq(requestData)
|
||||
console.log(requestData)
|
||||
}
|
||||
})
|
||||
}
|
||||
const historyDataReq = (data) => {
|
||||
// historyReq(data).then((res) => {
|
||||
// console.log(res)
|
||||
const res = {
|
||||
//设备ID
|
||||
'129476828342323': {
|
||||
//属性名
|
||||
power: {
|
||||
//时间戳列表
|
||||
times: [123452435924242, 123452435924342, 123452435924442, 123452435924542],
|
||||
//值列表
|
||||
values: [123.23, 35.21, 34.56, 67],
|
||||
},
|
||||
},
|
||||
}
|
||||
const deviceId = statAnalysisSelect.deviceId
|
||||
const attributeCode = statAnalysisSelect.attributeCode
|
||||
const resData = res['129476828342323']['power']
|
||||
|
||||
const xData = resData['times']
|
||||
const yData = resData['values']
|
||||
option.tooltip = {
|
||||
trigger: 'axis',
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
console.log('🚀 ~ //historyReq ~ params:', params)
|
||||
return params
|
||||
.map((item) => {
|
||||
return `${item.seriesName} (${xData[item.dataIndex]}): ${item.data}`
|
||||
})
|
||||
.join('<br/>')
|
||||
},
|
||||
}
|
||||
option.xAxis.data = Array.from({ length: xData.length }, (_, index) => index)
|
||||
|
||||
option.series = [
|
||||
{
|
||||
name: '',
|
||||
type: 'line',
|
||||
data: yData,
|
||||
},
|
||||
]
|
||||
console.log('🚀 ~ //historyReq ~ option:', option)
|
||||
chart.value.setOption(option)
|
||||
// })
|
||||
}
|
||||
|
||||
const statAnalysisExport = () => {}
|
||||
const statAnalysiImport = () => {}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.statAnalysis {
|
||||
height: 100%;
|
||||
.headerList {
|
||||
border: none;
|
||||
--el-menu-bg-color: v-bind('config.getColorVal("menuBackground")');
|
||||
--el-menu-text-color: v-bind('config.getColorVal("menuColor")');
|
||||
--el-menu-active-color: v-bind('config.getColorVal("menuActiveColor")');
|
||||
}
|
||||
.headerPart {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.topLeft {
|
||||
display: flex;
|
||||
.selectPart {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-right: 20px;
|
||||
span {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.statAnalysisSelect {
|
||||
width: 200px;
|
||||
:deep(.el-select__wrapper) {
|
||||
height: 40px;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
height: 38px;
|
||||
}
|
||||
}
|
||||
.max,
|
||||
.min,
|
||||
.average {
|
||||
border-radius: 6px;
|
||||
height: 40px;
|
||||
width: 72px;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
}
|
||||
.max {
|
||||
background: rgba(254, 55, 49, 0.2);
|
||||
border: 1px solid #fe3731;
|
||||
color: #fe3731;
|
||||
}
|
||||
.min {
|
||||
background: rgba(0, 160, 150, 0.2);
|
||||
border: 1px solid #00a096;
|
||||
color: #00a096;
|
||||
}
|
||||
.average {
|
||||
background: rgba(0, 100, 170, 0.2);
|
||||
border: 1px solid #0064aa;
|
||||
color: #0064aa;
|
||||
}
|
||||
}
|
||||
.dialog-footer button:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.topRight {
|
||||
// width: 436px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.el-button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeColumns {
|
||||
max-height: 120px;
|
||||
overflow: hidden;
|
||||
.headerPart {
|
||||
padding: 10px;
|
||||
}
|
||||
&.expand {
|
||||
max-height: max-content;
|
||||
height: auto;
|
||||
overflow: inherit;
|
||||
}
|
||||
}
|
||||
.timeColumns.expand + div.ralIcon {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.ralIcon {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
#myEChart {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user