yh-pub 1.0.0

package/layout/main/components/console/console.vue

@@ -0,0 +1,205 @@
+<template>
+  <div
+    class="console"
+    ref="tongs_console">
+    <el-tabs :model-value="activeIndex">
+      <el-tab-pane
+        name="1"
+        label="AGV日志">
+        <div class="console_cell">
+          <div
+            class="panel"
+            ref="agvLogs">
+            <div
+              v-for="info in agvLogs"
+              class="info">
+              [{{ info.time }}] - {{ info.msg }}
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane
+        name="2"
+        label="RGV日志">
+        <div class="console_cell">
+          <div
+            class="panel"
+            ref="rgvLogs">
+            <div
+              v-for="info in rgvLogs"
+              class="info">
+              [{{ info.time }}] - {{ info.msg }}
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane
+        name="3"
+        label="堆垛机日志">
+        <div class="console_cell">
+          <div
+            class="panel"
+            ref="stackerLogs">
+            <div
+              v-for="info in stackerLogs"
+              class="info">
+              [{{ info.time }}] - {{ info.msg }}
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane
+        name="4"
+        label="控制台日志">
+        <div class="console_cell">
+          <div
+            class="panel"
+            ref="consoles">
+            <div
+              v-for="info in consoles"
+              class="info">
+              [{{ info.time }}] - {{ info.msg }}
+            </div>
+          </div>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import config from "@/config";
+import { getToken } from "@/libs/util";
+import LogConsole from "./console.vue";
+
+const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
+
+export default {
+  name: "console",
+  components: {},
+  props: {
+    code: String,
+    desc: String,
+    src: String,
+  },
+  data() {
+    return {
+      activeIndex: "1",
+      websocketPath: baseUrl.replace("http", "ws") + "/consoleSocket",
+      websocket: "",
+      agvLogs: [],
+      rgvLogs: [],
+      stackerLogs: [],
+      consoles: [],
+      pageDestroyed: false,
+    };
+  },
+  methods: {
+    initWebsocket() {
+      let token = getToken();
+      if (typeof WebSocket === "undefined") {
+        this.$message.info("您的浏览器不支持WebSocket");
+      } else if (token) {
+        let self = this;
+        if (!window.websocket) {
+          window.agvLogs = [];
+          let websocketPath = this.websocketPath + "?$_TOKEN=" + token;
+
+          window.initWebSocket = function () {
+            // 实例化websocket
+            window.websocket = new WebSocket(websocketPath);
+            // 监听websocket的连接
+            window.websocket.onopen = () => {
+              console.log("(" + this.websocketPath + ") websocket连接成功");
+            };
+            // 监听websocket的错误信息
+            window.websocket.onerror = () => {
+              console.log("(" + this.websocketPath + ") websocket连接错误");
+            };
+            // 监听websocket的消息
+            window.websocket.onmessage = (res) => {
+              console.info("接收到消息", res);
+              let data = {};
+              eval("data=" + res.data);
+              if (data) {
+                data.time = data.time ? data.time.substring(11) : "";
+
+                if (data.type == "3" || data.type == "4") {
+                  window.agvLogs.push(data);
+                } else if (data.type == "5") {
+                  window.rgvLogs.push(data);
+                } else if (data.type == "7") {
+                  window.stackerLogs.push(data);
+                } else {
+                  window.consoles.push(data);
+                }
+              }
+
+              self.scrollTop();
+            };
+            // 监听websocket关闭
+            window.websocket.onclose = () => {
+              console.log("websocket关闭，尝试重新连接websocket");
+              window.setTimeout(() => {
+                window.initWebSocket();
+              }, 5000);
+            };
+          };
+          window.initWebSocket();
+        }
+      }
+
+      this.agvLogs = window.agvLogs;
+      this.rgvLogs = window.rgvLogs;
+      this.stackerLogs = window.stackerLogs;
+      this.consoles = window.consoles;
+    },
+    scrollTop() {
+      this.$nextTick(() => {
+        let div = this.$refs["agvLogs"];
+        if (div) div.scrollTop = div.scrollHeight;
+        div = this.$refs["rgvLogs"];
+        if (div) div.scrollTop = div.scrollHeight;
+        div = this.$refs["stackerLogs"];
+        if (div) div.scrollTop = div.scrollHeight;
+        div = this.$refs["consoles"];
+        if (div) div.scrollTop = div.scrollHeight;
+      });
+    },
+  },
+  mounted() {
+    this.initWebsocket();
+  },
+  beforeDestroy() {
+    if (window.websocket) {
+      console.info("关闭了websocket");
+      window.websocket.close();
+    }
+  },
+};
+</script>
+<style>
+.console {
+  color: #ffffff;
+  width: 100%;
+  height: 100%;
+  min-height: 800px;
+}
+.console .console_cell {
+  border-right: 1px #ffffff solid;
+  height: calc(100% - 5px);
+  background-color: #303030;
+}
+.console .panel {
+  min-height: 500px;
+  height: calc(100% - 55px);
+  padding: 10px;
+  overflow: auto;
+}
+.console .info {
+  font-size: 13px;
+  line-height: 18px;
+  color: #ffffff;
+}
+</style>
+@/libs/util

