冲突合并

public/static/config/modeConfig.js

@@ -19,16 +19,9 @@ const adapterUrl = "http://10.155.32.4:8011/";
 const showModuleName = 0;
 
 if (localTest) {
-    // baseURL = "http://192.168.10.13:8082/" // 联机调试 - 石林
-    // baseURL = "http://10.155.32.33:9001/" // 联机调试 - 谢生杰
-    baseURL = "http://192.168.10.6:8082/" // 联机调试 - 王昌盛
-
-    tilesUrl = "http://localhost:8080/static/cesium/Assets/Textures/NaturalEarthII";
+    baseURL = "http://192.168.10.5:9002/" // 联机调试 
 } else {
-    baseURL = "http://10.155.32.4:8082/" // 正式环境
-    // baseURL = "http://192.168.1.103:8082/" // 正式环境
-
-    tilesUrl = "http://10.155.32.4:8070/zhfx/new_tiles";
+    baseURL = "http://192.168.1.18:9002/" // 正式环境
 }
 
 websocketUrl = (baseURL.replace(/http:\/\/|https:\/\//g, "")) + "gyee-websocket";

src/api/axios.js

@@ -122,43 +122,55 @@ export function requestData(options) {
       // 请求成功的回调
     },
   });
-
-
  */
-function get(options) {
-  const baseURL = options.baseURL || window.__MODE__.baseURL || '/api/';
-
-  if (options.showLoading) {
-    BASE.showLoading();
-  }
-
-  axios.get(baseURL + options.subUrl)
-    .then(res => {
-      if (res.code === 200) {
-        if (options.showLoading) {
-          BASE.closeLoading();
-        }
-        options.success && options.success(res)
-      } else {
-        if (options.showLoading) {
-          BASE.closeLoading();
-        }
+
+export function request(options) {
+  return new Promise((resolve, reject) => {
+    if (options.showLoading) {
+      BASE.showLoading();
+    }
+    axios({
+      method: options.method || "GET",
+      url: (options.baseURL || window.__MODE__.baseURL) + options.subUrl, 
+      timeout: options.timeout || 30000, // 请求超时时间 - 3s,
+      data: options.data,
+      header: {
+        "Content-Type": "application/json",
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Credentials': 'true'
+      },
+    }).then((response) => {
+      if (options.showLoading) {
+        BASE.closeLoading();
+      }
+      if (response.data.code === 2002) { // 用户类请求错误code (账号密码错误、用户锁定、token过期等)
+  
+        localStorage.removeItem('authToken');
         BASE.showMsg({
-          msg: (res.data && res.data.msg) || ("请求出错[" + res.data.code + "]")
+          msg: (response.data && response.data.msg) || ("请求出错[" + response.data.code + "]")
+        });window.__STATICVUE__.$router.replace('/login');
+  
+      } else if (response.data.code === 200 || response.data.length >= 0 || response.data.records) { // 请求成功 code
+        options.success && options.success(response.data);
+        resolve(response);
+  
+      } else { // 其他code
+        BASE.closeLoading();
+        BASE.showMsg({
+          msg: (response.data && response.data.msg) || ("请求出错[" + response.data.code + "]")
         });
       }
-    }).catch(err => {
+    }).catch(error => {
       if (options.showLoading) {
         BASE.closeLoading();
       }
-      BASE.showMsg({
-        msg: "请求未能完成"
-      });
+      options.fail && options.fail(error);
+      reject(error);
     });
+  })
 }
 
-
 export default {
   requestData,
-  get,
+  request,
 }

src/assets/styles/app.less

@@ -100,3 +100,30 @@
 .pointer {
   cursor: pointer;
 }
+
+.query{
+  display: flex;
+  font-size: 12px;
+  font-family: Arial, "SourceHanSans", "Microsoft YaHei", sans-serif;
+
+  .query-items{
+    display: flex;
+    flex: 0 0 auto;
+
+    .query-item{
+      display: flex;
+      flex: 0 0 auto;
+      margin: 0 1.4815vh;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: nowrap;
+
+      .lable{
+        flex: 0 0 auto;
+        margin-right: 1.4815vh;
+        line-height: 33px;
+        color: #b3bdc0;
+      }
+    }
+  }
+}

src/components/chart/line/multiple-y-line-chart-normal.vue

@@ -239,6 +239,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    default: {
+      type: Boolean,
+      default: false,
+    },
     // 轴
     yAxises: {
       type: Array,
@@ -280,12 +284,17 @@ export default {
         },
       ],
     },
+
+    markLineData: {
+      type: Array,
+      defaylt: () => [],
+    },
   },
   data() {
     return {
       id: "",
       chart: null,
-      color: ["#323E6F", "#1DA0D7", "#05BB4C", "#EDB32F", "#DB5520"],
+      color: ["#1DA0D7", "#05BB4C", "#323E6F", "#EDB32F", "#DB5520"],
     };
   },
   computed: {
@@ -295,9 +304,22 @@ export default {
       });
     },
     xdata() {
-      return this.list[0]?.value.map((t) => {
-        return t.text;
-      });
+      if (this.list.length > 1) {
+        // this.list[1].value.forEach((lEle, lIndex) => {
+        //   console.log(
+        //     this.list[1].value.indexOf(
+        //       this.list[1].value[lIndex].text == "00:00"
+        //     )
+        //   );
+        // });
+        return this.list[1]?.value.map((t) => {
+          return t.text || new Date(t.ts).formatDate("hh:mm:ss");
+        });
+      } else if (this.list.length == 1) {
+        return this.list[0]?.value.map((t) => {
+          return t.text || new Date(t.ts).formatDate("hh:mm:ss");
+        });
+      }
     },
     yAxis() {
       let result = [];
@@ -311,21 +333,18 @@ export default {
           min: item.min,
           max: item.max,
           position: item.position,
-          offset: -15,
+          offset: p[item.position] * 50,
           axisLabel: {
             formatter: "{value}",
             fontSize: 12,
-            textStyle: {
-              color:
-                this.$store.state.themeName === "dark"
-                  ? "rgb(116,124,128)"
-                  : "#000",
-            },
           },
           //分格线
           splitLine: {
             lineStyle: {
-              color: partten.getColor("gray"),
+              color:
+                this.$store.state.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : partten.getColor("black"),
               type: "dashed",
             },
           },
@@ -356,8 +375,34 @@ export default {
           },
           showSymbol: false,
           yAxisIndex: value.yAxisIndex,
+          markLine: this.markLineData
+            ? {
+                name: "",
+                silent: true,
+                label: {
+                  position: "end",
+                  formatter: "",
+                  color: "red",
+                  fontSize: 14,
+                },
+                data: this.markLineData,
+                lineStyle: {
+                  normal: {
+                    type: "dashed",
+                    color: "red",
+                    width: 2,
+                  },
+                },
+              }
+            : {},
           data: value.value.map((t) => {
-            return t.value;
+            if (t.value || t.value === 0) {
+              return t.value;
+            } else if (t.doubleValue || t.doubleValue === 0) {
+              return t.doubleValue;
+            } else {
+              return t.longValue;
+            }
           }),
         });
       });
