电动螺丝

src/api/prosteps/screwdriver.ts

@@ -0,0 +1,25 @@
+import request from "@/utils/request";
+//获取列表
+export function getScrewdriverData(data: any) {
+  return request({
+    url: `/api/v1/process/screwdriver/acquisition/page`,
+    method: "post",
+    data,
+  });
+}
+//开始测试
+export function startData(data: any) {
+  return request({
+    url: "/api/v1/process/screwdriver/acquisition/start",
+    method: "post",
+    data: data,
+  });
+}
+//结束测试
+export function endData(data: any) {
+  return request({
+    url: "/api/v1/process/screwdriver/acquisition/end",
+    method: "post",
+    data: data,
+  });
+}

src/components/RealTimeMsg/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="body" v-if="status">
+  <div class="body">
     <div :class="showStatus ? 'content noneContent' : 'content haveContnet'">
       <div class="headerTittle titleText">通知确认</div>
       <el-scrollbar class="itemScrollbar">
@@ -36,12 +36,35 @@
         </el-icon>
       </el-tooltip>
     </div>
+    <!-- 静电环状态样式 -->
+    <!-- <div class="staticBox">
+      <div :class="braceletState == 0 ? 'static type0' : 'static type1'">
+        <div class="titleText">静电手环状态：</div>
+        <div class="titleText state">
+          {{ braceletState == 0 ? "离线" : "在线" }}
+        </div>
+      </div>
+      <el-button
+        v-if="braceletState == 0"
+        type="primary"
+        class="staticBtn"
+        @click="submit(item, index)"
+        >重新检测</el-button
+      >
+    </div> -->
+    <!-- <div class="lightsBox">
+      <div><div class="titleText">电烙铁状态：</div></div>
+      <div class="light" :class="{ activeLight0: lightIndex == 0 }"></div>
+      <div class="light" :class="{ activeLight1: lightIndex == 1 }"></div>
+      <div class="light" :class="{ activeLight2: lightIndex == 2 }"></div>
+    </div> -->
   </div>
 </template>
 
 <script setup>
 import { useDictionaryStore } from "@/store";
 import { readMessage } from "@/api/user";
