监测点运行状态

src/api/device-boot/communicate.ts

@@ -1,7 +1,7 @@
 import request from '@/utils/request'
 
 // 事件分析  获取数据
-export function getRunOnlineRateData(data) {
+export function getRunOnlineRateData(data:any) {
     return request({
         url: "/device-boot/communicate/getRunOnlineRateData",
         method: "post",
@@ -9,10 +9,19 @@ export function getRunOnlineRateData(data) {
     });
 }
 // 事件分析  运行状态 获取数据
-export function getComFlagInfoData(data) {
+export function getComFlagInfoData(data:any) {
     return request({
         url: "/device-boot/communicate/getComFlagInfoData",
         method: "post",
         data
     });
+}
+
+// 事件分析  运行状态 获取数据
+export function getRunInfoData(data:any) {
+    return request({
+        url: "/device-boot/communicate/getRunInfoData",
+        method: "post",
+        data
+    });
 }

src/components/echarts/MyEchart.vue

@@ -112,6 +112,7 @@ const handlerBar = (options: any) => {
         options.series.forEach((item: any) => {
             if (item.type === 'bar') {
                 item.barMinHeight = 10
+                item.barMaxWidth = 30
                 item.itemStyle = Object.assign(
                     {
                         color: (params: any) => {

src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue

@@ -75,7 +75,7 @@ const pointTree = ref()
 const size = ref(0)
 const isReload = ref(false)
 const height = mainHeight(40)
-const activeName = ref('5')
+const activeName = ref('6')
 onMounted(() => {
     const dom = document.getElementById('navigation-splitpanes')
     if (dom) {

src/views/pqs/harmonicMonitoring/monitoringPoint/online/yunxingzhuangtai/index.vue

@@ -1,173 +1,176 @@
 <template>
-    <div style='display: flex;flex-direction: column;height: 100%'>
-        <el-form :inline='true'>
-            <el-form-item label='日期'>
-                <DatePicker ref='datePickerRef'></DatePicker>
+    <div style="display: flex; flex-direction: column; height: 100%">
+        <el-form :inline="true">
+            <el-form-item label="日期">
+                <DatePicker ref="datePickerRef"></DatePicker>
+            </el-form-item>
+            <el-form-item label="对比">
+                <el-select v-model="searchType" clearable placeholder="可选择同比、环比">
+                    <el-option
+                        v-for="item in searchTypeOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
             </el-form-item>
             <el-form-item>
-                <el-button type='primary' @click='init'>查询</el-button>
+                <el-button type="primary" @click="init">查询</el-button>
             </el-form-item>
         </el-form>
-        <div style='flex: 1;' class='mt10'>
-            <my-echart :options='options' />
+        <div style="flex: 1; display: flex; overflow: hidden" class="mt10">
+            <div style="flex: 1">
+                <my-echart :options="options1" />
+            </div>
+            <div style="flex: 1">
+                <my-echart :options="options2" />
+            </div>
         </div>
     </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/stores/monitoringPoint'
 import { getProbabilityDistribution } from '@/api/event-boot/monitor'
+import { getRunInfoData, getComFlagInfoData } from '@/api/device-boot/communicate'
 
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
 const loading = ref(true)
 const formData = reactive({
-    lineIndex: monitoringPoint.state.lineId,
-    startTime: '',
-    endTime: ''
+    id: monitoringPoint.state.lineId,
+    searchBeginTime: '',
+    searchEndTime: '',
+    periodBeginTime: '',
+    periodEndTime: ''
 })
-const options = ref({})
-
-const init = () => {
-    loading.value = true
-    formData.lineIndex = monitoringPoint.state.lineId
-    formData.startTime = datePickerRef.value.timeValue[0]
-    formData.endTime = datePickerRef.value.timeValue[1]
-    getProbabilityDistribution(formData).then(
-        (res: any) => {
-            let data = res.data
-            let sisttime = data.sisttime
-            let persisttime = data.persisttime
-            options.value = {
-                backgroundColor: '#fff', //背景色,
-                title: {
-                    text: '持续时间的概率分布函数',
-                    x: 'center'
-                },
-                legend: {
-                    show: true,
-                    left: 10,
-                    data: ['概率分布', '占比'],
-
-                    textStyle: {
-                        rich: {
-                            a: {
-                                verticalAlign: 'middle'
-                            }
-                        },
-
-                        padding: [2, 0, 0, 0] //[上、右、下、左]
-                    }
-                },
-
-                tooltip: {
-                    //提示框组件
-                    trigger: 'axis',
-
-                    axisPointer: {
-                        type: 'shadow',
-                        label: {
-                            color: '#fff',
-                            fontSize: 16
-                        }
-                    },
-                    textStyle: {
-                        color: '#fff',
-                        fontStyle: 'normal',
-                        opacity: 0.35,
-                        fontSize: 14
-                    },
-                    backgroundColor: 'rgba(0,0,0,0.35)',
-                    borderWidth: 0
-                },
-                calculable: true,
-                xAxis: [
-                    {
-                        type: 'category',
-                        name: '暂降幅值',
-                        nameGap: 10,
-                        nameTextStyle: {
-                            fontSize: 12
-                        },
-                        data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: '概率分布',
-                        nameTextStyle: {
-                            fontSize: 15
-                        },
-                        axisLabel: {
-                            formatter: '{value}%'
-                        },
-                        axisLine: {
-                            show: true
-                        },
-                        splitLine: {
-                            lineStyle: {
-                                // 使用深浅的间隔色
-                                type: 'dashed',
-                                opacity: 0.5
-                            }
-                        }
-                    },
-                    {
-                        type: 'value',
-                        name: '占比',
-
-                        nameTextStyle: {
-                            fontSize: 15
-                        },
-                        axisLine: {
-                            show: true
-                        },
-
-                        splitLine: {
-                            lineStyle: {
-                                type: 'dashed',
-                                opacity: 0.5
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: '概率分布',
-                        type: 'line',
-                        data: sisttime,
-                        itemStyle: {
-                            normal: { show: true }
-                        }
-                    },
-                    {
-                        name: '占比',
-                        type: 'bar',
-                        data: persisttime,
-                        barWidth: 30,
-                        itemStyle: {
-                            normal: { show: true }
-                        }
-                    }
-                ],
-                options: {
-                    dataZoom: null
-                }
-            }
-            nextTick(() => {
-                loading.value = false
-            })
-        }
-    )
-}
-
-
+const searchType = ref('')
+const searchTypeOptions = [
+    {
+        label: '同比',
+        value: '1'
+    },
+    {
+        label: '环比',
+        value: '2'
+    }
+]
+const options1 = ref({})
+const options2 = ref({})
 onMounted(() => {
     init()
 })
-
+const init = () => {
+    loading.value = true
+    formData.id = monitoringPoint.state.lineId
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
+    if (searchType.value == '1') {
+        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
+            formData.searchBeginTime,
+            formData.searchEndTime
+        )
+    } else if (searchType.value == '2') {
+        ;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
+            formData.searchBeginTime,
+            formData.searchEndTime
+        )
+    } else {
+        formData.periodBeginTime = ''
+        formData.periodEndTime = ''
+    }
+    Promise.all([getComFlagInfoData(formData), getRunInfoData(formData)]).then((res: any) => {
+        handlerOptions1(res[0].data)
+        handlerOptions2(res[1].data)
+    })
+}
+const handlerOptions1 = (data: any) => {
+    options1.value = {
+        title: {
+            text: '运行状态'
+        },
+        legend: {
+            show: false
+        },
+        tooltip: {
+            formatter: function (params: any) {
+                var res = params[0].name + '<br/>终端运行状态为：'
+                var texts = ''
+                if (params[0].value === 2 || params[0].value === '2') {
+                    texts = '退出'
+                } else if (params[0].value === 0 || params[0].value === '0') {
+                    texts = '中断'
+                } else if (params[0].value === 1 || params[0].value === '1') {
+                    texts = '正常'
+                }
+                res = res + texts
+                return res
+            }
+        },
+        xAxis: {
+            type: 'category',
+            data: data.updateTime
+        },
+        yAxis: {
+            name:'状态',
+            type: 'value',
+            axisLabel: {
+                // 这里重新定义就可以
+                formatter: function (value: number) {
+                    var texts = []
+                    if (value === 2) {
+                        texts.push('退出')
+                    } else if (value === 0) {
+                        texts.push('中断')
+                    } else if (value === 1) {
+                        texts.push('正常')
+                    }
+                    return texts
+                }
+            }
+        },
+        series: [
+            {
+                name: '中断运行状态',
+                data: data.type,
+                type: 'line'
+            }
+        ]
+    }
+}
+const handlerOptions2 = (data: any) => {
+    options2.value = {
+        title: {
+            text: '在线率和完整性'
+        },
+        xAxis: {
+            type: 'category',
+            data: formData.periodBeginTime
+                ? [
+                      `${formData.searchBeginTime} 至 ${formData.searchEndTime}`,
+                      `${formData.periodBeginTime} 至 ${formData.periodEndTime}`
+                  ]
+                : [`${formData.searchBeginTime} 至 ${formData.searchEndTime}`]
+        },
+        yAxis: {
+            name:'%',
+            type: 'value'
+        },
+        series: [
+            {
+                name: '在线率',
+                data: data.onlineRateData,
+                type: 'bar'
+            },
+            {
+                name: '完整性',
+                data: data.integrityData,
+                type: 'bar'
+            }
+        ]
+    }
+}
 </script>
 <style></style>