设备监控

src/api/cs-harmonic-boot/datatrend.ts

@@ -0,0 +1,10 @@
+import createAxios from '@/utils/request'
+
+// 查询设备数据趋势
+export function getDeviceDataTrend(data: any) {
+    return createAxios({
+        url: '/cs-harmonic-boot/datatrend/querydatatrend',
+        method: 'POST',
+        data
+    })
+}

src/layouts/admin/index.vue

@@ -98,7 +98,7 @@ const init = async () => {
                         icon: 'el-icon-List',
                         menu_type: 'tab',
                         url: '',
-                        component: '/src/views/govern/device/control.vue',
+                        component: '/src/views/govern/device/control/index.vue',
                         keepalive: 'auth/role',
                         extend: 'none',
                         children: []

src/views/govern/device/control/index.vue

@@ -130,12 +130,12 @@
                 ></el-pagination>
             </el-tabs>
         </div>
-        <!-- <MangePopup ref="mangePopup" /> -->
+        <Popup ref="popupRef" />
     </div>
 </template>
 
 <script setup lang="ts">
-// import MangePopup from './controlPopup.vue'
+import Popup from './popup.vue'
 import PointTree from '@/components/tree/govern/pointTree.vue'
 import { mainHeight } from '@/utils/layout'
 import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
@@ -149,6 +149,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
 defineOptions({
     name: 'govern/device/control'
 })
+const popupRef = ref()
 const pageHeight = mainHeight(20)
 const loading = ref(true)
 const tableLoading = ref(false)
@@ -171,7 +172,12 @@ const formInline = reactive({
     id: '',
     lineId: ''
 })
-const getDeviceDataTrend = (e: any) => {}
+const getDeviceDataTrend = (e: any) => {
+    popupRef.value.open(e.name,{
+        ...e,
+        lineId: formInline.lineId
+    })
+}   
 const pageChange = (e: number) => {
     formInline.pageNum = e
     handleClick()

src/views/govern/device/control/popup.vue

@@ -0,0 +1,156 @@
+<template>
+    <el-dialog class="cn-operate-dialog control-popup" v-model="dialogVisible" :title="title">
+        <el-form :inline="true">
+            <el-form-item label="日期">
+                <DatePicker ref="datePickerRef" v-if="dialogVisible"></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>
+            </el-form-item>
+        </el-form>
+        <MyEchart :options="echartsData" v-if="echartsData" style="flex: 1" />
+        <el-empty description="暂无数据" v-else style="flex: 1" v-loading="loading"></el-empty>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject, nextTick } from 'vue'
+import { reactive } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { install$5 } from 'echarts/types/dist/shared'
+const datePickerRef = ref()
+const form: any = reactive({
+    code: '',
+    icon: '',
+    id: '',
+    name: '',
+    path: '',
+    pid: '0',
+    remark: '',
+    routeName: '',
+    sort: 0,
+    type: 0
+})
+const echartsData = ref<any>(null)
+const popupData = ref<any>(null)
+const dialogVisible = ref(false)
+const loading = ref(true)
+const title = ref('')
+const open = (text: string, data?: anyObj) => {
+    title.value = text
+    popupData.value = data
+    dialogVisible.value = true
+    nextTick(() => {
+        init()
+    })
+}
+const init = () => {
+    echartsData.value = null
+    loading.value = true
+    getDeviceDataTrend({
+        endTime: datePickerRef.value.timeValue[1],
+        lineId: popupData.value.lineId,
+        startTime: datePickerRef.value.timeValue[0],
+        statisticalParams: popupData.value.children
+    }).then(res => {
+        if (res.data.length && res.data[0].length) {
+            let arr: any[] = []
+            res.data.forEach((item: any[]) => {
+                arr.push(...item)
+            })
+            echartsData.value = {
+                options: {
+                    grid: {
+                        top: '50px',
+                        left: '10px',
+                        right: '20px',
+                        bottom: '40px',
+                        containLabel: true
+                    },
+                    series: res.data.map((item: any) => {
+                        return {
+                            data: item.map((item: any) => {
+                                return item.statisticalData
+                            }),
+                            markPoint: {
+                                symbol: 'circle',
+                                symbolSize: 8,
+                                label: {
+                                    show: false
+                                },
+                                data: [
+                                    { type: 'max', name: 'Max' },
+                                    { type: 'min', name: 'Min' }
+                                ]
+                            },
+                            type: 'line',
+                            showSymbol: false,
+                            smooth: true,
+                            name: item[0].anotherName
+                        }
+                    })
+                },
+                legend: {
+                    data: res.data.map((item: any[]) => {
+                        return item[0].anotherName
+                    })
+                },
+                yAxis: {
+                    name: `单位:(${arr[0].unit})`,
+                    type: 'value',
+                    axisLine: {
+                        show: true
+                    },
+                    minInterval: 1,
+                    interval: parseInt(
+                        (
+                            (arr
+                                .map(item => item.statisticalData)
+                                .sort((a, b) => {
+                                    return b - a
+                                })[0] *
+                                1.5) /
+                            5
+                        ).toFixed(0)
+                    ),
+                    min: 0,
+                    max: parseInt(
+                        (
+                            arr
+                                .map(item => item.statisticalData)
+                                .sort((a, b) => {
+                                    return b - a
+                                })[0] * 1.5
+                        ).toFixed(0)
+                    )
+                },
+                xAxis: {
+                    type: 'category',
+                    data: res.data[0].map((item: any) => {
+                        return item.time
+                    }),
+                    axisLabel: {
+                        formatter: function (value: string) {
+                            return value.split(' ').join('\n')
+                        }
+                    }
+                }
+            }
+        } else {
+            echartsData.value = null
+        }
+        loading.value = false
+    })
+}
+defineExpose({ open })
+</script>
+<style lang="scss">
+.control-popup {
+    .el-dialog__body {
+        padding-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+    }
+}
+</style>