package/layout/main/components/error-store/error-store.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-badge
+    class="error-store"
+    :value="countComputed"
+    @click="openErrorLoggerPage">
+    <i class="iconfont icon-error"></i>
+  </el-badge>
+</template>
+
+<script>
+export default {
+  name: "ErrorStore",
+  props: {
+    count: {
+      type: Number,
+      default: 0,
+    },
+    hasRead: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      startDebug: false,
+    };
+  },
+  computed: {
+    countComputed() {
+      return this.hasRead ? 0 : this.count;
+    },
+  },
+  methods: {
+    openErrorLoggerPage() {
+      let url = "system/startDebug";
+      if (!this.startDebug) {
+        this.startDebug = true;
+      } else {
+        url = "system/stopDebug";
+        this.startDebug = false;
+      }
+      this.axios
+        .request({
+          url: url,
+          params: {},
+          method: "post",
+        })
+        .then((res) => {
+          this.$message.info(res.data.msg);
+        })
+        .catch((res) => {
+          // this.$message.error(res.data.msg);
+        });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.error-store {
+  margin-right: 12px;
+  height: 32px;
+  line-height: 32px;
+  border: 0;
+  .ivu-badge-dot {
+    top: 20px;
+  }
+  .ivu-btn.ivu-btn-text {
+    padding: 2px 1px 6px;
+  }
+}
+</style>

package/layout/main/components/error-store/index.js

@@ -0,0 +1,2 @@
+import ErrorStore from './error-store.vue'
+export default ErrorStore

package/layout/main/components/fullscreen/fullscreen.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    v-if="showFullScreenBtn"
+    class="full-screen-btn-con"
+    @click.native="handleChange"
+  >
+    <el-tooltip :content="ct('退出全屏')" placement="bottom">
+      <i v-show="isFullscreen" class="iconfont icon-fullscreen-exit"></i>
+    </el-tooltip>
+    <el-tooltip :content="ct('全屏')" placement="bottom">
+      <i v-show="!isFullscreen" class="iconfont icon-fullscreen"></i>
+    </el-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { ct } from "yh-i18n";
+const showFullScreenBtn = ref(window.navigator.userAgent.indexOf("MSIE") < 0);
+const emits = defineEmits(["change"]);
+
+const isFullscreen = ref(false);
+function handleFullscreen() {
+  let main = document.body;
+  let flag = document.fullscreenElement !== null;
+  if (flag) {
+    document.exitFullscreen();
+    isFullscreen.value = false;
+  } else {
+    main.requestFullscreen();
+    isFullscreen.value = true;
+  }
+  emits("change", isFullscreen.value);
+}
+function handleChange() {
+  handleFullscreen();
+}
+onMounted(() => {
+  isFullscreen.value = document.fullscreenElement !== null;
+  emits("change", isFullscreen.value);
+});
+</script>
+
+<style lang="less">
+.full-screen-btn-con {
+  width: var(--header-size);
+  height: 32px;
+  line-height: 32px;
+  border: 0;
+  text-align: center;
+  cursor: pointer;
+  i {
+    font-size: 30px;
+    color: var(--el-color-white);
+  }
+}
+</style>

package/layout/main/components/fullscreen/index.js

@@ -0,0 +1,2 @@
+import Fullscreen from './fullscreen.vue'
+export default Fullscreen

package/layout/main/components/language/language.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-dropdown
+    split-button
+    class="language-dropdown"
+    trigger="click"
+    @command="selectLang">
+    {{ title }}
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="(value, key) in localList"
+          :commnd="key">
+          {{ value }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup>
+import { reactive, computed } from "vue";
+import { delStorage } from "@/libs/util";
+import axios from "@/libs/api.request";
+import { useAppStore } from "@/store/app.js";
+
+const appStore = useAppStore();
+
+const langList = reactive({
+  zh_CN: "中文",
+  en_US: "English",
+});
+const localList = reactive({
+  zh_CN: "中文简体",
+  en_US: "English",
+});
+
+const title = computed(() => {
+  return langList[appStore.local];
+});
+
+function selectLang(e) {
+  axios.post("loginController/setLanguage", { language: e }).then((res) => {
+    if (res.data.result) {
+      delStorage("menu");
+      this.$router.push({
+        name: this.$config.homeName,
+      });
+      window.location.reload();
+    }
+  });
+}
+</script>
+<style lang="scss">
+.language-dropdown.el-dropdown {
+  padding: 0 10px;
+  color: var(--el-color-white);
+  .el-button {
+    --el-button-text-color: var(--el-color-white);
+    --el-button-active-text-color: var(--el-color-white);
+    --el-button-hover-text-color: var(--el-color-white);
+    --el-button-bg-color: transparent;
+    --el-button-active-bg-color: transparent;
+    --el-button-hover-bg-color: transparent;
+    --el-button-outline-color: transparent;
+    --el-button-active-border-color: var(--el-color-white);
+    --el-button-hover-border-color: var(--el-color-white);
+    --el-button-border-color: var(--el-color-white);
+  }
+}
+</style>
+@/libs/util@/libs/api.request@/store/app.js

package/layout/main/components/side-menu/side-menu.less

@@ -0,0 +1,74 @@
+.side-menu-wrapper {
+  user-select: none;
+  height: calc(~"100% - 50px");
+  overflow-y: auto;
+  overflow-x: hidden;
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  /* 滚动条滑块 */
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: #72797f;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 5px;
+    background: #001529;
+  }
+  .el-sub-menu__title,
+  .el-menu-item {
+    .iconfont {
+      display: inline-block;
+      max-width: 16px;
+      min-width: 0;
+      text-align: center;
+      margin-right: 10px;
+      padding: 0;
+      font-size: 16px;
+    }
+    transform: background 0.3s ease-in-out 0s;
+    &.is-active,
+    &:hover {
+      background: linear-gradient(90deg, #3377ff, #0455c3);
+    }
+  }
+}
+.side-pupper-menu {
+  --el-menu-bg-color: #21304c;
+  --el-menu-text-color: var(--el-color-white);
+  --el-menu-active-color: var(--el-color-white);
+  --el-menu-hover-bg-color: transparent;
+  max-height: 100%;
+  overflow: auto;
+  background-color: var(--el-menu-bg-color);
+  &::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  /* 滚动条滑块 */
+  &::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background: #72797f;
+  }
+  &::-webkit-scrollbar-track {
+    border-radius: 5px;
+    background: var(--el-menu-bg-color);
+  }
+  .el-menu-item {
+    .iconfont {
+      display: inline-block;
+      max-width: 16px;
+      min-width: 0;
+      text-align: center;
+      margin-right: 10px;
+      padding: 0;
+      font-size: 16px;
+    }
+    transform: background 0.3s ease-in-out 0s;
+    &.is-active,
+    &:hover {
+      background: linear-gradient(90deg, #3377ff, #0455c3);
+    }
+  }
+}

package/layout/main/components/side-menu/side-menu.vue

@@ -0,0 +1,75 @@
+<template>
+  <el-menu
+    :collapse="collapse"
+    :collapse-transition="false"
+    router
+    :default-active="$route.path"
+    class="side-menu-wrapper">
+    <template v-for="item in menuList">
+      <el-menu-item
+        :index="item.id"
+        v-if="!item.hasChildren">
+        <i :class="item.icon"></i>
+        <span>{{ item.title }}</span>
+      </el-menu-item>
+      <el-sub-menu
+        :index="item.id"
+        popper-class="side-pupper-menu"
+        v-else>
+        <template #title>
+          <i :class="item.icon"></i>
+          <span>{{ item.title }}</span>
+        </template>
+        <template v-for="cItem in item.children">
+          <el-menu-item
+            :index="cItem.id"
+            v-if="!cItem.hasChildren">
+            <i :class="cItem.icon"></i>
+            <span>{{ cItem.title }}</span>
+          </el-menu-item>
+          <el-sub-menu
+            :index="cItem.id"
+            popper-class="side-pupper-menu"
+            v-else>
+            <template #title>
+              <i :class="cItem.icon"></i>
+              <span>{{ cItem.title }}</span>
+            </template>
+            <template v-for="tItem in cItem.children">
+              <el-menu-item
+                :index="tItem.id"
+                v-if="!tItem.hasChildren">
+                <i :class="tItem.icon"></i>
+                <span>{{ tItem.title }}</span>
+              </el-menu-item>
+              <el-menu-item
+                v-else
+                v-for="tti in tItem.children"
+                :index="tti.id">
+                <i :class="tti.icon"></i>
+                <span>{{ tti.title }}</span>
+              </el-menu-item>
+            </template>
+          </el-sub-menu>
+        </template>
+      </el-sub-menu>
+    </template>
+  </el-menu>
+</template>
+<script setup>
+const props = defineProps({
+  menuList: {
+    type: Array,
+    default() {
+      return [];
+    },
+  },
+  collapse: {
+    type: Boolean,
+    required: false,
+  },
+});
+</script>
+<style lang="less">
+@import "./side-menu.less";
+</style>

package/layout/main/components/tags-nav/tags-nav.less

@@ -0,0 +1,45 @@
+
+.tags-nav {
+  position: relative;
+  height: 40px;
+  user-select: none;
+  .contextmenu {
+    position: absolute;
+    margin: 0;
+    padding: 5px 0;
+    background: #fff;
+    z-index: 1000;
+    list-style-type: none;
+    border-radius: 4px;
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.1);
+    li {
+      margin: 0;
+      padding: 5px 15px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--el-text-color-secondary);
+      &:hover {
+        background: #eee;
+      }
+    }
+  }
+  .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2):hover,
+  .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:nth-child(2):not(.is-active).is-closable:hover{
+    padding-left: 20px;
+  }
+  .el-tabs{
+    --el-tabs-header-height: 40px;
+    &.el-tabs--border-card{
+      border-bottom: 0;
+      .el-tabs__item {
+        border-left: 1px solid var(--el-border-color-lighter)
+      }
+    }
+    .el-tabs__nav-scroll {
+      padding: 0 20px;
+    }
+    .el-tabs__content{
+      display: none;
+    }
+  }
+}