第一次提交

package.json

@@ -8,6 +8,9 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "element-ui": "^2.15.14",
+    "codemirror": "5",
+    "vue-codemirror": "4.0.6",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"

src/App.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-11 10:01:55
+ * @FilePath: /fangzhen/devls/src/App.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
 <template>
   <div id="app">
-    <nav>
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </nav>
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style lang="scss">
+* {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  width: 100vw;
+  height: 100vh;
 }
+.flex{
+  display: flex;
 
-nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
 }
 </style>

src/components/A.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-12 10:24:01
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-12 15:07:22
+ * @FilePath: /devls/src/components/A.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="A">
+    <div class="text">导入软件</div>
+    <div class="form-box">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="软件名称">
+          <el-input disabled class="long" v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="选择文件">
+          <!-- <el-input v-model="form.name"></el-input> -->
+          <el-button type="primary" @click="btnClick">选择文件</el-button>
+          <input type="file" class="input" ref="inputZ" />
+        </el-form-item>
+        <el-form-item label="软件说明">
+          <el-input
+            type="textarea"
+            class="long"
+            v-model="form.shuoming"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      form: { name: "", shuoming: "" },
+    };
+  },
+  mounted() {
+    this.inputClick();
+  },
+  methods: {
+    btnClick() {
+      this.$refs.inputZ.click();
+    },
+    inputClick() {
+      this.$refs.inputZ.onchange = (e) => {
+        // 文件名字
+        // console.log(e.target.files[0].name);
+        // 第一个文件的详情
+        var file = e.target.files[0];
+
+        this.form.name = e.target.files[0].name;
+        this.form.shuoming = "-";
+
+        // that.name =
+        // 创建读取文件实例 new FileReader()
+        let reader = new FileReader();
+        // readAsText(file,encoding)异步按字符读取文件内容，结果用字符串形式表示
+        reader.readAsText(file, "UTF-8");
+        reader.onload = () => {
+          // let data = this.result;
+          // data就是文件内容
+          // console.log( reader.result)
+          const num = Math.random();
+          let ind;
+          if(num<0.33){
+            ind=0;
+          }else if(num>0.33&& num<0.66){
+            ind=1;
+          }else{
+            ind=2;
+          }
+          console.log(ind);
+
+          this.$emit("codeChange", ind);
+          // this.$emit("codeChange", reader.result);
+        };
+      };
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.A {
+  position: relative;
+  padding-top:25px;
+  padding-left:21px;
+  .text {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 16px;
+    font-weight: bold;
+    letter-spacing: normal;
+    color: #3d3d3d;
+    margin-bottom:20px;
+  }
+}
+.form-box {
+  // padding: 0 28px;
+  // padding-left:7px;
+}
+.long {
+  width: 300px;
+}
+.input {
+  opacity: 0;
+  width: 98px;
+  height: 40px;
+  background: red;
+  // user-select: none;
+  // position:absolute;
+  // left:0px;
+  // cursor: pointer;
+  pointer-events: none;
+}
+</style>

src/components/B.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-12 10:24:01
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-13 15:07:55
+ * @FilePath: /devls/src/components/A.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="A" v-loading="loading">
+    <div class="text">静态分析</div>
+    <div class="form-box">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item class="el-form-item" label="代码大小:">
+          <div>{{ objz.a }} k</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="代码行数:">
+          <div>{{ objz.b }}</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="RAM占用:">
+          <div>{{ objz.c }} k</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="函数总数:">
+          <div>{{ objz.d }}</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="变量总数:">
+          <div>{{ objz.e }}</div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    obj: {
+      type: Object,
+      default: () => {
+        return { a: "-", b: "-", c: "-", d: "-", e: "-" };
+      },
+    },
+  },
+
+  watch: {
+    obj(newD, old) {
+      if (JSON.stringify(newD) == "{}") return;
+
+      this.objz = { ...this.obj };
+      console.log("改变");
+    },
+  },
+  data() {
+    return {
+      form: { name: "", shuoming: "" },
+      objz: {},
+    };
+  },
+  methods: {
+    stops() {
+      this.objz = {};
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.A {
+  position: relative;
+  padding-top: 25px;
+  padding-left: 21px;
+  .text {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 16px;
+    font-weight: bold;
+    letter-spacing: normal;
+    color: #3d3d3d;
+    margin-bottom: 20px;
+  }
+}
+.form-box {
+  // padding: 0 28px;
+  // padding-left:7px;
+}
+.long {
+  width: 300px;
+}
+.el-form-item {
+  margin-bottom: 0px;
+}
+</style>

src/components/C.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-12 10:24:01
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-13 15:07:59
+ * @FilePath: /devls/src/components/A.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="A" v-loading="loading">
+    <div class="text">运行跟踪</div>
+    <div class="form-box">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item class="el-form-item" label="CPU执行:">
+          <div>{{ objz.a }}</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="调用函数:">
+          <div>{{ objz.b }}</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="调用参数:">
+          <div>{{ objz.c }}</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="调用时间:">
+          <div>{{ objz.d }} s</div>
+        </el-form-item>
+
+        <el-form-item class="el-form-item" label="追踪结论:">
+          <div>{{ objz.e }}</div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    obj: {
+      type: Object,
+      default: () => {
+        return { a: "-", b: "-", c: "-", d: "-", e: "运行正常" };
+      },
+    },
+  },
+
+  data() {
+    return {
+      form: { name: "", shuoming: "" },
+      objz: {},
+      timer1: null,
+      timer2: null,
+    };
+  },
+  watch: {
+    obj(newD, old) {
+      if (JSON.stringify(newD) == "{}") return;
+
+      clearInterval(this.timer1);
+      clearInterval(this.timer2);
+      this.objz = { ...this.obj };
+
+      this.timer1 = setInterval(() => {
+        this.objz.a++;
+      }, 500);
+      this.timer2 = setInterval(() => {
+        this.objz.d++;
+      }, 1000);
+    },
+  },
+  mounted() {},
+  beforeDestroy() {
+    console.log("销毁");
+  },
+  methods: {
+    stops() {
+      clearInterval(this.timer1);
+      clearInterval(this.timer2);
+      this.objz = {};
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.A {
+  position: relative;
+  padding-top: 25px;
+  padding-left: 21px;
+  .text {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 16px;
+    font-weight: bold;
+    letter-spacing: normal;
+    color: #3d3d3d;
+    margin-bottom: 20px;
+  }
+}
+.form-box {
+  // padding: 0 28px;
+  // padding-left:7px;
+}
+.long {
+  width: 300px;
+}
+.el-form-item {
+  margin-bottom: 0px;
+}
+</style>

src/components/D.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-12 10:24:01
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-13 15:30:22
+ * @FilePath: /devls/src/components/A.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="A" v-loading="loading">
+    <div class="text">运行跟踪</div>
+    <div class="form-box">
+      <el-form ref="form" :model="form" label-width="100px">
+        <el-form-item class="el-form-item" label="运行时间:">
+          <div>{{ objz.a }} s</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="仿真进度:">
+          <div class="z">
+            <el-progress :percentage="objz.b || 0"></el-progress>
+          </div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    obj: {
+      type: Object,
+      default: () => {
+        return { a: "-", b: "-", c: "-", d: "-", e: "运行正常" };
+      },
+    },
+  },
+
+  data() {
+    return {
+      form: { name: "", shuoming: "" },
+      objz: {},
+      timer1: null,
+      timer2: null,
+    };
+  },
+  watch: {
+    obj(newD, old) {
+      if (JSON.stringify(newD) == "{}") return;
+
+      this.objz = { ...this.obj };
+      this.timer1 = setInterval(() => {
+        if (this.objz.b == 100) {
+          clearInterval(this.timer1);
+          return
+        }
+        this.objz.b++;
+      }, 50);
+      this.timer2 = setInterval(() => {
+        this.objz.a++;
+      }, 1000);
+    },
+  },
+  mounted() {},
+  beforeDestroy() {
+    console.log("销毁");
+  },
+  methods: {
+    stops() {
+      clearInterval(this.timer1);
+      clearInterval(this.timer2);
+      this.objz = {};
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.A {
+  position: relative;
+  padding-top: 25px;
+  padding-left: 21px;
+  padding-right: 150px;
+  .text {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 16px;
+    font-weight: bold;
+    letter-spacing: normal;
+    color: #3d3d3d;
+    margin-bottom: 20px;
+  }
+}
+.form-box {
+  // padding: 0 28px;
+  // padding-left:7px;
+}
+.long {
+  width: 300px;
+}
+.el-form-item {
+  margin-bottom: 0px;
+}
+.z {
+  padding-top: 12px;
+}
+</style>

src/components/E.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-12 10:24:01
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-13 15:07:07
+ * @FilePath: /devls/src/components/A.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="A" v-loading="loading">
+    <div class="text">性能分析</div>
+    <div class="form-box">
+      <el-form ref="form" :model="form" label-width="120px">
+        <el-form-item class="el-form-item" label="RAN实时占用:">
+          <div>{{ objz.a }}</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="CPU使用率:">
+          <div>{{ objz.b }} %</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="堆栈使用情况:">
+          <div>{{ objz.c }} k</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="程序计数器:">
+          <div>{{ objz.d }}</div>
+        </el-form-item>
+
+        <el-form-item class="el-form-item" label="运行时间:">
+          <div>{{ objz.e }} s</div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    obj: {
+      type: Object,
+      default: () => {
+        return { a: "-", b: "-", c: "-", d: "-", e: "运行正常" };
+      },
+    },
+  },
+
+  data() {
+    return {
+      form: { name: "", shuoming: "" },
+      objz: {},
+      timer1: null,
+      timer2: null,
+    };
+  },
+  watch: {
+   obj(newD,old) {
+
+      if (JSON.stringify(newD) == "{}") return;
+
+
+      clearInterval(this.timer1);
+      clearInterval(this.timer2);
+      // this.objz = { ...this.obj };
+
+      const a = Math.floor(Math.random() * 100) / 10;
+
+      const b = 45 + Math.floor(Math.random() * 10);
+      const c = 10.5 + Math.floor(Math.random() * 45) / 10;
+      const d = 0;
+      const e = 0;
+      this.objz = { a, b, c, d, e };
+
+      this.timer1 = setInterval(() => {
+        this.objz.d++;
+      }, 500);
+      this.timer2 = setInterval(() => {
+        this.objz.b = 45 + Math.floor(Math.random() * 10);
+        this.objz.c = 10.5 + Math.floor(Math.random() * 45) / 10;
+        this.objz.e++;
+      }, 1000);
+    },
+  },
+  mounted() {},
+
+  methods: {
+    stops() {
+      console.log('stop')
+      clearInterval(this.timer1);
+      clearInterval(this.timer2);
+      this.objz = {};
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.A {
+  position: relative;
+  padding-top: 25px;
+  padding-left: 21px;
+  .text {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 16px;
+    font-weight: bold;
+    letter-spacing: normal;
+    color: #3d3d3d;
+    margin-bottom: 20px;
+  }
+}
+.form-box {
+  // padding: 0 28px;
+  // padding-left:7px;
+}
+.long {
+  width: 300px;
+}
+.el-form-item {
+  margin-bottom: 0px;
+}
+</style>

src/components/F.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-12 10:24:01
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-13 15:07:43
+ * @FilePath: /devls/src/components/A.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="A" v-loading="loading">
+    <div class="text">运行跟踪</div>
+    <div class="form-box">
+      <el-form ref="form" :model="form" label-width="120px">
+        <el-form-item class="el-form-item" label="警告:">
+          <div>{{ objz.a }}处</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="位置:">
+          <div>{{ objz.b }}</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="错误:">
+          <div>{{ objz.c }}</div>
+        </el-form-item>
+        <el-form-item class="el-form-item" label="内存访问故障:">
+          <div>{{ objz.d }}</div>
+        </el-form-item>
+
+        <el-form-item class="el-form-item" label="诊断结果:">
+          <div>{{ objz.e }}</div>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    obj: {
+      type: Object,
+      default: () => {
+        return { a: "-", b: "-", c: "-", d: "-", e: "运行正常" };
+      },
+    },
+  },
+
+  data() {
+    return {
+      form: { name: "", shuoming: "" },
+      objz: {},
+      timer1: null,
+      timer2: null,
+    };
+  },
+  watch: {
+    obj(newD, old) {
+      if (JSON.stringify(newD) == "{}") return;
+
+      this.objz = { ...this.obj };
+    },
+  },
+  mounted() {},
+  beforeDestroy() {
+    console.log("销毁");
+  },
+  methods: {
+    stops() {
+      clearInterval(this.timer1);
+      clearInterval(this.timer2);
+      this.objz = {};
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.A {
+  position: relative;
+  padding-top: 25px;
+  padding-left: 21px;
+  .text {
+    font-family: Alibaba PuHuiTi 2;
+    font-size: 16px;
+    font-weight: bold;
+    letter-spacing: normal;
+    color: #3d3d3d;
+    margin-bottom: 20px;
+  }
+}
+.form-box {
+  // padding: 0 28px;
+  // padding-left:7px;
+}
+.long {
+  width: 300px;
+}
+.el-form-item {
+  margin-bottom: 0px;
+}
+</style>

src/components/HelloWorld.vue

-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-12 10:12:32
+ * @FilePath: /fangzhen/devls/src/main.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+// import 'vue-codemirror/codemirror/lib/codemirror.css';
+
 
 Vue.config.productionTip = false
+Vue.use(ElementUI);
+
 
 new Vue({
   router,

src/router/index.js

-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-11 11:43:22
+ * @FilePath: /fangzhen/devls/src/router/index.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import Vue from "vue";
+import VueRouter from "vue-router";
 
-Vue.use(VueRouter)
+
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    name: 'home',
-    component: HomeView
+    path: "/",
+    name: "login",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/login.vue"),
   },
   {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
-]
+    path: "/home",
+    name: "home",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/Home.vue"),
+  },
+   {
+    path: "/one",
+    name: "one",
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/one.vue"),
+  },
+];
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;

src/views/AboutView.vue

-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-11 11:42:35
+ * @FilePath: /fangzhen/devls/src/views/Home.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="home flex">
+    <div class="top flex">
+      <div class="l">
+        <img src="~@/assets/homeL.png" alt="" />
+      </div>
+      <div class="r flex">
+        <div class="t">首页</div>
+        <img src="~@/assets/homeR.png" alt="" />
+      </div>
+    </div>
+
+    <div class="box flex">
+      <div class="center flex">
+        <img src="~@/assets/a.png" @click="go1" alt="" />
+        <img src="~@/assets/b.png" @click="go2" alt="" />
+        <img src="~@/assets/c.png" @click="go3" alt="" />
+        <img src="~@/assets/d.png" @click="go4" alt="" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {};
+  },
+  methods: {
+    go1() {
+        this.$router.push("/one");
+
+    },
+    go2() {
+      this.$message({
+        message: "正在开发",
+        type: "warning",
+      });
+    },
+    go3() {
+      this.$message({
+        message: "正在开发",
+        type: "warning",
+      });
+    },
+    go4() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+.home {
+  width: 100%;
+  height: 100%;
+  background: #eeeeee;
+  flex-direction: column;
+
+  .top {
+    width: 100%;
+    height: 90px;
+    background: #357fe7;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 0 20px;
+  }
+  .r {
+    align-items: center;
+    color: #fff;
+    .t {
+      margin-right: 20px;
+      cursor: pointer;
+    }
+  }
+}
+.box {
+  width: 100%;
+  flex: 1;
+  align-items: center;
+  box-sizing: border-box;
+  padding:0 106px;
+}
+.center {
+  width: 1710px;
+  height: 740px;
+  background: #fff;
+  margin: 0 auto;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 110px;
+  img {
+    width: 316px;
+    height: 460px;
+    cursor: pointer;
+  }
+}
+</style>

src/views/HomeView.vue

-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/login.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-11 11:42:10
+ * @FilePath: /fangzhen/devls/src/views/AboutView.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="login flex">
+    <div class="t"></div>
+    <div class="l"></div>
+    <div class="r flex">
+      <div class="a">用户登录</div>
+      <div class="ipt flex">
+        <img src="~@/assets/userr.png" alt="" />
+        <input type="text" v-model="u" placeholder="请输入账号" />
+      </div>
+      <div class="ipt flex">
+        <img src="~@/assets/psw.png" alt="" />
+        <input type="password" v-model="p" placeholder="请输入密码" />
+      </div>
+      <div class="ipt flex">
+        <img src="~@/assets/fff.png" alt="" />
+        <input class="y" type="text" v-model="yz" placeholder="请输入验证码" />
+        <div class="yzm">{{ a }}{{ b }}{{ c }} =？</div>
+      </div>
+
+      <el-button class="big" type="primary" @click="go">登录</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  data() {
+    return {
+      a: 0,
+      b: "+",
+      c: 0,
+      u: "",
+      p: "",
+      yz: "",
+    };
+  },
+  mounted() {
+    this.yzm();
+  },
+  methods: {
+    yzm() {
+      const a = +Math.random() + "";
+      const c = +Math.random() + "";
+      this.a = +a.substring(2, 3);
+      this.c = +c.substring(2, 3);
+    },
+    go() {
+      if (this.yz != this.a + this.c) {
+        this.$message.error("验证码不正确");
+      } else {
+        this.$router.push("/home");
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.login {
+  width: 100%;
+  height: 100%;
+  background: url("~@/assets/bg.png") no-repeat;
+  box-sizing: border-box;
+  padding-top: 263px;
+  .t {
+    width: 395px;
+    height: 72px;
+    top: 61px;
+    left: 71px;
+    position: absolute;
+    background: url("~@/assets/loginT.png") no-repeat;
+  }
+  .l {
+    width: 761px;
+    height: 496px;
+    background: url("~@/assets/loginLeft.png") no-repeat;
+    margin-left: 263px;
+    margin-top: 50px;
+    margin-right: 170px;
+  }
+  .r {
+    width: 466px;
+    height: 556px;
+    border-radius: 8px;
+    background: #ffffff;
+    box-sizing: border-box;
+    border: 1px solid #7794f7;
+    // justify-content: center;
+    align-items: center;
+    padding-top: 60px;
+    flex-direction: column;
+    .a {
+      font-size: 32px;
+      font-weight: normal;
+      line-height: 32px;
+      letter-spacing: normal;
+      color: #333333;
+      margin-bottom: 83px;
+    }
+    .ipt {
+      width: 320px;
+      height: 56px;
+      border-bottom: 1px solid #f0f0f0;
+      align-items: center;
+      margin-bottom: 32px;
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 10px;
+      }
+      input {
+        border: none;
+        outline: none;
+        flex: 1;
+        font-size: 16px;
+      }
+      .yzm {
+        width: 95px;
+        height: 32px;
+        background: #5772d9;
+        text-align: center;
+        line-height: 32px;
+        color: #fff;
+      }
+      // .y {
+      //   padding-left: 32px;
+      // }
+    }
+  }
+  .big {
+    width: 320px;
+  }
+}
+</style>

vue.config.js

-const { defineConfig } = require('@vue/cli-service')
+/*
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2025-06-11 09:19:41
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2025-06-11 09:46:09
+ * @FilePath: /fangzhen/devls/vue.config.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+const { defineConfig } = require("@vue/cli-service");
+// const name = defaultSettings.title || "智慧燃气管理系统"; // 标题
+const path = require("path");
+
+function resolve(dir) {
+  return path.join(__dirname, dir);
+}
 module.exports = defineConfig({
-  transpileDependencies: true
-})
+  transpileDependencies: true,
+  configureWebpack: {
+    // name: name,
+    resolve: {
+      alias: {
+        "@": resolve("src"),
+      },
+    },
+  },
+});

yarn.lock

@@ -1848,6 +1848,13 @@ array-union@^2.1.0:
   resolved "https://mirrors.cloud.tencent.com/npm/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
+async-validator@~1.8.1:
+  version "1.8.5"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
+  integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
+  dependencies:
+    babel-runtime "6.x"
+
 async@^3.2.6:
   version "3.2.6"
   resolved "https://mirrors.cloud.tencent.com/npm/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
@@ -1870,6 +1877,11 @@ autoprefixer@^10.2.4:
     picocolors "^1.1.1"
     postcss-value-parser "^4.2.0"
 
+babel-helper-vue-jsx-merge-props@^2.0.0:
+  version "2.0.3"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
+  integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
+
 babel-loader@^8.2.2:
   version "8.4.1"
   resolved "https://mirrors.cloud.tencent.com/npm/babel-loader/-/babel-loader-8.4.1.tgz#6ccb75c66e62c3b144e1c5f2eaec5b8f6c08c675"
@@ -1911,6 +1923,14 @@ babel-plugin-polyfill-regenerator@^0.6.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.6.4"
 
+babel-runtime@6.x:
+  version "6.26.0"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==
+  dependencies:
+    core-js "^2.4.0"
+    regenerator-runtime "^0.11.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://mirrors.cloud.tencent.com/npm/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -2210,6 +2230,11 @@ clone@^1.0.2:
   resolved "https://mirrors.cloud.tencent.com/npm/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+codemirror@5, codemirror@^5.41.0:
+  version "5.65.19"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/codemirror/-/codemirror-5.65.19.tgz#71016c701d6a4b6e1982b0f6e7186be65e49653d"
+  integrity sha512-+aFkvqhaAVr1gferNMuN8vkTSrWIFvzlMV9I2KBLCWS2WpZ2+UAkZjlMZmEuT+gcXTi6RrGQCkWq1/bDtGqhIA==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://mirrors.cloud.tencent.com/npm/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -2347,6 +2372,11 @@ core-js-compat@^3.40.0, core-js-compat@^3.8.3:
   dependencies:
     browserslist "^4.25.0"
 
+core-js@^2.4.0:
+  version "2.6.12"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.8.3:
   version "3.43.0"
   resolved "https://mirrors.cloud.tencent.com/npm/core-js/-/core-js-3.43.0.tgz#f7258b156523208167df35dea0cfd6b6ecd4ee88"
@@ -2533,7 +2563,7 @@ debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.6:
   dependencies:
     ms "^2.1.3"
 
-deepmerge@^1.5.2:
+deepmerge@^1.2.0, deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://mirrors.cloud.tencent.com/npm/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
@@ -2600,6 +2630,11 @@ detect-node@^2.0.4:
   resolved "https://mirrors.cloud.tencent.com/npm/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
 
+diff-match-patch@^1.0.0:
+  version "1.0.5"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
+  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://mirrors.cloud.tencent.com/npm/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -2698,6 +2733,18 @@ electron-to-chromium@^1.5.160:
   resolved "https://mirrors.cloud.tencent.com/npm/electron-to-chromium/-/electron-to-chromium-1.5.166.tgz#3fff386ed473cc2169dbe2d3ace9592262601114"
   integrity sha512-QPWqHL0BglzPYyJJ1zSSmwFFL6MFXhbACOCcsCdUMCkzPdS9/OIBVxg516X/Ado2qwAq8k0nJJ7phQPCqiaFAw==
 
+element-ui@^2.15.14:
+  version "2.15.14"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/element-ui/-/element-ui-2.15.14.tgz#3c34df79467636592812d720d2e6784e7a6ec2ea"
+  integrity sha512-2v9fHL0ZGINotOlRIAJD5YuVB8V7WKxrE9Qy7dXhRipa035+kF7WuU/z+tEmLVPBcJ0zt8mOu1DKpWcVzBK8IA==
+  dependencies:
+    async-validator "~1.8.1"
+    babel-helper-vue-jsx-merge-props "^2.0.0"
+    deepmerge "^1.2.0"
+    normalize-wheel "^1.0.1"
+    resize-observer-polyfill "^1.5.0"
+    throttle-debounce "^1.0.1"
+
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
@@ -4002,6 +4049,11 @@ normalize-url@^6.0.1:
   resolved "https://mirrors.cloud.tencent.com/npm/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+normalize-wheel@^1.0.1:
+  version "1.0.1"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
+  integrity sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://mirrors.cloud.tencent.com/npm/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -4693,6 +4745,11 @@ regenerate@^1.4.2:
   resolved "https://mirrors.cloud.tencent.com/npm/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
+regenerator-runtime@^0.11.0:
+  version "0.11.1"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
+
 regexpu-core@^6.2.0:
   version "6.2.0"
   resolved "https://mirrors.cloud.tencent.com/npm/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
@@ -4748,6 +4805,11 @@ requires-port@^1.0.0:
   resolved "https://mirrors.cloud.tencent.com/npm/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.1"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -5319,6 +5381,11 @@ thread-loader@^3.0.0:
     neo-async "^2.6.2"
     schema-utils "^3.0.0"
 
+throttle-debounce@^1.0.1:
+  version "1.1.0"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
+  integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
+
 thunky@^1.0.2:
   version "1.1.0"
   resolved "https://mirrors.cloud.tencent.com/npm/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
@@ -5455,6 +5522,14 @@ vary@~1.1.2:
   resolved "https://mirrors.cloud.tencent.com/npm/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
+vue-codemirror@4.0.6:
+  version "4.0.6"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/vue-codemirror/-/vue-codemirror-4.0.6.tgz#b786bb80d8d762a93aab8e46f79a81006f0437c4"
+  integrity sha512-ilU7Uf0mqBNSSV3KT7FNEeRIxH4s1fmpG4TfHlzvXn0QiQAbkXS9lLfwuZpaBVEnpP5CSE62iGJjoliTuA8poQ==
+  dependencies:
+    codemirror "^5.41.0"
+    diff-match-patch "^1.0.0"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.4"
   resolved "https://mirrors.cloud.tencent.com/npm/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"