From 12486908588aea021ad4f4f0d27de9177155036a Mon Sep 17 00:00:00 2001
From: code_nan <1677408957@qq.com>
Date: Mon, 8 Jan 2024 20:43:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/modules/monitoring/audit-log.vue   |  29 +-
 src/views/modules/monitoring/chart-test.vue  |  38 +++
 src/views/modules/monitoring/chart-test2.vue | 266 +++++++++++++++++++
 3 files changed, 331 insertions(+), 2 deletions(-)
 create mode 100644 src/views/modules/monitoring/chart-test.vue
 create mode 100644 src/views/modules/monitoring/chart-test2.vue

diff --git a/src/views/modules/monitoring/audit-log.vue b/src/views/modules/monitoring/audit-log.vue
index 32557ee..6128853 100644
--- a/src/views/modules/monitoring/audit-log.vue
+++ b/src/views/modules/monitoring/audit-log.vue
@@ -16,6 +16,9 @@
         <el-table-column prop="message" label="日志内容"></el-table-column>
         <el-table-column prop="timestamp" label="时间戳"></el-table-column>
       </el-table>
+      <el-container style="height: 400px;">  
+      <el-chart :options="chartOptions" ref="myChart"></el-chart>  
+    </el-container>  
     </div>
   </template>
   
@@ -32,9 +35,27 @@
         logs: [ // 这里可以根据需要从后台获取真实数据
              { id: 1, message: "日志1", timestamp: "2024-01-05 10:30:00" },
              { id: 2, message: "日志2", timestamp: "2024-01-05 11:15:00" },
-      ]
+      ],
+      chartOptions: {  
+        title: {  
+          text: '柱状图示例'  
+        },  
+        tooltip: {},  
+        xAxis: {  
+          data: ['类别1', '类别2', '类别3', '类别4', '类别5']  
+        },  
+        yAxis: {},  
+        series: [{  
+          name: '数量',  
+          type: 'bar',  
+          data: [5, 20, 36, 10, 10]  
+        }]  
+      }  
       };
     },
+    mounted() {  
+    this.renderChart()  
+  },  
     methods: {
       fetchLogs() {
         // 模拟从后端获取日志数据的过程
@@ -57,7 +78,11 @@
           // 将返回的日志数据赋值给logs数组
           this.logs = response.data;
         }, 1000);
-      }
+      },
+      renderChart() {  
+      const myChart = echarts.init(this.$refs.myChart)  
+      myChart.setOption(this.chartOptions)  
+    }  
     }
   };
   </script>