@@ -374,6 +419,14 @@ export default {
       chart.clear();
 
       chart.setOption(option);
+      if (this.default) {
+        chart.dispatchAction({
+          type: "showTip",
+          seriesIndex: 0, // 显示第几个series
+          dataIndex: this.list[0].value.length - 600, // 显示第几个数据
+        });
+      }
+
       this.resize = function () {
         chart.resize();
       };
@@ -381,20 +434,22 @@ export default {
       window.addEventListener("resize", this.resize);
     },
     option: function () {
+      let themeName = "";
+      this.$store.state.themeName === "dark"
+        ? (themeName = true)
+        : (themeName = false);
       return {
         color: this.color,
         tooltip: {
           trigger: "axis",
-          backgroundColor:
-            this.$store.state.themeName === "dark"
-              ? "rgba(0,0,0,0.4)"
-              : "rgba(255,255,255,0.5)",
-          borderColor:
-            this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
+          triggerOn: this.default ? "click" : "mousemove",
+          alwaysShowContent: true,
+          backgroundColor: themeName
+            ? "rgba(0,0,0,0.4)"
+            : "rgba(255,255,255,0.5)",
+          borderColor: themeName ? partten.getColor("gray") : "#000",
           textStyle: {
-            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
+            color: themeName ? "#fff" : "#000",
             fontSize: 12,
           },
         },
@@ -404,12 +459,9 @@ export default {
           top: "top",
           icon: "circle",
           itemWidth: 6,
-          inactiveColor: partten.getColor("gray"),
+          inactiveColor: themeName ? partten.getColor("gray") : "#000",
           textStyle: {
-            color:
-              this.$store.state.themeName === "dark"
-                ? partten.getColor("grayl")
-                : "#000",
+            color: themeName ? partten.getColor("grayl") : "#000",
             fontSize: 12,
           },
         },
@@ -425,19 +477,39 @@ export default {
             type: "category",
             boundaryGap: false,
             axisLabel: {
+              interval:
+                Number((this.xdata.length / 8).toFixed(0)) > 2
+                  ? Number((this.xdata.length / 8).toFixed(0))
+                  : 0,
+              showMinLabel: true,
+              showMaxLabel: true,
               formatter: "{value}",
               fontSize: 12,
               textStyle: {
-                color:
-                  this.$store.state.themeName === "dark"
-                    ? partten.getColor("gray")
-                    : "#000",
+                color: themeName ? partten.getColor("gray") : "#000",
               },
             },
             data: this.xdata,
           },
         ],
-        yAxis: this.yAxis,
+        yAxis: {
+          type: "value",
+          axisLabel: {
+            formatter: "{value}",
+            fontSize: 14,
+          },
+          axisLine: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#606769",
+              type: "dashed",
+            },
+          },
+        },
+        // yAxis: this.yAxis,
         series: this.series,
       };
     },
