静态页面

.env.development

@@ -8,12 +8,12 @@ VITE_APP_PORT = 3005
 VITE_APP_BASE_API = '/dev-api'
 
 # 上传文件接口地址
-VITE_APP_UPLOAD_URL = 'http://10.88.11.201:9000'
+VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 
 # 开发接口地址
-VITE_APP_API_URL = 'http://192.168.101.178:8079'
+VITE_APP_API_URL = 'http://192.168.101.4:8079'
 # Websocket地址
-VITE_WEBSOCKET_URL = 'ws://192.168.101.178:8079'
+VITE_WEBSOCKET_URL = 'ws://192.168.101.4:8079'
 ``
 # 是否启用 Mock 服务
 VITE_MOCK_DEV_SERVER = false

src/router/modules/process.ts

@@ -131,6 +131,15 @@ export default {
             keepAlive: true,
           },
         },
+        {
+          path: "zhiyin",
+          component: () => import("@/views/pro-steps/components/zhiyin.vue"),
+          name: "Zhiyin",
+          meta: {
+            back: true,
+            keepAlive: true,
+          },
+        },
       ],
     },
     {

src/views/pro-steps/components/zhiyin.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="body">
+    <div class="left">
+      <div style="margin-bottom: 20px">
+        <el-button type="info" @click="reset"> 重置页面 </el-button>
+      </div>
+
+      <el-table
+        :data="tableData1"
+        style="margin-bottom: 20px"
+        class="tableView"
+        :span-method="objectSpanMethod1"
+        border
+      >
+        <el-table-column prop="a" label="序号" align="center" />
+        <el-table-column prop="b" label="起始端" align="center" />
+        <el-table-column prop="c" label="连接端" align="center" />
+        <el-table-column prop="d" label="标识" align="center" />
+        <el-table-column prop="e" label="定义" align="center" />
+        <el-table-column prop="f" label="线号" align="center" />
+        <el-table-column prop="g" label="线色" align="center" />
+        <el-table-column
+          label="连接状态"
+          width="120"
+          fixed="right"
+          align="center"
+        >
+          <template #default="scope">
+            <el-button
+              type="success"
+              @click="status1 = true"
+              :disabled="status1"
+            >
+              完成
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-table
+        :data="tableData2"
+        v-if="status1"
+        border
+        class="tableView"
+        :span-method="objectSpanMethod2"
+      >
+        <el-table-column prop="a" label="序号" align="center" />
+        <el-table-column prop="b" label="起始端" align="center" />
+        <el-table-column prop="c" label="连接端" align="center" />
+        <el-table-column prop="d" label="标识" align="center" />
+        <el-table-column prop="e" label="定义" align="center" />
+        <el-table-column prop="f" label="线号" align="center" />
+        <el-table-column prop="g" label="线色" align="center" />
+        <el-table-column
+          label="连接状态"
+          width="120"
+          fixed="right"
+          align="center"
+        >
+          <template #default="scope">
+            <el-button type="primary" @click="status3 = true" v-if="!status3">
+              开始
+            </el-button>
+            <el-button
+              v-else
+              type="success"
+              @click="status2 = true"
+              :disabled="status2"
+            >
+              完成
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="right">
+      <el-image
+        :src="url"
+        :zoom-rate="1.2"
+        :max-scale="7"
+        :min-scale="0.2"
+        :preview-src-list="srcList"
+        :initial-index="initialIndex"
+        fit="contain"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const reset = () => {
+  status1.value = false;
+  status2.value = false;
+  status3.value = false;
+};
+const status1 = ref(false);
+const status2 = ref(false);
+const status3 = ref(false);
+const initialIndex = ref(0);
+const tableData1 = ref([
+  {
+    a: "1",
+    b: "X2-5",
+    c: "X7-1",
+    d: "-",
+    e: "-",
+    f: "L05",
+    g: "蓝",
+  },
+  {
+    a: "2",
+    b: "X2-15",
+    c: "X7-2",
+    d: "-",
+    e: "-",
+    f: "L15",
+    g: "蓝",
+  },
+]);
+const tableData2 = ref([
+  {
+    a: "3",
+    b: "X2-1",
+    c: "X4-6",
+    d: "-",
+    e: "-",
+    f: "L01",
+    g: "黑",
+  },
+  {
+    a: "4",
+    b: "X2-9",
+    c: "X4-7",
+    d: "-",
+    e: "-",
+    f: "L09",
+    g: "黑",
+  },
+  {
+    a: "5",
+    b: "X2-10",
+    c: "X4-8",
+    d: "-",
+    e: "-",
+    f: "L10",
+    g: "黑",
+  },
+]);
+const url = ref("/images/bz1.png");
+const srcList = ref([
+  "/images/bz1.png",
+  "/images/bz2.png",
+  "/images/bz3.png",
+  "/images/bz4.png",
+]);
+const objectSpanMethod1 = ({ row, column, rowIndex, columnIndex }) => {
+  if (columnIndex === 7) {
+    if (rowIndex % 2 === 0) {
+      return {
+        rowspan: 2,
+        colspan: 1,
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      };
+    }
+  }
+};
+const objectSpanMethod2 = ({ row, column, rowIndex, columnIndex }) => {
+  if (columnIndex === 7) {
+    if (rowIndex % 2 === 0) {
+      return {
+        rowspan: 3,
+        colspan: 1,
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      };
+    }
+  }
+};
+watchEffect(() => {
+  if (status1.value == false) {
+    url.value = "/images/bz1.png";
+    initialIndex.value = 0;
+  } else {
+    url.value = "/images/bz2.png";
+    initialIndex.value = 1;
+  }
+  if (status3.value) {
+    if (status2.value == false) {
+      url.value = "/images/bz3.png";
+      initialIndex.value = 2;
+    } else {
+      url.value = "/images/bz4.png";
+      initialIndex.value = 3;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.body {
+  width: calc(100vw - 340px);
+  height: calc(100vh - 261px);
+  display: flex;
+  .left {
+    flex: 1;
+    padding-right: 20px;
+
+    .tableView {
+      border-radius: 16px;
+    }
+  }
+  .right {
+    width: 50%;
+    height: 100%;
+    flex: 1;
+  }
+}
+</style>

src/views/pro-steps/index.vue

@@ -173,12 +173,21 @@ const defaultComponents = [
     path: "screwdriver",
     name: "Screwdriver",
   },
+  {
+    compentName: "钎焊指引",
+    iconName: "jingu",
+    path: "zhiyin",
+    name: "Zhiyin",
+  },
 ];
 //当前路由在setpComponents中的index
 const selectIndex = ref(0);
 
 //配置data固定路由参数等
 const setStepComponents = (data) => {
+  data.push({
+    compentName: "钎焊指引",
+  });
   let resData = [];
   data.forEach((item) => {
     defaultComponents.forEach((obj) => {