统计分析

ui/dasadmin/src/views/backend/statAnalysis/index.vue

@@ -48,7 +48,7 @@
                 <div class="headerPart" v-for="(time, index) in times" :key="index">
                     <div class="topLeft">
                         <div class="selectPart">
-                            <span>{{ customName }}</span>
+                            <span>{{ index + 1 }}</span>
                             <span>{{ t('statAnalysis.time') }}</span>
                             <el-date-picker
                                 class="datetime-picker"
@@ -67,17 +67,17 @@
                             <div class="selectPart" v-if="index !== 0">
                                 <el-button type="danger" size="small" :icon="Delete" @click="switchTime(index)" circle />
                             </div>
-                            <div class="selectPart">
+                            <div class="selectPart" v-if="calculate[index] && calculate[index]['max']">
                                 <span>{{ t('statAnalysis.max') }}</span>
-                                <span class="max">11</span>
+                                <span class="max">{{ calculate[index]['max'] }}</span>
                             </div>
-                            <div class="selectPart">
+                            <div class="selectPart" v-if="calculate[index] && calculate[index]['min']">
                                 <span>{{ t('statAnalysis.min') }}</span>
-                                <span class="min">22</span>
+                                <span class="min">{{ calculate[index]['min'] }}</span>
                             </div>
-                            <div class="selectPart">
+                            <div class="selectPart" v-if="calculate[index] && calculate[index]['average']">
                                 <span>{{ t('statAnalysis.average') }}</span>
-                                <span class="average">33</span>
+                                <span class="average">{{ calculate[index]['average'] }}</span>
                             </div>
                         </div>
                     </div>
@@ -132,26 +132,25 @@ const statAnalysisSelect = reactive({
 })
 const times = reactive([{ time: '' }])
 const addTime = (index) => {
-    console.log(index)
-    console.log(times)
     times.push({ time: '' })
+    customName.value.push(index + 2)
 }
 const switchTime = (index) => {
     times.splice(index, 1)
+    customName.value.splice(index, 1)
+    calculate.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('查询时间点错误，请重新舒服')
+        value = ElMessage.warning('查询时间点错误，请重新输入')
     }
-    console.log('🚀 ~ timechange ~ count:', count)
 }
 const isExpand = ref(false)
 const handleClick = () => {
     isExpand.value = !isExpand.value
-    console.log(isExpand)
 }
 
 const iotModelId = ref('')