+import { emitter, EventsNames } from "@/utils/common";
 const dictS = useDictionaryStore();
 const porps = defineProps({
   modelValue: {
@@ -49,11 +72,16 @@ const porps = defineProps({
     default: false,
   },
 });
-const status = ref(true);
-const route = useRoute();
 //true关闭 false打开
 const showStatus = ref(true);
+const lightIndex = ref(null);
+const setExcelVal = (row, col, value) => {
+  if (window.luckysheet) {
+    window.luckysheet.setCellValue(row, col, value);
+  }
+};
 const messages = ref([]);
+const braceletState = ref(0);
 //首次通知是否弹框
 const firstNotice = ref(false);
 const page = ref(1);
@@ -66,40 +94,48 @@ const submit = async (item, index) => {
   }
 };
 //连接地址
-const ws = new WebSocket(
-  `${import.meta.env.VITE_WEBSOCKET_URL}/websocket/${localStorage.getItem("token")}`
-);
-ws.onopen = () => {};
-ws.onmessage = (event) => {
-  const receivedMessage = event.data;
-  messages.value = JSON.parse(receivedMessage).content;
-  if (firstNotice.value == false) {
-    if (messages.value.length > 0) {
-      showStatus.value = false;
-    } else {
-      showStatus.value = true;
+const ws = ref(null);
+const addWebSocket = () => {
+  ws.value = new WebSocket(
+    `${import.meta.env.VITE_WEBSOCKET_URL}/websocket/${localStorage.getItem("token")}`
+  );
+  ws.value.onopen = () => {};
+  ws.value.onmessage = (event) => {
+    const receivedMessage = event.data;
+    const type = JSON.parse(receivedMessage).msgType;
+    switch (type) {
+      //处理左侧弹框消息
+      case "1":
+        if (firstNotice.value == false) {
+          if (messages.value.length > 0) {
+            showStatus.value = false;
+          } else {
+            showStatus.value = true;
+          }
+        }
+        break;
+      case "8":
+        emitter.emit(EventsNames.GET_Screwdriver);
+        break;
     }
-  }
+  };
+  ws.value.onclose = () => {
+    if (ws.value.readyState == 3) {
+      addWebSocket();
+    }
+  };
 };
+
 const changePop = () => {
   showStatus.value = !showStatus.value;
   firstNotice.value = true;
 };
-ws.onclose = () => {
-  console.log("实时连接断开");
-};
-
-watch(
-  () => route,
-  () => {
-    if (route.name == "MessageMain") {
-      status.value = false;
-    }
-  },
-  {
-    immediate: true,
-  }
-);
+onMounted(() => {
+  addWebSocket();
+});
+onUnmounted(() => {
+  ws.value.onclose();
+});
 </script>
 <style scoped lang="scss">
 .body {
@@ -186,4 +222,72 @@ watch(
     }
   }
 }
+.staticBox {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  .static {
+    height: 60px;
+    background-color: white;
+    border-radius: 16px;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+  }
+  .staticBtn {
+    font-size: 20px;
+    margin-left: 10px;
+  }
+}
+.activeLight0 {
+  box-shadow:
+    0 0 15px yellow,
+    0 0 25px yellow,
+    0 0 35px rgb(169, 169, 89);
+  background-color: yellow !important;
+}
+.activeLight1 {
+  box-shadow:
+    0 0 15px #00ff00,
+    0 0 25px #98e998,
+    0 0 35px #8ae88a;
+  background-color: greenyellow !important;
+}
+.activeLight2 {
+  box-shadow:
+    0 0 15px #f44f54,
+    0 0 25px #f44f54,
+    0 0 35px #f44f54;
+  background-color: red !important;
+}
+.lightsBox {
+  position: fixed;
+  top: 10px;
+  right: 300px;
+  width: 300px;
+  height: 60px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  .light {
+    background-color: grey;
+    height: 30px;
+    width: 30px;
+    border-radius: 15px;
+  }
+}
+.type1 {
+  .state {
+    color: green;
+  }
+}
+.type0 {
+  background-color: red !important;
+  .titleText {
+    color: white !important;
+  }
+}
 </style>

src/router/modules/process.ts

@@ -121,6 +121,16 @@ export default {
             keepAlive: true,
           },
         },
+        {
+          path: "screwdriver",
+          component: () =>
+            import("@/views/pro-steps/components/screwdriver.vue"),
+          name: "Screwdriver",
+          meta: {
+            back: true,
+            keepAlive: true,
+          },
+        },
       ],
     },
     {

src/utils/common.ts

@@ -9,6 +9,8 @@ enum EventsNames {
   PROCESS_STEPINDEX = "PROCESS_STEPINDEX",
   //通知procee界面重新加载数据
   PROCESS_REDER = "PROCESS_REDER",
+  //websocket 通知电动螺丝界面获取最新信息
+  GET_Screwdriver = "GET_Screwdriver",
 }
 
 export { emitter, EventsNames };

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

@@ -105,19 +105,22 @@
     <div class="recordBody" v-if="submitStatus == false">
       <div class="left" v-if="listData.length > 0">
         <el-scrollbar>
-          <div
-            @click="showSelectIndex = index"
-            :class="index == showSelectIndex ? 'infoBox active' : 'infoBox'"
-            v-for="(item, index) in listData"
-          >
-            <div>
-              <div class="titleText">记录项名：</div>
-              <div class="describeText">{{ item.label }}</div>
-            </div>
-            <div>
-              <div class="titleText">记录内容：</div>
-              <div class="describeText textarea">
-                {{ item.inputValue }}
+          <div style="display: flex; flex-wrap: wrap">
+            <div
+              @click="showSelectIndex = index"
+              :class="index == showSelectIndex ? 'infoBox active' : 'infoBox'"
+              v-for="(item, index) in listData"
+              :key="item"
+            >
+              <div>
+                <div class="titleText">记录项名：</div>
+                <div class="describeText">{{ item.label }}</div>
+              </div>
+              <div>
+                <div class="titleText">记录内容：</div>
+                <div class="describeText textarea">
+                  {{ item.inputValue }}
+                </div>
               </div>
             </div>
           </div>

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

@@ -0,0 +1,156 @@
+<template>
+  <div>
+    <div class="btns">
+      <el-button type="success" class="btn" @click="begin">开始测试</el-button>
+      <el-button type="danger" class="btn" @click="stop">停止测试</el-button>
+    </div>
+    <div>
+      <el-table :data="tableData" class="tableView">
+        <el-table-column prop="taskNo" label="当前任务号" align="center" />
+        <el-table-column
+          prop="tightenResult"
+          label="最终拧紧结果"
+          align="center"
+        />
+        <el-table-column
+          prop="tightenTorqueMax"
+          label="拧紧过程中最大扭力值"
+          align="center"
+        />
+        <el-table-column
+          prop="torquetarget"
+          label="当前任务目标扭力"
+          align="center"
+        />
+        <el-table-column prop="totalCycles" label="总圈数" align="center" />
+        <el-table-column prop="warning" label="警报" align="center" />
+        <!-- <el-table-column prop="writeData" align="center" label="是否已填报">
+          <template #default="scope">
+            <span
+              :class="{
+                'red-text': scope.row.writeData === '',
+                'green-text': scope.row.writeData !== '',
+              }"
+            >
+              {{ scope.row.writeData === "" ? "否" : "是" }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" fixed="right" width="200">
+          <template #default="scope">
+            <el-button
+              link
+              v-if="scope.row.writeData !== ''"
+              class="btnText"
+              type="primary"
+              @click="handleLook(scope.row)"
+            >
+              查看
+            </el-button>
+            <el-button
+              link
+              class="btnText"
+              type="primary"
+              @click="handleEdit(scope.row)"
+            >
+              编辑
+            </el-button>
+
+            <el-popconfirm
+              v-if="scope.row.writeData !== ''"
+              :visible="scope.row.dialogVisible"
+              title="您确认重置吗？（重置此操作不可逆）"
+              width="200"
+              @cancel="scope.row.dialogVisible = false"
+              @confirm="reset(scope.row)"
+            >
+              <el-button> 取消 </el-button>
+              <el-button type="primary"> 确认 </el-button>
+              <template #reference>
+                <el-button
+                  link
+                  class="btnText"
+                  type="primary"
+                  @click="scope.row.dialogVisible = true"
+                  >重置</el-button
+                >
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column> -->
+      </el-table>
+      <Pagination
+        v-model:limit="page.pageSize"
+        v-model:page="page.pageNo"
+        :total="page.total"
+        size="large"
+        @pagination="getData"
+        position="right"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  getScrewdriverData,
+  startData,
+  endData,
+} from "@/api/prosteps/screwdriver";
+import { emitter, EventsNames } from "@/utils/common";
+const page = reactive({
+  pageSize: 10,
+  pageNo: 1,
+  total: 0,
+});
+const tableData = ref([]);
+const getData = async () => {
+  const { data, code } = await getScrewdriverData({
+    pageSize: page.pageSize,
+    pageNo: page.pageNo,
+  });
+  tableData.value = data.records;
+  page.total = data.totalCount;
+};
+const begin = async () => {
+  const { code } = await startData();
+  if (code == "200") {
+    ElMessage.success("操作成功");
+  }
+};
+const stop = async () => {
+  const { code } = await endData();
+  if (code == "200") {
+    ElMessage.success("操作成功");
+  }
+};
+const setSearch = () => {
+  page.pageNo = 1;
+};
+onMounted(() => {
+  emitter.on(EventsNames.GET_Screwdriver, () => {
+    setSearch();
+    getData();
+  });
+  getData();
+});
+</script>
+
+<style lang="scss" scoped>
+.btns {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  .btn {
+    height: 40px;
+    font-size: 20px;
+  }
+}
+.tableView {
+  width: 100%;
+  height: calc(100vh - 380px);
+  padding: 20px 0px;
+  border-radius: 16px;
+}
+</style>

src/views/pro-steps/index.vue

@@ -167,6 +167,12 @@ const defaultComponents = [
     path: "execl",
     name: "Excel",
   },
+  {
+    compentName: "电动螺丝刀",
+    iconName: "mingpai",
+    path: "screwdriver",
+    name: "Screwdriver",
+  },
 ];
 //当前路由在setpComponents中的index
 const selectIndex = ref(0);