echats样式修改

src/api/device-boot/communicate.ts

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

src/components/echarts/MyEchart.vue

@@ -8,6 +8,7 @@ import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 import * as echarts from 'echarts' // 全引入
 import 'echarts-gl'
 import 'echarts/lib/component/dataZoom'
+import { color, gradeColor } from './color'
 
 const chartRef = ref<HTMLDivElement>()
 
@@ -24,7 +25,7 @@ const initChart = () => {
     chart?.dispose()
 
     chart = echarts.init(chartRef.value as HTMLDivElement)
-    chart.setOption({
+    const options = {
         title: {
             left: 'center',
             textStyle: {
@@ -35,7 +36,6 @@ const initChart = () => {
         },
         tooltip: {
             trigger: 'axis',
-
             axisPointer: {
                 type: 'shadow',
                 label: {
@@ -75,47 +75,56 @@ const initChart = () => {
         },
         xAxis: props.options.xAxis ? handlerXAxis() : null,
         yAxis: props.options.yAxis ? handlerYAxis() : null,
-        dataZoom: [
+        dataZoom: props.options.dataZoom || [
             {
                 type: 'inside',
                 height: 13,
                 start: 0,
                 bottom: '20px',
-                end: 100,
+                end: 100
-                ...(props.options.dataZoom || null)
             },
             {
                 start: 0,
                 height: 13,
                 bottom: '20px',
-                end: 100,
+                end: 100
-                ...(props.options.dataZoom || null)
             }
         ],
-        color: [
+        color: props.options.color || color,
-            ...(props.options.color || ''),
-            '#07CCCA',
-            '#00BFF5',
-            '#FFBF00',
-            '#77DA63',
-            '#D5FF6B',
-            '#Ff6600',
-            '#FF9100',
-            '#5B6E96',
-            '#66FFCC',
-            '#B3B3B3'
-        ],
         series: props.options.series,
         ...props.options.options
-    })
+    }
+    handlerBar(options)
+    // 处理柱状图
+    chart.setOption(options)
     setTimeout(() => {
         chart.resize()
     }, 0)
 }
+const handlerBar = (options: any) => {
+    if (Array.isArray(options.series)) {
+        options.series.forEach((item: any) => {
+            if (item.type === 'bar') {
+                item.barMinHeight = 10
+                item.itemStyle = Object.assign(
+                    {
+                        color: (params: any) => {
+                            console.log(params)
+                            if (params.value == 0 || params.value == 3.14159) {
+                                return '#ccc'
+                            } else {
+                                return color[params.seriesIndex]
+                            }
+                        }
+                    }
+                )
+            }
+        })
+    }
+}
 const handlerYAxis = () => {
     let temp = {
         type: 'value',
-
         nameTextStyle: {
             color: '#000'
         },

src/components/echarts/color.ts

@@ -0,0 +1,13 @@
+export const color = [
+    '#07CCCA',
+    '#00BFF5',
+    '#FFBF00',
+    '#77DA63',
+    '#D5FF6B',
+    '#Ff6600',
+    '#FF9100',
+    '#5B6E96',
+    '#66FFCC',
+    '#B3B3B3'
+]
+export const gradeColor = ['#339966', '#FFCC33', '#CC0000']

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/ITICquxianfenxi/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
         <el-form :inline='true'>
-            <el-form-item label='时间间隔'>
+            <el-form-item label='日期'>
                 <DatePicker ref='datePickerRef'></DatePicker>
             </el-form-item>
             <el-form-item>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/SEMIF47fenxi/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div style='display: flex;flex-direction: column;height: 100%'>
         <el-form :inline='true'>
-            <el-form-item label='时间间隔'>
+            <el-form-item label='日期'>
                 <DatePicker ref='datePickerRef'></DatePicker>
             </el-form-item>
             <el-form-item>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/chixushijiangailvfenbu/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div style='display: flex;flex-direction: column;height: 100%'>
         <el-form :inline='true'>
-            <el-form-item label='时间间隔'>
+            <el-form-item label='日期'>
                 <DatePicker ref='datePickerRef'></DatePicker>
             </el-form-item>
             <el-form-item>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-loading='loading' class='dianyazanjiangbaojimidu'>
         <el-form :inline='true'>
-            <el-form-item label='时间间隔'>
+            <el-form-item label='日期'>
                 <DatePicker ref='datePickerRef'></DatePicker>
             </el-form-item>
             <el-form-item>

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
         <el-form :inline='true'>
-            <el-form-item label='时间间隔'>
+            <el-form-item label='日期'>
                 <DatePicker ref='datePickerRef'></DatePicker>
             </el-form-item>
             <el-form-item>
@@ -23,6 +23,7 @@ import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
 import { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
+import { color } from '@/components/echarts/color'
 
 const datePickerRef = ref()
 const loading = ref(true)
@@ -135,22 +136,20 @@ const initFirst = () => {
             {
                 name: '暂降次数',
                 type: 'bar',
-                barMaxWidth: 30,
+                barMinHeight: 10,
-                barMinHeight: 5,
                 itemStyle: {
                     normal: {
                         color: function(params: any) {
                             if (params.data == 0) {
                                 return '#ccc'
                             } else {
-                                return '#07CCCA'
+                                return color[0]
                             }
                         },
                         label: {
                             show: true,
                             textStyle: {
-                                label: { show: true, position: 'top' },
+                                label: { show: true, position: 'top' }
-                                color: '#8B008B'
                             }
                         }
                     }

src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div style='display: flex;flex-direction: column;height: 100%'>
         <el-form :inline='true'>
-            <el-form-item label='时间间隔'>
+            <el-form-item label='日期'>
                 <DatePicker ref='datePickerRef'></DatePicker>
             </el-form-item>
             <el-form-item>
@@ -146,14 +146,6 @@ const init = () => {
                     }
                 ],
                 series: [
-                    {
-                        name: '概率分布',
-                        type: 'line',
-                        data: eventValue,
-                        itemStyle: {
-                            normal: { show: true }
-                        }
-                    },
                     {
                         name: '占比',
                         type: 'bar',
@@ -162,10 +154,18 @@ const init = () => {
                         itemStyle: {
                             normal: { show: true }
                         }
+                    },
+                    {
+                        name: '概率分布',
+                        type: 'line',
+                        data: eventValue,
+                        itemStyle: {
+                            normal: { show: true }
+                        }
                     }
                 ],
-                options:{
+                options: {
-                    dataZoom: null,
+                    dataZoom: null
                 }
             }
             nextTick(() => {

src/views/pms/voltageSags/monitoringPoint/online/index.vue

@@ -10,7 +10,7 @@
             <el-tab-pane label='事件分析' name='3' lazy>
                 <EventStudy />
             </el-tab-pane>
-            <el-tab-pane label='运行情况' name='4' lazy>
+            <el-tab-pane label='运行情况' name='4' lazy :style='height'>
                 <RunningCondition />
             </el-tab-pane>
         </el-tabs>

src/views/pms/voltageSags/monitoringPoint/online/runningCondition/index.vue

@@ -1,10 +1,311 @@
 <template>
-    <div class='default-main'>
+    <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
-
+        <el-form :inline='true'>
+            <el-form-item label='日期'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
+            <my-echart :options='secondOptions' style='flex: 1;height: 100%' />
+            <my-echart :options='firstOptions' style='flex: 1;height: 100%' />
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+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 '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
+import { gradeColor } from '@/components/echarts/color'
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    id: monitoringPoint.state.lineId,
+    searchBeginTime: '',
+    searchEndTime: '',
+    timeFlag: 1
+})
+const firstOptions = ref<any>({})
+const secondOptions = ref<any>({})
+const firstData = ref<any>([])
+const secondData = ref<any>([])
+
+
+const init = () => {
+
+    loading.value = true
+    formData.searchBeginTime = datePickerRef.value.timeValue[0]
+    formData.searchEndTime = datePickerRef.value.timeValue[1]
+    formData.timeFlag = datePickerRef.value.interval
+    Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
+        firstData.value = res[0].data
+        secondData.value = res[1].data
+        initFirst()
+        initSecond()
+        loading.value = false
+    })
+}
+const initFirst = () => {
+    let months = new Array()
+    let handle = new Array()
+    let year = firstData.value[0].year
+
+    for (let i = 0; i < firstData.value.length; i++) {
+        if (formData.timeFlag == 0) {
+            months[i] = firstData.value[i].month
+            months[0] = firstData.value[i].month + '\n' + '(' + year + ')'
+        } else {
+            months[i] = firstData.value[i].month + '-' + firstData.value[i].day
+            months[0] = firstData.value[i].month + '-' + firstData.value[i].day + '\n' + '(' + year + ')'
+        }
+        handle.push(firstData.value[i].onlineRate)
+    }
+    firstOptions.value = {
+        title: {
+            text: '在线率统计',
+            x: 'center',
+            textStyle: {
+                fontWeight: 'normal'
+            }
+        },
+        // legend: {
+        //   data: ["在线率"],
+        //   left: "5%",
+        // },
+        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)',
+            formatter: function(params: any) {
+                let tips = ''
+                tips += '时间:' + year + '-' + params[0].name + '</br/>'
+                for (let i = 0; i < params.length; i++) {
+                    if (params[i].value == 3.14159) {
+                        tips += params[i].seriesName + ':暂无数据<br/>'
+                    } else {
+                        tips += params[i].seriesName + ':' + params[i].value + '%<br/>'
+                    }
+                }
+                return tips
+            }
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: months,
+                name: '时间',
+                nameTextStyle: {
+                    verticalAlign: 'top', //标题位置
+                    padding: [-5, 0, 0, -10]
+                },
+
+                splitLine: {
+                    show: false
+                },
+                axisLine: {
+                    show: true
+                }
+            }
+        ],
+        yAxis: [
+            {
+                min: 0,
+                max: 100,
+                type: 'value',
+                name: '%',
+                axisLine: {
+                    show: true
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        // 使用深浅的间隔色
+                        type: 'dashed',
+                        opacity: 0.5
+                    }
+                }
+            }
+        ],
+        series: [
+            {
+                name: '在线率',
+                zlevel: -99,
+                type: 'bar',
+                data: handle,
+                label: {
+                    normal: {
+                        show: false,
+                        position: 'top'
+                    }
+                },
+                markLine: {
+                    silent: false,
+                    symbol: 'circle',
+                    data: [
+                        {
+                            yAxis: 100,
+                            lineStyle: {
+                                color: gradeColor[0]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '100%'
+                            }
+                        },
+                        {
+                            yAxis: 90,
+                            lineStyle: {
+                                color: gradeColor[1]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '90%'
+                            }
+                        },
+                        {
+                            yAxis: 60,
+                            lineStyle: {
+                                color: gradeColor[2]
+                            },
+                            label: {
+                                position: 'end',
+                                formatter: '60%'
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+}
+const initSecond = () => {
+    let list = secondData.value.type
+    let items = secondData.value.updateTime
+
+    for (let i = 0; i < items.length; i++) {
+        if (i != 0) {
+            i
+            items[i] = items[i].slice(11)
+        } else if (i == 0) {
+            let date = items[i].slice(11)
+            let t = items[i].slice(0, 10)
+            items[i] = '(' + date + ')' + '\n' + t
+        }
+    }
+    secondOptions.value = {
+        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)',
+            formatter: function(params: any) {
+                let res = '时间: ' + params[0].name + '<br/>运行状态：'
+                let 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
+            }
+        },
+        legend: {
+            data: ['运行状态'],
+            left: '5%'
+        },
+        dataZoom: [
+            {
+                type: 'inside',
+                height: 13,
+                start: 0,
+                end: 100,
+                bottom: '25px'
+            },
+
+            { height: 13, start: 0, bottom: '25px', end: 100 }
+        ],
+
+        xAxis: {
+            name: '时间',
+            type: 'category',
+            data: items,
+            boundaryGap: false
+
+        },
+        yAxis: {
+            name: '状态',
+            type: 'value',
+            axisLine: {
+                show: true
+            },
+            axisLabel: {
+                show: true,
+                textStyle: {
+                    color: 'blue'
+                },
+                // 这里重新定义就可以
+                formatter: function(value: number) {
+                    let texts = []
+                    if (value === 2) {
+                        texts.push('退出')
+                    } else if (value === 0) {
+                        texts.push('中断')
+                    } else if (value === 1) {
+                        texts.push('正常')
+                    }
+                    return texts
+                }
+            }
+        },
+        series: [
+            {
+                name: '运行状态',
+                type: 'line',
+                step: 'end',
+                data: list
+            }
+        ]
+    }
+}
+onMounted(() => {
+    init()
+})
 
 </script>
-<style></style>
+<style lang='scss'>
+.zanjiangfenbutongji {
+    display: flex;
+    overflow: hidden;
+}
+</style>