@@ -160,12 +159,9 @@ watch(
     (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)
         }
     },
     {
@@ -185,42 +181,30 @@ const handleRadioChange = (value) => {
 }
 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 = {
+const option = reactive({
-    // dataZoom: [
+    dataZoom: [
-    //     {
+        {
-    //         type: 'inside',
+            type: 'inside',
-    //         start: 0,
+            start: 0,
-    //         end: 100,
+            end: 100,
-    //     },
+        },
-    //     {
+        {
-    //         start: 0,
+            start: 0,
-    //     },
+        },
-    // ],
+    ],
-    tooltip: {
+    tooltip: {},
-        trigger: 'axis',
-        //     axisPointer: {
-        //         type: 'cross',
-        //         label: {
-        //             backgroundColor: '#6a7985',
-        //         },
-        //     },
-    },
     legend: {
-        right: 10,
+        icon: 'circle',
-        top: 0,
-        icon: 'rect',
         itemGap: 20,
         itemWidth: 8,
         itemHeight: 8,
         data: [],
-        selected: {},
     },
     xAxis: {
         type: 'category',
@@ -234,7 +218,7 @@ const option = {
         left: '3%',
         right: '3%',
     },
-}
+})
 
 const statAnalysisSelectOptions = reactive({
     interval: [
@@ -246,7 +230,7 @@ const statAnalysisSelectOptions = reactive({
     ],
     deviceId: [],
 })
-const customName = ref('第一条数据')
+const customName = ref(['1'])
 const chart = ref(null)
 onMounted(() => {
     if (chartContainer.value) {
@@ -270,7 +254,7 @@ const queryWindTurbines = () => {
 }
 
 window.onresize = () => {
-    chart.resize()
+    // chart.resize()
 }
 
 const handleSelect = () => {}
@@ -333,7 +317,7 @@ const getTimeIntervals = (startTimestamp, endTimestamp) => {
             count = Math.floor((endDate - startDate) / (1 * 60 * 60 * 1000))
             break
         case '1d':
-            count = Math.floor((endDate - startDate) / (1 * 24 * 60 * 60 * 1000))
+            count = c((endDate - startDate) / (1 * 24 * 60 * 60 * 1000))
             break
         // default:
         // throw new Error('Invalid interval')
@@ -342,9 +326,11 @@ const getTimeIntervals = (startTimestamp, endTimestamp) => {
     return count
 }
 const statAnalysisOperate = () => {
-    console.log(statAnalysisSelect)
+    option.tooltip = {}
-    console.log(times)
+    option.xAxis.data = []
-    times.forEach((time) => {
+    option.legend.data = []
+    option.series = []
+    times.forEach((time, index) => {
         if (time[0] && time[1]) {
             const requestData = {
                 devices: [
@@ -357,60 +343,63 @@ const statAnalysisOperate = () => {
                 startTime: new Date(time[0]).getTime(),
                 endTime: new Date(time[1]).getTime(),
             }
-            historyDataReq(requestData)
+            historyDataReq(requestData, index)
-            console.log(requestData)
         }
     })
 }
-const historyDataReq = (data) => {
+const calculate = reactive([{ max: '', min: '', average: '' }])
-    // historyReq(data).then((res) => {
+const historyDataReq = (data, index) => {
-    // console.log(res)
+    historyReq(data).then((res) => {
-    const res = {
+        if (res.code == 200) {
-        //设备ID
+            const deviceId = statAnalysisSelect.deviceId
-        '129476828342323': {
+            const attributeCode = statAnalysisSelect.attributeCode
-            //属性名
+            const resData = res.data[deviceId][attributeCode]
-            power: {
+            if (resData) {
-                //时间戳列表
+                const xData = resData['times']
-                times: [123452435924242, 123452435924342, 123452435924442, 123452435924542],
+                const yData = resData['values']
-                //值列表
-                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']
+                calculate[index] = {
-    const yData = resData['values']
+                    max: Math.max(...yData),
-    option.tooltip = {
+                    min: Math.min(...yData),
-        trigger: 'axis',
+                    average: Math.floor(yData.reduce((a, b) => a + b, 0) / yData.length),
-        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 = [
+                option.tooltip = {
-        {
+                    show: true,
-            name: '',
+                    formatter: function (params) {
-            type: 'line',
+                        const x = timestampToTime(xData[params.dataIndex])
-            data: yData,
+                        return `${params.marker} ${params.seriesName} ${x}   : ${params.data}`
-        },
+                    },
-    ]
+                }
-    console.log('🚀 ~ //historyReq ~ option:', option)
+                option.xAxis.data = Array.from({ length: xData.length }, (_, index) => index)
-    chart.value.setOption(option)
+                const seriesData = {
-    // })
+                    name: index + 1,
+                    type: 'line',
+                    data: yData,
+                }
+                option.legend.data.push(index + 1)
+                option.series.push(seriesData)
+                chart.value.setOption(option)
+            }
+        } else {
+            ElMessage.warning('查询失败')
+        }
+    })
 }
 
 const statAnalysisExport = () => {}
 const statAnalysiImport = () => {}
+
+const timestampToTime = (timestamp) => {
+    timestamp = timestamp ? timestamp : null
+    let date = new Date(timestamp)
+    let Y = date.getFullYear() + '-'
+    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
+    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
+    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
+    let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+    return Y + M + D + h + m
+}
 </script>
 <style scoped lang="scss">
 .statAnalysis {