@@ -458,7 +530,7 @@ export default {
       this.initChart();
     });
   },
-  updated() {
+  beforeUpdate() {
     this.$nextTick(() => {
       this.initChart();
     });
@@ -466,12 +538,6 @@ export default {
   unmounted() {
     window.removeEventListener("resize", this.resize);
   },
-
-  watch: {
-    "$store.state.themeName"() {
-      this.initChart();
-    },
-  },
 };
 </script>
 
@@ -481,4 +547,4 @@ export default {
   height: 100%;
   display: inline-block;
 }
-</style>
+</style>

src/helper/util.js

@@ -14,23 +14,6 @@ const copy = (obj) => {
     return JSON.parse(JSON.stringify(obj));
 }
 
-const getGeoJson = (name, dataName) => {
-    const dataDefault = require('@/helper/data.js');
-    const dataService = dataDefault.default;
-    const region = dataService.get(dataName);
-    return {
-        type: "Feature",
-        geometry: {
-            type: "MultiPolygon",
-            coordinates: region
-        },
-        properties: {
-            name: name
-        }
-    }
-}
-
-
 // px to vh
 const vh = function (px) {
     return window.innerHeight * px / 1080;
@@ -39,6 +22,5 @@ const vh = function (px) {
 export default {
     newGUID,
     copy,
-    getGeoJson,
     vh
 }

src/router/index.js

@@ -1,41 +1,55 @@
 import {
 	createRouter,
-	createWebHashHistory
+	createWebHashHistory,
 } from "vue-router";
 
 const routes = [
 	{
 		path: "/",
-		redirect: "/welcome"
+		redirect: "/index"
 	},
 	{
 		icon: "menuIcon el-icon el-icon-s-home", // 菜单所用 icon 
-		path: "/welcome", // 菜单 path
+		path: "/index", // 菜单 path
 		name: "首页", // 菜单显示的名称
-		component: () => import("../views/test/page1.vue"),
-		// children: [{
-		// 	icon: "menuIcon el-icon el-icon-copy-document",
-		// 	path: "page3",
-		// 	name: "页面3",
-		// 	component: () => import("../views/test/page3.vue"),
-		// }]
+		component: () => import("../views/layout/home.vue"),
 	},
 	{
-		icon: "menuIcon el-icon el-icon-edit-outline",
-		path: "/page2",
-		name: "页面2",
-		component: () => import("../views/test/page2.vue"),
+		icon: "menuIcon el-icon el-icon-postcard",
+		path: "/sample",
+		name: "样本",
+		component: () => import("../views/fault/router/index.vue"),
+		children: [{
+			path: "fault",
+			name: "故障样本",
+			component: () => import("../views/fault/realfault.vue"),
+		},
+		{
+			path: "diagnose",
+			name: "诊断样本",
+			component: () => import("../views/fault/diagnosefault.vue"),
+		}]
+	},
+	{
+		icon: "menuIcon el-icon el-icon-document",
+		path: "/know",
+		name: "知识库",
+		component: () => import("../views/know/router/index.vue"),
+		children: [{
+			path: "station",
+			name: "故障分类",
+			component: () => import("../views/know/faultcategory.vue"),
+		}]
 	},
 	{
-		icon: "menuIcon el-icon el-icon-edit-outline",
-		path: "/other",
-		name: "其他",
-		component: () => import("../views/test/other.vue"),
+		icon: "menuIcon el-icon el-icon-info",
+		path: "/info",
+		name: "基础配置",
+		component: () => import("../views/basicinfo/router/index.vue"),
 		children: [{
-			icon: "menuIcon el-icon el-icon-copy-document",
-			path: "page3",
-			name: "页面3",
-			component: () => import("../views/test/page3.vue"),
+			path: "station",
+			name: "场站数据",
+			component: () => import("../views/basicinfo/station.vue"),
 		}]
 	},
 	{
@@ -47,7 +61,6 @@ const routes = [
 
 const router = createRouter({
 	history: createWebHashHistory(),
-	base: "/zhfx/",
 	routes
 });
 

src/views/basicinfo/router/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

src/views/basicinfo/station.vue

@@ -0,0 +1,5 @@
+<template>
+     <div>
+          场站
+     </div>
+</template>

src/views/basicinfo/windturbine.vue

@@ -0,0 +1,5 @@
+<template>
+     <div>
+          单台风机
+     </div>
+</template>

src/views/fault/diagnosefault.vue

@@ -0,0 +1,5 @@
+<template>
+     <div>
+          诊断样本
+     </div>
+</template>

src/views/fault/point.vue

@@ -0,0 +1,377 @@
+<template>
+  <el-row type="flex">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">时间：</div>
+          <div class="search-input">
+            <el-date-picker
+              v-model="time"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            >
+            </el-date-picker>
+          </div>
+        </div>
+        <div class="query-item">
+          <div class="lable">等间隔：</div>
+          <div class="search-input">
+            <el-select
+              v-if="!chooseStatus"
+              @change="switchChange(selectValue)"
+              class="inputs"
+              v-model="selectValue"
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in timeoptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+        <div class="query-actions">
+          <!-- <button class="btn" @click="clearDb">重置对标选项</button> -->
+          <button class="btn" @click="dbfx">原数据对标</button>
+        </div>
+      </div>
+    </div>
+  </el-row>
+  <el-row :type="'flex'" class="content mg-b-8">
+    <ComTable
+      :data="tableData"
+      :height="'30vh'"
+      v-loading="tableLoading"
+      ref="curRef"
+      element-loading-text="拼命加载中"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    ></ComTable>
+  </el-row>
+  <el-row :type="'flex'" class="content" :style="{ height: '44vh' }">
+    <el-col :span="24">
+      <multiple-y-line-chart-normal
+        height="45vh"
+        :list="Powertrend"
+        :yAxises="PowertrendYAxises"
+        :showLegend="true"
+        :markLineData="markLineData"/>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+import ComTable from "@/components/coms/table/table.vue";
+import MultipleYLineChartNormal from "../../components/chart/line/multiple-y-line-chart-normal.vue";
+export default {
+  components: {
+    ComTable,
+    MultipleYLineChartNormal,
+  },
+  data() {
+    const that = this;
+    return {
+      Powertrend: [
+        {
+          title: "",
+          yAxisIndex: 0, // 使用单位
+          value: [],
+        },
+      ],
+      PowertrendYAxises: [
+        {
+          name: "",
+          min: 0,
+          max: null,
+          unit: "",
+          position: "left",
+        },
+        {
+          name: "",
+          min: 0,
+          max: 25,
+          unit: "",
+          position: "right",
+        },
+      ],
+      selectValue: "60",
+      timeoptions: [
+        {
+          value: "60",
+          label: "一分钟",
+        },
+        {
+          value: "300",
+          label: "五分钟",
+        },
+        {
+          value: "600",
+          label: "十分钟",
+        },
+        {
+          value: "1800",
+          label: "三十分钟",
+        }
+      ],
+      time: [that.st - 3600 * 1000 * 24, that.st + 1000 * 10 * 60],
+      point: [],
+      pointdes: [],
+
+      pageSize: 20,
+      model: [],
+      station: "",
+      windturbinename: "",
+      isvisiable: false,
+      checkLength: 0, //对标分析只能选择5个
+      tableData: {
+        column: [
+          {
+            name: "",
+            field: "check",
+            is_light: false,
+            width: "50px",
+            template: function () {
+              return "<input class='check curCheckBox' type='CheckBox'/>";
+            },
+            click: function (event, data) {
+              let point = data.point,
+                pointdes = data.pointdes;
+              if (event.target.checked == false && that.checkLength <= 5) {
+                that.point.forEach((item, i) => {
+                  if (item == point) {
+                    that.point.splice(i, 1);
+                    that.pointdes.splice(i, 1);
+                  }
+                });
+                that.checkLength--;
+              } else if (event.target.checked && that.checkLength < 5) {
+                that.point.push(point);
+                that.pointdes.push(pointdes);
+                that.checkLength++;
+              } else if (that.checkLength == 5) {
+                event.target.checked = false;
+              }
+            },
+          },
+          {
+            name: "序号",
+            field: "index",
+            is_light: false,
+            width: "30px",
+          },
+          {
+            name: "测点名称",
+            field: "point",
+            is_light: false,
+            width: "400px",
+          },
+          {
+            name: "测点描述",
+            field: "pointdes",
+            is_light: false,
+            width: "350px",
+          },
+          {
+            name: "操作",
+            is_light: false,
+            width: "250px",
+            template: () => {
+              return "<el-button type='text' style='cursor: pointer;' value='config'>查看原数据</el-button>&nbsp";
+            },
+            click(e, row) {
+              that.onClickOption(e, row);
+            },
+          },
+        ],
+        data: [],
+      },
+    };
+  },
+  props: {
+    data: {
+      type: Array,
+    },
+    st: {
+      type: String,
+    },
+    markLineData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  methods: {
+    onClickOption(e, row) {
+      // 操作按钮
+      let that = this;
+      if ("config" == e.target.getAttribute("value")) {
+        //原始数据
+        that.requestDetailData(
+          [row.point],
+          [row.pointdes],
+          [
+            Date.parse(new Date(that.time[0])),
+            Date.parse(new Date(that.time[1])),
+          ],
+          that.selectValue
+        );
+        that.clearDb();
+      }
+    },
+    list(data) {
+      var that = this;
+      that.tableData.data = [];
+      if (data.length) {
+        for (var i = 0; i < data.length; i++) {
+          let obj = {
+            index: i + 1,
+            windturbineid: data[i].windturbineid,
+            widget: data[i].widget,
+            point: data[i].point,
+            pointdes: data[i].pointdes,
+            model: data[i].model,
+            stationcn: data[i].stationcn,
+          };
+          that.tableData.data.push(obj);
+        }
+        that.requestDetailData(
+          [data[0].point],
+          [data[0].pointdes],
+          [
+            Date.parse(new Date(that.time[0])),
+            Date.parse(new Date(that.time[1])),
+          ],
+          that.selectValue
+        );
+      }
+    },
+    switchChange(interval, status) {
+      if (status === "interval") {
+        this.chooseStatus = false;
+        this.selectValue = "60";
+      } else if (status === "original") {
+        this.chooseStatus = true;
+      }
+    },
+    requestDetailData(point, pointdes, time, interval) {
+      let that = this;
+      let Powertrend = [];
+      let dataPoint = "";
+      pointdes.forEach((ele, index) => {
+        Powertrend.push({
+          title: ele,
+          smooth: true,
+          value: [],
+        });
+      });
+      point.forEach((ele, index) => {
+        dataPoint += ele + ",";
+      });
+      dataPoint = dataPoint.slice(0, dataPoint.length - 1);
+      that.API.requestData({
+        showLoading: true,
+        method: "GET",
+        baseURL: "http://192.168.1.18:9002/",
+        subUrl: "point/item",
+        data: {
+          point: dataPoint,
+          startTs: time[0],
+          endTs: time[1],
+          interval: interval,
+        },
+        success(res) {
+          if (res.data) {
+            res.data.forEach((ele, index) => {
+              ele.list.forEach((cEle) => {
+                Powertrend[index].value.push({
+                  text: new Date(cEle.ts).formatDate("yyyy-MM-dd hh:mm"),
+                  value: cEle.doubleValue,
+                });
+              });
+            });
+            that.Powertrend = Powertrend;
+          }
+        },
+      });
+    },
+    dbfx() {
+      var that = this;
+      if (that.point.length <= 5 && that.point.length != 0) {
+        that.Powertrend = [];
+        that.requestDetailData(
+          that.point,
+          that.pointdes,
+          [
+            Date.parse(new Date(that.time[0])),
+            Date.parse(new Date(that.time[1])),
+          ],
+          that.selectValue
+        );
+      } else {
+        this.BASE.showMsg({
+          type: "warning",
+          msg: "请选择测点后再对标",
+        });
+        return;
+      }
+    },
+    clearDb() {
+      //清空对标状态
+      this.$refs.curRef.clearCheckBox();
+      this.point = [];
+      this.pointdes = [];
+      this.checkLength = 0;
+    },
+  },
+  created() {
+    this.list(this.data);
+  },
+  watch: {
+    selectValue() {
+      this.requestDetailData(
+        this.point,
+        this.pointdes,
+        [
+          Date.parse(new Date(this.time[0])),
+          Date.parse(new Date(this.time[1])),
+        ],
+        this.selectValue
+      );
+    },
+    time(e) {
+      let st = Date.parse(new Date(e[0])),
+        et = Date.parse(new Date(e[1]));
+      if (et - st > 86400000 * 7) {
+        //判断选择日期区间大于一周则重新选择
+        this.BASE.showMsg({
+          type: "warning",
+          msg: "请选择小于7天的日期区间",
+        });
+        return;
+      }
+      this.requestDetailData(
+        this.point,
+        this.pointdes,
+        [
+          Date.parse(new Date(this.time[0])),
+          Date.parse(new Date(this.time[1])),
+        ],
+        this.selectValue
+      );
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.mb10 {
+  margin-bottom: 10px;
+}
+
+.el-select.w {
+  width: 100%;
+}
+</style>

src/views/fault/router/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

src/views/know/faultcategory.vue

@@ -0,0 +1,19 @@
+<template>
+   <div></div>
+</template>
+
+<script>
+import ComTable from "@/components/coms/table/table.vue";
+
+export default {
+ components: {
+    ComTable
+  },
+};
+
+</script>
+
+
+<style lang="less" scoped>
+
+</style>

src/views/know/router/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

src/views/test/page1.vue

@@ -10,7 +10,7 @@ export default {
 
   data() {
     return {
-      info: "这是页面1",
+      info: "这是HOME",
     };
   },
 

src/views/menu/index.vue

@@ -1,5 +1,6 @@
 <template>
   <el-menu
+    class="el-menu-demo el-menu--horizontal el-menu"
     :default-active="$route.path"
     background-color="rgb(4,12,11)"
     text-color="#fff"
@@ -62,4 +63,11 @@ export default {
     },
   },
 };
-</script>
+</script>
+
+<style>
+.el-menu--collapse .el-menu .el-submenu,
+.el-menu--popup {
+  min-width: 150px !important;
+}
+</style>

src/views/test/page2.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="box">
-    {{ info }}
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-
-  data() {
-    return {
-      info: "这是页面2",
-    };
-  },
-
-  created() {},
-
-  mounted() {},
-
-  methods: {},
-};
-</script>
-
-<style lang="less" scoped>
-.box {
-  width: 100%;
-  height: 100%;
-  background: deeppink;
-  font-size: 25px;
-  color: #fff;
-}
-</style>

src/views/test/page3.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="box">
-    {{ info }}
-    <router-view />
-  </div>
-</template>
-
-<script>
-export default {
-  components: {},
-
-  data() {
-    return {
-      info: "这是页面3",
-    };
-  },
-
-  created() {},
-
-  mounted() {},
-
-  methods: {},
-};
-</script>
-
-<style lang="less" scoped>
-.box {
-  width: 100%;
-  height: 100%;
-  background: sienna;
-  font-size: 25px;
-  color: #fff;
-}
-</style>