添加服务申请功能，联调运行管理页面服务调用接口

src/api/wgn.js

@@ -7,10 +7,15 @@ const getDmsData = (params) => {
     return postform(systemConfig.dmsDataProxy + "/content/selectContentList", params)
 }
 
+const addDmsData = () => {
+    return postform(systemConfig.dmsDataProxy + "/content/addContent", params)
+}
+
 const topology = (url, params) => {
     return postBody(systemConfig.baseServicerPath + url, params)
 }
 export default {
     getDmsData,
+    addDmsData,
     topology,
 }

src/components/yxgl/EchartsDome.vue

@@ -16,11 +16,13 @@ export default {
     },
     chartOption: {
       type: Object,
-      default: {},
+      default: () => ({}), // 使用函数返回默认对象
     },
   },
   data() {
-    return {};
+    return {
+      chartInstance: null, // 保存ECharts实例引用
+    };
   },
   mounted() {
     this.$nextTick(() => {
@@ -29,37 +31,64 @@ export default {
   },
   watch: {
     chartOption: {
-      handler(newVal, oldVal) {
-        if (newVal.length > 0) {
-          this.initChart();
+      handler(newVal) {
+        // 检查是否为有效对象
+        if (newVal && typeof newVal === "object") {
+          this.updateChart(newVal);
         }
       },
       deep: true,
+      immediate: true, // 立即执行一次
     },
   },
   methods: {
     initChart() {
-      let chartDom = echarts.init(this.$refs.chartContainer);
-      if (this.chartOption) {
-        // 绘制图表
-        this.chartOption.grid = {
-          top: 80,
-          left: 10, // 核心1：grid左侧距离容器左侧0px
-          right: 50, // 核心2：grid右侧距离容器右侧0px
-          bottom: 0,
-          containLabel: true, // 关键：防止坐标轴标签超出容器（可选，根据需求添加）
+      // 如果已存在实例，先销毁
+      if (this.chartInstance) {
+        this.chartInstance.dispose();
+      }
+
+      // 创建新实例
+      this.chartInstance = echarts.init(this.$refs.chartContainer);
+
+      // 更新图表配置
+      this.updateChart(this.chartOption);
+    },
+
+    updateChart(option) {
+      if (!this.chartInstance || !option || typeof option !== "object") return;
+
+      // 深拷贝配置，避免修改原始props
+      const mergedOption = JSON.parse(JSON.stringify(option));
+
+      // 添加默认grid配置（不直接修改原始配置）
+      mergedOption.grid = mergedOption.grid || {
+        top: 80,
+        left: 10,
+        right: 50,
+        bottom: 0,
+        containLabel: true,
+      };
+
+      // 添加默认legend配置
+      if (mergedOption.legend) {
+        // 如果已有legend配置，合并默认文本样式
+        mergedOption.legend.textStyle = {
+          color: "#F2F3F5",
+          fontWeight: "normal",
+          ...mergedOption.legend.textStyle,
         };
-        if (!this.chartOption.legend) {
-          this.chartOption.legend = {};
-        }
-        Object.assign(this.chartOption.legend, {
-          textStyle: {
-            color: "#F2F3F5", // 字体颜色（支持十六进制、RGB、颜色名）
-            fontSize: 14, // 可选：字体大小
-            fontWeight: "normal", // 可选：字体粗细
-          },
-        });
-        chartDom.setOption(this.chartOption);
+      }
+
+      // 设置图表配置
+      this.chartInstance.setOption(mergedOption, true);
+    },
+
+    destroyChart() {
+      // 销毁ECharts实例
+      if (this.chartInstance) {
+        this.chartInstance.dispose();
+        this.chartInstance = null;
       }
     },
   },

src/components/yxgl/table.vue

@@ -1,21 +1,19 @@
 <template>
   <div class="table_box">
     <div class="table_title">{{ title }}</div>
-    <div class="table_more">
+    <!-- <div class="table_more">
       <el-button type="primary" link> 更多 </el-button>
-    </div>
+    </div> -->
     <el-table
       :data="tableData"
       style="width: 100%; background-color: #00000032"
-      height="calc(100% - 60px)"
+      height="calc(100% - 20px)"
     >
-      <el-table-column prop="serviceName" label="服务名称" width="300" />
+      <el-table-column prop="serviceName" label="服务名称" />
       <el-table-column prop="serviceType" label="类别" width="300" />
       <el-table-column prop="callCount" label="调用次数" width="480" />
-      <el-table-column prop="successRate" label="成功率" width="180" />
-      <el-table-column prop="avgResponseTime" label="平均响应" />
     </el-table>
-    <div class="table_pagination">
+    <!-- <div class="table_pagination">
       <el-pagination
         v-model:current-page="currentPage"
         v-model:page-size="pageSize"
@@ -26,7 +24,7 @@
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
       />
-    </div>
+    </div> -->
   </div>
 </template>
 

src/main.js

@@ -20,6 +20,9 @@ initApp.component('JsonViewer', JsonViewer)
 import VueJsonEditor from 'vue-json-editor'
 initApp.component('VueJsonEditor', VueJsonEditor)
 
+import moment from 'moment';
+initApp.config.globalProperties.$moment = moment;
+
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
     initApp.component(key, component)
 }

src/views/Wgn.vue

@@ -70,12 +70,68 @@
           </div>
         </div>
       </div>
+      <!-- 申请使用微功能服务的表单弹窗 -->
+      <el-dialog
+        title="申请使用微功能服务"
+        v-model="showFrom"
+        width="60%"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :show-close="true"
+      >
+        <el-form :model="column.from" :rules="rules" ref="formRef" label-width="120px">
+          <el-form-item label="应用名称" prop="c_application_name">
+            <el-input
+              v-model="column.from.c_application_name"
+              placeholder="请输入应用名称"
+            />
+          </el-form-item>
+          <el-form-item label="接口路径" prop="c_interface_path">
+            <el-input
+              v-model="column.from.c_interface_path"
+              disabled
+              placeholder="请输入接口路径"
+            />
+          </el-form-item>
+          <el-form-item label="联系电话" prop="c_phone">
+            <el-input v-model="column.from.c_phone" placeholder="请输入联系电话" />
+          </el-form-item>
+          <el-form-item label="单位名称" prop="c_unit_name">
+            <el-input v-model="column.from.c_unit_name" placeholder="请输入单位名称" />
+          </el-form-item>
+          <el-form-item label="部门名称" prop="c_department">
+            <el-input v-model="column.from.c_department" placeholder="请输入部门名称" />
+          </el-form-item>
+          <!-- 项目负责人 -->
+          <el-form-item label="项目负责人" prop="c_business_leader">
+            <el-input
+              v-model="column.from.c_business_leader"
+              placeholder="请输入项目负责人"
+            />
+          </el-form-item>
+          <!-- 申请使用微功能服务的详细信息 -->
+          <el-form-item label="申请使用微功能服务的详细信息" prop="content">
+            <el-input
+              type="textarea"
+              v-model="column.from.content"
+              placeholder="请输入申请使用微功能服务的详细信息"
+            />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="showFrom = false">取消</el-button>
+            <el-button type="primary" @click="handleApplySubmit">确定</el-button>
+          </div>
+        </template>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script>
 import wgn from "@/api/wgn";
+import api from "@/api/content";
 export default {
   name: "微功能服务",
   data() {
@@ -86,6 +142,59 @@ export default {
       dmsServerList: [],
       // DMS数据代理地址
       dmsDataProxy: "",
+      // 是否显示申请使用微功能服务的表单弹窗
+      showFrom: false,
+      // 申请使用微功能服务的表单验证规则
+      rules: {
+        c_application_name: [
+          { required: true, message: "请输入应用名称", trigger: "blur" },
+        ],
+        c_interface_path: [
+          { required: true, message: "请输入接口路径", trigger: "blur" },
+        ],
+        c_business_leader: [
+          { required: true, message: "请输入项目负责人", trigger: "blur" },
+        ],
+        // 添加手机号正则验证
+        c_phone: [
+          { required: true, message: "请输入联系电话", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              // 手机号正则验证
+              let phoneRegex = /^1[3456789]\d{9}$/;
+              if (!phoneRegex.test(value)) {
+                callback(new Error("请输入正确的手机号"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        c_unit_name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
+        c_department: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
+      },
+      // 申请使用微功能服务的表单数据
+      column: {
+        columnId: 1665,
+        modelId: 1677,
+        from: {
+          // 备注：申请使用微功能服务的详细信息，非必填
+          content: "",
+          // 项目负责人，必填
+          c_business_leader: "",
+          // 应用名称,必填
+          c_application_name: "",
+          // 接口路径，必填
+          c_interface_path: "",
+          // 联系电话，必填
+          c_phone: "",
+          // 单位名称，必填
+          c_unit_name: "",
+          // 部门名称，必填
+          c_department: "",
+        },
+      },
     };
   },
   mounted() {
@@ -136,21 +245,58 @@ export default {
     },
     // 申请使用微功能服务
     handleApply(item) {
-      this.$confirm("确认申请使用" + item.title + "吗？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning",
-      })
-        .then(() => {
-          // 确认申请使用
-          this.$message({
-            message: "申请使用" + item.title + "？等url吧！",
-            type: "success",
+      // 申请使用微功能服务时，先从localStorage中获取数据，填充到表单中
+      let applyInfo = localStorage.getItem("wgnApplyInfo");
+      if (applyInfo) {
+        this.column.from = JSON.parse(applyInfo);
+      }
+      // 先打开弹窗，显示from表单，用户输入表单数据并提交
+      this.column.from.c_interface_path = item.c_url;
+      this.showFrom = true;
+    },
+    // 提交申请使用微功能服务表单
+    handleApplySubmit() {
+      let that = this;
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          // 提交时把信息添加到localStorage中,下次打开弹窗时，从localStorage中获取数据，填充到表单中
+          localStorage.setItem("wgnApplyInfo", JSON.stringify(that.column.from));
+          // 标题：电话+时间
+          that.column.from.title =
+            that.column.from.c_unit_name +
+            "_" +
+            that.column.from.c_business_leader +
+            "_" +
+            that.column.from.c_phone;
+          // 备注：申请使用微功能服务的详细信息
+          let params = {
+            content: JSON.stringify(that.column.from),
+            columnId: that.column.columnId,
+            modelId: that.column.modelId,
+          };
+          api.addContent(params).then((res) => {
+            if (res.code === 200) {
+              // 确认申请使用
+              that.$message({
+                message: "申请成功，请等待审核通过后工作人员专人联系，请保持电话通畅！",
+                type: "success",
+              });
+              that.showFrom = false;
+            } else {
+              that.$message({
+                message: "申请使用" + item.title + "失败" + res.msg,
+                type: "error",
+              });
+            }
           });
-        })
-        .catch(() => {
-          // 取消申请使用
-        });
+        } else {
+          // 表单验证失败，提示用户填写完整信息
+          that.$message({
+            message: "请填写完整信息",
+            type: "warning",
+          });
+        }
+      });
     },
     // 在线演示微功能服务
     handleOnlineDemo(item) {

src/views/Yxgl.vue

@@ -11,7 +11,7 @@
       <el-sub-menu index="/#">
         <template #title>
           <el-icon><Platform /></el-icon>
-          <span>运行中心</span>
+          <span>信息反馈子系统</span>
         </template>
         <el-menu-item index="StatisticalAnalysis">
           <el-icon><Histogram /></el-icon>
@@ -21,7 +21,7 @@
       <el-sub-menu index="2">
         <template #title>
           <el-icon><Tools /></el-icon>
-          <span>管理中心</span>
+          <span>运行管理子系统</span>
         </template>
         <el-menu-item index="oauth">
           <el-icon><UserFilled /></el-icon>

src/views/yxgl/StatisticalAnalysis.vue

@@ -19,7 +19,7 @@
     <div class="flex">
       <card
         class="card flex"
-        :title="'服务机构总数'"
+        :title="'委办总数'"
         :value="8"
         :growth="'较上个月增长了12%'"
         iconColor="#2563db"
@@ -27,7 +27,7 @@
       />
       <card
         class="card flex"
-        :title="'服务总数'"
+        :title="'系统总数'"
         :value="100"
         :growth="'较上个月下降了12%'"
         iconColor="#16a34a"
@@ -35,7 +35,7 @@
       />
       <card
         class="card flex"
-        :title="'服务调用总次数'"
+        :title="'服务总数'"
         :value="1000"
         :growth="'较上个月增长了12%'"
         iconColor="#9333ea"
@@ -43,7 +43,7 @@
       />
       <card
         class="card flex"
-        :title="'服务类别数量'"
+        :title="'服务调用总数'"
         :value="10"
         :growth="'与上月持平'"
         iconColor="#ca8a04"
@@ -74,26 +74,26 @@
         </div>
       </div>
       <div style="width: 100%; height: 400px">
-        <Table title="服务调用" :tableData="tableDatas" />
+        <Table title="服务调用TOP10" :tableData="tableDatas" />
       </div>
     </div>
-    <!-- 用户信息统计 -->
+    <!-- 委办信息统计 -->
     <div class="bigCard">
-      <div class="bigCard_title">用户信息统计</div>
+      <div class="bigCard_title">委办信息统计</div>
       <div class="flex">
         <div style="width: 28%; height: 400px">
-          <EchartsDome :chartOption="chartOptions['用户角色分布']" title="用户角色分布" />
+          <EchartsDome :chartOption="chartOptions['委办分布']" title="委办分布" />
         </div>
         <div style="width: 68%; height: 400px">
           <EchartsDome
-            :chartOption="chartOptions['用户活跃度趋势']"
-            title="用户活跃度趋势"
+            :chartOption="chartOptions['服务调用趋势（近30天）']"
+            title="委办活跃度趋势"
           />
         </div>
       </div>
-      <div style="width: 100%; height: 400px">
+      <!-- <div style="width: 100%; height: 400px">
         <EchartsDome :chartOption="chartOptions['用户部门分布']" title="用户部门分布" />
-      </div>
+      </div> -->
     </div>
     <!-- 应用类信息统计 -->
     <div class="bigCard">
@@ -167,6 +167,7 @@
 import card from "@/components/yxgl/card.vue";
 import EchartsDome from "@/components/yxgl/EchartsDome.vue";
 import Table from "@/components/yxgl/table.vue";
+import { totalCountGroupByTime } from "@/api/count";
 export default {
   name: "",
   components: {
@@ -176,151 +177,140 @@ export default {
   },
   data() {
     return {
-      dateValue: "",
+      // 比较的时间范围(默认60天到30天前，主要跟dateValue有关系)
+      compareTimes: [
+        new Date(new Date().setTime(new Date() - 3600 * 1000 * 24 * 60)),
+        new Date(new Date().setTime(new Date() - 3600 * 1000 * 24 * 30)),
+      ],
+      // 当前选中的时间范围
+      dateValue: [
+        new Date(new Date().setTime(new Date() - 3600 * 1000 * 24 * 30)),
+        new Date(),
+      ],
       shortcuts: this.shortcuts(),
       chartOptions: {},
       tableDatas: [],
     };
   },
-  mounted() {
-    let datas = [
-      { value: 1048, name: "调用次数", value2: 3, date: "12/17" },
-      { value: 735, name: "平均响应时间", value2: 3, date: "12/18" },
-    ];
-
-    let datas2 = [
-      {
-        value: 20,
-        name: "业务数据",
-        children: [
-          { value: 7, name: "交通数据" },
-          { value: 5, name: "环保数据" },
-          { value: 5, name: "水务数据" },
-          { value: 3, name: "教育数据" },
-        ],
-      },
-      {
-        value: 13,
-        name: "基础数据",
-        children: [
-          { value: 5, name: "人口数据" },
-          { value: 5, name: "地理数据" },
-          { value: 3, name: "企业数据" },
-        ],
-      },
-      {
-        value: 9,
-        name: "专题数据",
-        children: [
-          { value: 4, name: "规划数据" },
-          { value: 3, name: "医疗数据" },
-          { value: 2, name: "文旅数据" },
-        ],
+  watch: {
+    dateValue: {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal && newVal.length > 0) {
+          this.initChart();
+          // 要先算出来dateValue的开始时间，和范围天数。然后根据范围天数，计算出比较的时间。其中dateValue的开始时间是比较时间的结束时间，比较的开始时间是比较时间的结束时间减去范围天数。
+          // 计算出比较的时间范围
+          this.compareTimes = [
+            new Date(
+              new Date(newVal[0]).setTime(
+                new Date(newVal[0]).getTime() - 3600 * 1000 * 24 * (newVal[1] - newVal[0])
+              )
+            ),
+            new Date(newVal[0]),
+          ];
+        }
       },
-    ];
+      deep: true,
+      immediate: true,
+    },
+  },
+  mounted() {},
+  methods: {
+    initChart() {
+      let datas = [
+        { value: 1048, name: "调用次数", value2: 3, date: "12/17" },
+        { value: 735, name: "平均响应时间", value2: 3, date: "12/18" },
+      ];
 
-    this.dataToOption("数据类别分布", "sunburst", datas2, null);
-    this.dataToOption("数据质量评分", "radar", datas2, null);
-    this.dataToOption("服务调用趋势（近30天）", "line", datas, {
-      xData: [],
-      xKey: "date",
-      yAxis: [
-        {
-          type: "value",
-          name: "调用次数",
-          axisLine: { lineStyle: { color: "#42a5f5" } }, // 区分样式
-        },
-        {
-          type: "value",
-          name: "响应时间（ms）",
-          axisLine: { lineStyle: { color: "#4caf50" } }, // 区分样式
-          position: "right",
-        },
-      ],
-      yData: [
-        {
-          key: "value",
-          name: "调用次数",
-          color: "#42a5f5",
-          data: [],
-          yAxisIndex: 0,
-        },
-        {
-          key: "value2",
-          name: "响应时间（ms）",
-          color: "#4caf50",
-          data: [],
-          ifDashed: true,
-          yAxisIndex: 1,
-        },
-      ],
-    });
-    this.dataToOption("用户活跃度趋势", "line", datas, {
-      xData: [],
-      xKey: "date",
-      yData: [
-        {
-          key: "value",
-          name: "调用次数",
-          color: "#42a5f5",
-          data: [],
-        },
-        {
-          key: "value2",
-          name: "响应时间（ms）",
-          color: "#4caf50",
-          data: [],
-        },
-      ],
-    });
+      // 根据时间返回服务调用趋势（近30天）
+      totalCountGroupByTime(this.dateValue[0], this.dateValue[1]).then((res) => {
+        if (res) {
+          const sortAsc = [...res].sort((a, b) => a.time - b.time);
+          this.dataToOption("服务调用趋势（近30天）", "line", [...sortAsc], {
+            legend: { data: ["调用次数"] },
+            xData: [],
+            xKey: "time",
+            xFormart: "YYYY-MM-DD",
+            yAxis: {
+              type: "value",
+              name: "调用次数",
+              axisLine: { lineStyle: { color: "#42a5f5" } }, // 区分样式
+            },
+            yData: {
+              key: "count",
+              name: "调用次数",
+              color: "#42a5f5",
+              data: [],
+              yAxisIndex: 0,
+            },
+          });
+        }
+      });
 
-    this.dataToOption("服务类别分布", "pie", datas, {
-      pieKey: { value: "value", name: "name" },
-      pieData: [],
-    });
+      // timeCheckers拼接时间参数，topUnit添加一个，然后修改查询字段：c_unit，修改成c_path
+      this.dataToOption("服务类别分布", "pie", datas, {
+        pieKey: { value: "value", name: "name" },
+        pieData: [],
+      });
 
-    this.dataToOption("用户角色分布", "pie", datas, {
-      pieKey: { value: "value", name: "name" },
-      pieData: [],
-      legend: {
-        bottom: 10,
-      },
-      radius: "60%",
-      padAngle: 0,
-      borderRadius: 0,
-      label: {},
-    });
-    this.dataToOption("用户部门分布", "bar", datas, {
-      showLegend: false,
-      xData: [],
-      xKey: "date",
-      yData: [
-        {
+      this.dataToOption("委办分布", "pie", datas, {
+        pieKey: { value: "value", name: "name" },
+        pieData: [],
+        legend: {
+          bottom: 10,
+        },
+        radius: "60%",
+        padAngle: 0,
+        borderRadius: 0,
+        label: {},
+      });
+      this.dataToOption("用户部门分布", "bar", datas, {
+        showLegend: false,
+        xData: [],
+        xKey: "date",
+        yData: {
           key: "value",
           name: "调用次数",
           color: "#42a5f5",
           data: [],
         },
-      ],
-    });
-    // 表格数据初始化
-    this.initTableDatas();
-  },
-  methods: {
-    dataToOption(title, type, datas, keyRule) {
+      });
+      this.dataToOption("数据类别分布", "pie", datas, {
+        pieKey: { value: "value", name: "name" },
+        pieData: [],
+        legend: {
+          bottom: 10,
+        },
+        radius: "60%",
+        padAngle: 0,
+        borderRadius: 0,
+        label: {},
+      });
+      this.dataToOption("数据质量评分", "radar", null, null);
+      // 表格数据初始化
+      this.initTableDatas();
+    },
+    /**
+     * 数据转换为图表选项
+     * @param title 图表标题
+     * @param type 图表类型
+     * @param datas 原始数据
+     * @param keyRule 解析规则
+     */
+    async dataToOption(title, type, datas, keyRule) {
       // 根据规则解析数据
       if (keyRule) {
         datas.forEach((item) => {
           // 有的图表没有X轴
           if (keyRule.xKey) {
+            if (keyRule.xFormart) {
+              item[keyRule.xKey] = this.$moment(item[keyRule.xKey]).format(
+                keyRule.xFormart
+              );
+            }
             keyRule.xData.push(item[keyRule.xKey]);
           }
           if (keyRule.yData) {
-            keyRule.legend = [];
-            keyRule.yData.forEach((dataItem) => {
-              dataItem.data.push(item[dataItem.key]);
-              keyRule.legend.push(dataItem.name);
-            });
+            keyRule.yData.data.push(item[keyRule.yData.key]);
           }
           if (keyRule.pieKey) {
             keyRule.pieData.push({
@@ -336,7 +326,7 @@ export default {
           // 折线图基础
           _option = {
             legend: {
-              data: keyRule.legend,
+              data: keyRule.legend.data,
             },
             tooltip: {
               show: true,
@@ -351,26 +341,22 @@ export default {
               splitLine: { show: false }, // 隐藏分割线
             },
             yAxis: keyRule.yAxis ? keyRule.yAxis : { type: "value" },
-            series: [],
+            series: [
+              {
+                name: keyRule.yData.name,
+                type: "line",
+                smooth: true,
+                data: keyRule.yData.data,
+                lineStyle: {
+                  color: keyRule.yData.color ? keyRule.yData.color : "",
+                  type: keyRule.yData.ifDashed ? "dashed" : "",
+                }, // 蓝色线条
+                itemStyle: keyRule.yData.color,
+                symbol: "circle", // 节点形状
+                symbolSize: 6, // 节点大小
+              },
+            ],
           };
-          // 补充数据
-          keyRule.yData.forEach((item) => {
-            // 补充server
-            _option.series.push({
-              name: item.name,
-              type: "line",
-              smooth: true,
-              data: item.data, // 模拟数据
-              lineStyle: {
-                color: item.color ? item.color : "",
-                type: item.ifDashed ? "dashed" : "",
-              }, // 蓝色线条
-              itemStyle: item.color ? { color: item.color } : {}, // 节点颜色
-              symbol: "circle", // 节点形状
-              symbolSize: 6, // 节点大小
-              yAxisIndex: item.yAxisIndex != undefined ? item.yAxisIndex : 0, // 绑定Y轴
-            });
-          });
           break;
         case "pie":
           // 饼状图
@@ -438,36 +424,19 @@ export default {
               type: "category",
               data: keyRule.xData,
             },
-            series: [],
-          };
-          keyRule.yData.forEach((item) => {
-            _option.series.push({
-              name: item.name,
-              type: "bar",
-              label: {
-                show: true,
-              },
-              emphasis: {
-                focus: "series",
-              },
-              data: item.data,
-            });
-          });
-          break;
-        case "sunburst":
-          // 旭日图
-          _option = {
-            series: {
-              type: "sunburst",
-              emphasis: {
-                focus: "ancestor",
-              },
-              data: datas,
-              radius: [0, "90%"],
-              label: {
-                rotate: "radial",
+            series: [
+              {
+                name: keyRule.yData.name,
+                type: "bar",
+                label: {
+                  show: true,
+                },
+                emphasis: {
+                  focus: "series",
+                },
+                data: keyRule.yData.data,
               },
-            },
+            ],
           };
           break;
         default:
@@ -483,8 +452,8 @@ export default {
             radar: [
               {
                 indicator: [
+                  { text: "健壮性", max: 100 },
                   { text: "完整性", max: 100 },
-                  { text: "可用性", max: 100 },
                   { text: "一致性", max: 100 },
                   { text: "及时性", max: 100 },
                   { text: "准确性", max: 100 },
@@ -497,12 +466,8 @@ export default {
                 areaStyle: {},
                 data: [
                   {
-                    value: [85, 90, 90, 95, 95],
-                    name: "A Phone",
-                  },
-                  {
-                    value: [95, 80, 95, 90, 93],
-                    name: "Another Phone",
+                    value: [93, 85, 92, 95, 93],
+                    name: "",
                   },
                 ],
               },
@@ -519,22 +484,16 @@ export default {
           serviceName: "服务A",
           serviceType: "类别A",
           callCount: 100,
-          successRate: "90%",
-          avgResponseTime: "100ms",
         },
         {
           serviceName: "服务B",
           serviceType: "类别B",
           callCount: 200,
-          successRate: "80%",
-          avgResponseTime: "150ms",
         },
         {
           serviceName: "服务C",
           serviceType: "类别C",
           callCount: 300,
-          successRate: "70%",
-          avgResponseTime: "200ms",
         },
       ];
     },

vue.config.js

@@ -96,7 +96,10 @@ module.exports = defineConfig({
         }
       },
       '/oneMap/': {
-        target: 'http://127.0.0.1:10099/qpyzt',
+        // 本地环境
+        // target: 'http://127.0.0.1:10099/qpyzt',
+        // 线上环境
+        target: 'http://121.43.55.7:13901/qpyzt',
         changeOrigin: true,
         pathRewrite: {
           '^/oneMap': ''