添加运行管理页面

src/components/yxgl/EchartsDome.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="echartsDome">
+    <div class="echartsDome_title">{{ title }}</div>
+    <div class="echartsDome_chart" ref="chartContainer"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  name: "EchartsDome",
+  props: {
+    title: {
+      type: String,
+      default: "图表标题",
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chartContainer);
+
+      let option = {
+        tooltip: {
+          trigger: "axis", // 坐标轴触发提示
+          axisPointer: { type: "shadow" },
+        },
+        legend: {
+          data: ["tokyo", "london"],
+          textStyle: { color: "#fff" }, // 图例文字颜色
+        },
+        xAxis: {
+          type: "category",
+          data: [
+            "Jan",
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+            "Nov",
+          ],
+          axisLine: { lineStyle: { color: "#fff" } }, // 坐标轴颜色
+          axisTick: { show: false }, // 隐藏刻度
+          splitLine: { show: false }, // 隐藏分割线
+        },
+        yAxis: {
+          type: "value",
+          max: 30,
+          axisLine: { lineStyle: { color: "#fff" } },
+          splitLine: {
+            lineStyle: {
+              type: "dashed", // 虚线网格
+              color: "#fff",
+            },
+          },
+        },
+        series: [
+          {
+            name: "调用次数",
+            type: "line",
+            data: [7, 7, 15, 19, 21, 22, 25, 26, 23, 19, 12], // 模拟数据
+            lineStyle: { color: "#42a5f5" }, // 蓝色线条
+            itemStyle: { color: "#42a5f5" }, // 节点颜色
+            symbol: "circle", // 节点形状
+            symbolSize: 6, // 节点大小
+          },
+          {
+            name: "平均响应时间",
+            type: "line",
+            data: [3, 3, 6, 12, 15, 17, 18, 17, 14, 10, 6], // 模拟数据
+            lineStyle: { color: "#4caf50" }, // 绿色线条
+            itemStyle: { color: "#4caf50" },
+            symbol: "circle",
+            symbolSize: 6,
+          },
+        ],
+      };
+      // 绘制图表
+      this.chart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.echartsDome {
+  width: 100%;
+  height: 400px;
+  background-color: #222;
+  /* color: #fff; */
+  padding: 20px;
+  box-sizing: border-box;
+}
+.echartsDome_title {
+  font-size: 20px;
+  font-weight: bold;
+}
+.echartsDome_chart {
+  width: 100%;
+  height: 360px;
+}
+</style>

src/components/yxgl/card.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="leftInfo">
+      <div class="leftInfo_title">{{ title }}</div>
+      <div class="leftInfo_value">{{ value }}</div>
+      <div class="leftInfo_growth" :style="{ color: growthColors[upStatus + 1] }">
+        <el-icon
+          ><Top v-if="upStatus == 1" /><SemiSelect v-if="upStatus == 0" /><Bottom
+            v-if="upStatus == -1"
+        /></el-icon>
+        {{ growth }}
+      </div>
+    </div>
+    <div class="icon" :style="{ background: iconColor + '32' }">
+      <el-icon><Flag :color="iconColor" /></el-icon>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "card",
+  props: {
+    title: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    growth: {
+      type: String,
+      default: "",
+    },
+    iconColor: {
+      type: String,
+      default: "#CCCCCC",
+    },
+    upStatus: {
+      type: Number,
+      //   -1 下降
+      //   0 持平
+      //   1 上升
+      default: -1,
+    },
+  },
+  data() {
+    return {
+      // 0 下降
+      // 1 持平
+      // 2 上升
+      growthColors: ["#F56C6C", "#909399", "#67C23A"],
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.leftInfo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+}
+.leftInfo_title {
+  font-size: 12px;
+  color: #909399;
+  line-height: 20px;
+}
+.leftInfo_value {
+  margin-top: 4px;
+  font-size: 24px;
+  font-weight: bold;
+  line-height: 33px;
+}
+.leftInfo_growth {
+  margin-top: 12px;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: bold;
+}
+.icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 5px;
+  background: #ccc;
+  font-size: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

src/main.js

@@ -8,6 +8,11 @@ import store from './store'
 initApp.use(store);
 
 import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+
+initApp.use(ElementPlus, {
+    locale: zhCn,
+})
 import 'element-plus/dist/index.css'
 initApp.use(ElementPlus)
 

src/router/index.js

@@ -111,9 +111,9 @@ const routes = [
     },
     children: [ // 子路由配置开始
       {
-        path: 'example',
+        path: 'StatisticalAnalysis',
         component: function () {
-          return import('../views/yxgl/Example.vue')
+          return import('../views/yxgl/StatisticalAnalysis.vue')
         },
       }
     ], // 子路由配置结束

src/views/Yxgl.vue

@@ -1,31 +1,92 @@
 <template>
-    <div class="yxgl container">
-        <router-view />
+  <div id="yxgl_box">
+    <el-menu
+      :default-active="menuActive"
+      class="el-menu-vertical-demo"
+      :collapse="isCollapse"
+      @open="handleOpen"
+      @close="handleClose"
+    >
+      <el-sub-menu index="/#">
+        <template #title>
+          <el-icon><Platform /></el-icon>
+          <span>运行中心</span>
+        </template>
+        <el-menu-item index="StatisticalAnalysis">
+          <el-icon><Histogram /></el-icon>
+          <template #title>统计分析</template>
+        </el-menu-item>
+      </el-sub-menu>
+      <el-sub-menu index="2">
+        <template #title>
+          <el-icon><Tools /></el-icon>
+          <span>管理中心</span>
+        </template>
+        <el-menu-item index="oauth">
+          <el-icon><UserFilled /></el-icon>
+          <template #title>用户权限</template>
+        </el-menu-item>
+        <el-menu-item index="dms">
+          <el-icon><Ticket /></el-icon>
+          <template #title>数据管理</template>
+        </el-menu-item>
+      </el-sub-menu>
+    </el-menu>
+    <div
+      class="viewBox"
+      :style="{ width: isCollapse ? 'calc(100vw - 60px)' : 'calc(100% - 200px)' }"
+    >
+      <StatisticalAnalysis />
     </div>
+  </div>
 </template>
 
 <script>
+import StatisticalAnalysis from "@/views/yxgl/StatisticalAnalysis.vue";
 export default {
-    name: "yxgl",
-    data() {
-        return {
-
-        };
+  name: "yxgl",
+  data() {
+    return {
+      isCollapse: false,
+      menuActive: "StatisticalAnalysis",
+    };
+  },
+  // 2. 局部注册组件（键值同名可简写）
+  components: {
+    StatisticalAnalysis, // 完整写法：MyButton: MyButton
+  },
+  mounted() {},
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
     },
-    mounted() {
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
     },
-    methods: {
-    }
+  },
 };
 </script>
 
 <style lang="less" scoped>
-.container {
-    width: 1920px;
-    margin: 0 auto;
+#yxgl_box {
+  width: 100vw;
+  margin: 0;
+  display: flex;
 }
 
-.yxgl {
-    position: relative;
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  height: 100vh;
+  margin: 0;
+  //   background: #08224a;
+}
+.viewBox {
+  width: calc(100vw - 200px);
+  margin: 0;
+  height: 100vh;
+  position: relative;
+  overflow: hidden;
+  overflow-y: auto;
+  background-color: #eee;
 }
-</style>
+</style>

src/views/yxgl/Example.vue

@@ -1,27 +0,0 @@
-<template>
-    <div class="example">
-        yxgl example
-    </div>
-</template>
-
-<script>
-export default {
-    name: "",
-    data() {
-        return {
-
-        };
-    },
-    mounted() {
-    },
-    methods: {
-    }
-};
-</script>
-
-<style lang="less" scoped>
-.container {
-    width: 1920px;
-    margin: 0 auto;
-}
-</style>

src/views/yxgl/StatisticalAnalysis.vue

@@ -0,0 +1,243 @@
+<template>
+  <div class="mainBox">
+    <!-- 搜索区域 -->
+    <div class="searchBox">
+      <div>
+        <el-date-picker
+          v-model="dateValue"
+          type="daterange"
+          unlink-panels
+          range-separator="到"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          :shortcuts="shortcuts"
+          size="large"
+        />
+      </div>
+    </div>
+    <!-- 服务调用card -->
+    <div class="flex">
+      <card
+        class="card flex"
+        :title="'服务机构总数'"
+        :value="8"
+        :growth="'较上个月增长了12%'"
+        iconColor="#2563db"
+        :upStatus="1"
+      />
+      <card
+        class="card flex"
+        :title="'服务总数'"
+        :value="100"
+        :growth="'较上个月下降了12%'"
+        iconColor="#16a34a"
+        :upStatus="-1"
+      />
+      <card
+        class="card flex"
+        :title="'服务调用总次数'"
+        :value="1000"
+        :growth="'较上个月增长了12%'"
+        iconColor="#9333ea"
+        :upStatus="1"
+      />
+      <card
+        class="card flex"
+        :title="'服务类别数量'"
+        :value="10"
+        :growth="'与上月持平'"
+        iconColor="#ca8a04"
+        :upStatus="0"
+      />
+    </div>
+    <!-- 服务类信息统计 -->
+    <div class="bigCard">
+      <div class="bigCard_title">服务类信息统计</div>
+      <div class="tools">
+        <el-button>
+          <el-icon><Upload /></el-icon> 导出数据
+        </el-button>
+        <el-button type="primary">
+          <el-icon><TrendCharts /></el-icon>
+          详细报告
+        </el-button>
+      </div>
+      <div class="flex">
+        <div style="width: 48%; height: 400px">
+          <EchartsDome title="服务调用趋势（近30天）" />
+        </div>
+        <div style="width: 48%; height: 400px">echarts2</div>
+      </div>
+      <div style="width: 100%; height: 400px">tables</div>
+    </div>
+    <!-- 用户信息统计 -->
+    <div class="bigCard">用户信息统计</div>
+    <!-- 应用类信息统计 -->
+    <div class="bigCard">应用类信息统计</div>
+    <!-- 数据类信息统计 -->
+    <div class="bigCard">数据类信息统计</div>
+    <!-- 区级特色信息统计 -->
+    <div class="bigCard">区级特色信息统计</div>
+  </div>
+</template>
+
+<script>
+import card from "@/components/yxgl/card.vue";
+import EchartsDome from "@/components/yxgl/EchartsDome.vue";
+export default {
+  name: "",
+  components: {
+    card,
+    EchartsDome,
+  },
+  data() {
+    return {
+      dateValue: "",
+      shortcuts: this.shortcuts(),
+    };
+  },
+  mounted() {},
+  methods: {
+    shortcuts() {
+      return [
+        {
+          text: "最近7天",
+          value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+            return [start, end];
+          },
+        },
+        {
+          text: "最近30天",
+          value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+            return [start, end];
+          },
+        },
+        {
+          text: "最近90天",
+          value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+            return [start, end];
+          },
+        },
+        {
+          text: "最近1年",
+          value: () => {
+            const end = new Date();
+            const start = new Date();
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
+            return [start, end];
+          },
+        },
+      ];
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.mainBox {
+  width: calc(100% - 60px);
+  margin: 30px;
+  & > div {
+    margin: 20px 0;
+    display: flex;
+    overflow: hidden;
+  }
+  .card {
+    width: calc(25% - 56px);
+    border-radius: 5px;
+    padding: 20px 18px;
+    background: #ffffff;
+  }
+
+  .bigCard {
+    width: calc(100% - 36px);
+    border-radius: 5px;
+    padding: 20px 18px;
+    background: #ffffff;
+    position: relative;
+    flex-direction: column;
+    .tools {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+    &_title {
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+
+  .flex {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .searchBox {
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    flex-direction: row-reverse;
+    display: flex;
+  }
+}
+
+// 日期选择框样式
+.demo-date-picker {
+  display: flex;
+  width: 100%;
+  padding: 0;
+  flex-wrap: wrap;
+}
+
+.demo-date-picker .block {
+  padding: 1.5rem 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  flex: 1;
+  min-width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.demo-date-picker .block:last-child {
+  border-right: none;
+}
+
+.demo-date-picker .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 1rem;
+}
+
+@media screen and (max-width: 1200px) {
+  .demo-date-picker .block {
+    flex: 0 0 100%;
+    padding: 1rem 0;
+    min-width: auto;
+    border-right: none;
+    border-bottom: solid 1px var(--el-border-color);
+  }
+
+  .demo-date-picker .block:last-child {
+    border-bottom: none;
+  }
+}
+</style>