diff --git a/src/views/modules/monitoring/chart-test.vue b/src/views/modules/monitoring/chart-test.vue
new file mode 100644
index 0000000..4e1c60a
--- /dev/null
+++ b/src/views/modules/monitoring/chart-test.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
+            <el-card shadow="always">
+                <div slot="header" class="clearfix">
+                <span>数据上报</span>
+                <span class="card-div-desc">{{ lineCardTitle }}</span>
+                <el-radio-group style="float: right; padding: 3px 0" v-model="lineDataType"
+                                size="mini" @change="handleLineChange">
+                    <el-radio-button label="order">运行情况</el-radio-button>
+                    <el-radio-button label="sale">应用情况</el-radio-button>
+                </el-radio-group>
+                </div>
+                <div>
+                <LineHeapChart
+                    height="600px"
+                    :xAxisData="lineXAxisData"
+                    :seriesData="lineSeriesData"
+                />
+                </div>
+            </el-card>
+            </el-col>
+    </div>
+</template>
+  
+<script>
+import * as echarts from "echarts";
+  
+import LineHeapChart from '../../../components/charts/LineHeapChart.vue'
+import PieFlatChart from '../../../components/charts/PieFlatChart.vue'
+
+export default {
+  name: 'index',
+  components: {
+    LineHeapChart,
+    PieFlatChart
+  },
+}
\ No newline at end of file
diff --git a/src/views/modules/monitoring/chart-test2.vue b/src/views/modules/monitoring/chart-test2.vue
new file mode 100644
index 0000000..5fcf09d
--- /dev/null
+++ b/src/views/modules/monitoring/chart-test2.vue
@@ -0,0 +1,266 @@
+<template>
+    <div>
+        <el-row :gutter="10" style="margin-bottom:10px">
+            <el-col :span="6">
+                <el-card style="color:#409EFF">
+                    <div><i class="el-icon-user-solid"/>运行设备数量</div>
+                    <div style="padding:10px 0;text-align:center;font-weight:bold">{{total}}</div>
+                </el-card>
+            </el-col>
+             <el-col :span="6">
+                <el-card style="color:#F56C6C">
+                    <div><i class="el-icon-money"/>设备总量</div>
+                    <div style="padding:10px 0;text-align:center;font-weight:bold">1000</div>
+                </el-card>
+            </el-col>
+             <el-col :span="6">
+                <el-card  style="color:#67C23A">
+                    <div><i class="el-icon-bank-card"/>覆盖地区</div>
+                    <div style="padding:10px 0;text-align:center;font-weight:bold">320</div>
+                </el-card>
+            </el-col>
+             <el-col :span="6">
+                <el-card  style="color:#409EFF">
+                    <div style="color:#409EFF"><i class="el-icon-s-shop"/>上报数量</div>
+                    <div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
+                </el-card>
+            </el-col>
+        </el-row>
+        <el-row :gutter="10" style="margin-bottom:10px">
+            <el-col :span="12">
+                <el-card style="color:#409EFF">
+                    <div><i class="el-icon-bank-card"/>覆盖地区</div>
+                    <div id="main" style="width:500px; height:400px"></div>
+                </el-card>
+            </el-col>
+
+            <el-col :span="12">
+                <el-card style="color:#409EFF">
+                    <div><i class="el-icon-bank-card"/>覆盖地区</div>
+                    <div id="pie" style="width:500px; height:400px"></div>
+                </el-card>
+            </el-col>
+        </el-row>
+
+        <el-row :gutter="10" style="margin-bottom:10px">
+            <el-card style="color:#409EFF">
+                    <div><i class="el-icon-bank-card"/>流量上报</div>
+                    <div id="stacked-area" style="width:1000px; height:400px; margin-left: auto; margin-right: auto;"></div>
+                </el-card>
+        </el-row>
+    </div>
+</template>
+<script>
+import * as echarts from 'echarts';
+export default {
+    name:"Home",
+    data(){
+        return{
+            total:0
+        }
+    },
+    mounted(){       //使用mounted的目的是为了等页面元素渲染之后再触发
+    
+        var chartDom = document.getElementById('main');
+        var myChart = echarts.init(chartDom);
+        var charOption;
+        charOption = {
+            title: {
+                text: '运行设备统计',
+                subtext: '趋势图',
+                left: 'center'
+            },
+            xAxis: {
+                type: 'category',
+                data: ["龙华区","福田区","龙岗区","南山区"]
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [
+                {
+                data: [150, 230, 224, 218, 135],
+                type: 'line'
+                },
+                {
+                data: [150, 230, 224, 218, 135],
+                type: 'bar'
+                }
+            ]
+        };           
+        var pieDom = document.getElementById('pie');
+        var pieChart = echarts.init(pieDom);
+        var pieOption;
+
+        pieOption = {
+            title: {
+                text: '运行设备统计',
+                subtext: '比例图',
+                left: 'center'
+            },
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                orient: 'vertical',
+                left: 'left'
+            },
+            series: [
+              {
+                type: 'pie',
+                radius: '70%',
+                label: {
+                normal: {
+                    show: true,
+                    position: 'inner',
+                    textStyle:{
+                        fontWeight:300,
+                        fontSize:16,
+                        color:"#fff"
+                    },
+                    formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
+                }
+                },
+                data: [        { value: 1048, name: '龙华区' },
+                                { value: 735, name: '龙岗区' },
+                                { value: 580, name: '南山区' },
+                                { value: 484, name: '福田区' },
+
+                            ],
+                emphasis: {
+                    itemStyle: {
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
+                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+              }
+        ]
+        };
+        var StackedareaDom = document.getElementById('stacked-area');
+        var StackedareaChart = echarts.init(StackedareaDom);
+        var StackedareaOption;
+
+        StackedareaOption = {
+            title: {
+                // text: '数据上报统计图',
+                // left: 'center'
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                type: 'cross',
+                label: {
+                    backgroundColor: '#6a7985'
+                }
+                }
+            },
+            legend: {
+                data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+            },
+            toolbox: {
+                // feature: {
+                // saveAsImage: {}
+                // }
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            xAxis: [
+                {
+                type: 'category',
+                boundaryGap: false,
+                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                }
+            ],
+            yAxis: [
+                {
+                type: 'value'
+                }
+            ],
+            series: [
+                {
+                name: 'Email',
+                type: 'line',
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [120, 132, 101, 134, 90, 230, 210]
+                },
+                {
+                name: 'Union Ads',
+                type: 'line',
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [220, 182, 191, 234, 290, 330, 310]
+                },
+                {
+                name: 'Video Ads',
+                type: 'line',
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [150, 232, 201, 154, 190, 330, 410]
+                },
+                {
+                name: 'Direct',
+                type: 'line',
+                stack: 'Total',
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [320, 332, 301, 334, 390, 330, 320]
+                },
+                {
+                name: 'Search Engine',
+                type: 'line',
+                stack: 'Total',
+                label: {
+                    show: true,
+                    position: 'top'
+                },
+                areaStyle: {},
+                emphasis: {
+                    focus: 'series'
+                },
+                data: [820, 932, 901, 934, 1290, 1330, 1320]
+                }
+            ]
+            };
+
+        // this.request("http://localhost:8002/echarts").then(res=>{  
+        //     console.log(res.data);          
+        //      charOption.series[0].data=res.data;
+        //      charOption.series[1].data=res.data;
+        //      this.total=res.data[4];
+              myChart.setOption(charOption);
+
+        //     pieOption.series[0].data=[
+        //         {name:"第一季度",value:res.data[0]},
+        //         {name:"第二季度",value:res.data[1]},
+        //         {name:"第三季度",value:res.data[2]},
+        //         {name:"第四季度",value:res.data[3]}
+        //       ];
+               pieChart.setOption(pieOption);
+        //     })     
+
+                StackedareaChart.setOption(StackedareaOption);
+        
+    }
+}
+</script>
+
+<style scoped>
+
+</style>