1

z8018

2025-06-10 e46aa927d231af83724683c7286d9db503e24cf7

 ÏîÄ¿´úÂë/WCS/WIDESEAWCS_Client/src/views/Index.vue

@@ -7,8 +7,14 @@
      </div>
      <div class="vol-menu">
        <el-scrollbar style="height: 100%">
          <VolMenu :currentMenuId="currentMenuId" :on-select="onSelect" :enable="true" :open-select="false"
            :isCollapse="isCollapse" :list="menuOptions"></VolMenu>
          <VolMenu
            :currentMenuId="currentMenuId"
            :on-select="onSelect"
            :enable="true"
            :open-select="false"
            :isCollapse="isCollapse"
            :list="menuOptions"
          ></VolMenu>
        </el-scrollbar>
      </div>
    </div>
@@ -28,16 +34,20 @@
              <span v-if="!item.icon"> {{ item.text }}</span>
              <i v-else :class="item.icon"></i>
            </a>
          </div> -->
          </div>-->
        </div>
        <div class="header-info">
          <div class="h-link">
            <a href="javascript:void(0)" @click="to(item)" v-for="(item, index) in links.filter((c) => {
            <a
              href="javascript:void(0)"
              @click="to(item)"
              v-for="(item, index) in links.filter((c) => {
              return c.icon;
            })" :key="index">
              <span> {{ item.text }}</span>
            })"
              :key="index"
            >
              <span>{{ item.text }}</span>
            </a>

          </div>
          <div>
            <img class="user-header" :src="userImg" :onerror="errorImg" />
@@ -52,10 +62,23 @@
        </div>
      </div>
      <div class="vol-path">
        <el-tabs @tab-click="selectNav" @tab-remove="removeNav" @contextmenu.prevent="bindRightClickMenu(false)"
          type="border-card" class="header-navigation" v-model="selectId" :strtch="false">
          <el-tab-pane v-for="(item, navIndex) in navigation" type="card" :name="navIndex + ''" :closable="navIndex > 0"
            :key="navIndex" :label="item.name">
        <el-tabs
          @tab-click="selectNav"
          @tab-remove="removeNav"
          @contextmenu.prevent="bindRightClickMenu(false)"
          type="border-card"
          class="header-navigation"
          v-model="selectId"
          :strtch="false"
        >
          <el-tab-pane
            v-for="(item, navIndex) in navigation"
            type="card"
            :name="navIndex + ''"
            :closable="navIndex > 0"
            :key="navIndex"
            :label="item.name"
          >
            <span style="display: none">{{ navIndex }}</span>
          </el-tab-pane>
        </el-tabs>
@@ -66,18 +89,23 @@
              <el-button link @click="closeTabs()">
                <i class="el-icon-close"></i>
                {{
                  navigation.length == 2 ? "关闭菜单" : "关闭所有"
                }}</el-button>
                navigation.length == 2 ? "关闭菜单" : "关闭所有"
                }}
              </el-button>
            </li>
            <li v-show="visibleItem.left">
              <el-button link @click="closeTabs('left')"><i class="el-icon-back"></i>关闭左边</el-button>
              <el-button link @click="closeTabs('left')">
                <i class="el-icon-back"></i>关闭左边
              </el-button>
            </li>
            <li v-show="visibleItem.right">
              <el-button link @click="closeTabs('right')">
                <i class="el-icon-right"></i>关闭右边</el-button>
                <i class="el-icon-right"></i>关闭右边
              </el-button>
            </li>
            <li v-show="visibleItem.other">
              <el-button link @click="closeTabs('other')"><i class="el-icon-right"></i>关闭其他
              <el-button link @click="closeTabs('other')">
                <i class="el-icon-right"></i>关闭其他
              </el-button>
            </li>
          </ul>
@@ -88,20 +116,36 @@
          <loading v-show="$store.getters.isLoading()"></loading>
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" :key="$route.name"
                v-if="!$route.meta || ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))" />
              <component
                :is="Component"
                :key="$route.name"
                v-if="!$route.meta || ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))"
              />
            </keep-alive>
            <component :is="Component" :key="$route.name" v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')" />
            <component
              :is="Component"
              :key="$route.name"
              v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"
            />
          </router-view>
        </el-scrollbar>
      </div>
    </div>
    <el-drawer title="选择主题" v-model="drawer_model" direction="rtl" destroy-on-close>
      <div class="theme-selector">
        <div @click="changeTheme(item.name)" class="item" v-for="(item, index) in theme_color" :key="index"
          :style="{ background: item.color }">
          <div v-show="item.leftColor" :style="{ background: item.leftColor }" style="height: 100%; width: 20px"
            class="t-left"></div>
        <div
          @click="changeTheme(item.name)"
          class="item"
          v-for="(item, index) in theme_color"
          :key="index"
          :style="{ background: item.color }"
        >
          <div
            v-show="item.leftColor"
            :style="{ background: item.leftColor }"
            style="height: 100%; width: 20px"
            class="t-left"
          ></div>
          <div class="t-right"></div>
        </div>
      </div>
@@ -120,7 +164,7 @@
import VolMenu from "@/components/basic/VolElementMenu.vue";
import Message from "./index/Message.vue";
import MessageConfig from "./index/MessageConfig.js";
var imgUrl = require("@/assets/imgs/wms_x.png");
var imgUrl = require("@/assets/imgs/wcs_logo.png");
var $this;
var $interval;
var $indexDate;
@@ -130,7 +174,7 @@
  ref,
  watch,
  onMounted,
  getCurrentInstance,
  getCurrentInstance
} from "vue";
import { useRouter, useRoute } from "vue-router";
import store from "../store/index";
@@ -139,7 +183,7 @@
  components: {
    VolMenu,
    loading,
    Message,
    Message
  },

  data() {
@@ -149,11 +193,13 @@
      rightTabs: true,
      otherTabs: true,
      menuLeft: 0,
      menuTop: 0,
      menuTop: 0
      //  contextMenuVisible: false, // å³é”®å…³é—­æ˜¾/隐
    };
  },
  setup(props, context) {
    let client = ref(null);

    // èŽ·å–全局属性和方法
    const { proxy } = getCurrentInstance();

@@ -173,31 +219,22 @@
      { name: "orange2", color: "#ff9900", leftColor: "rgb(232 141 5)" },
      { name: "green", color: "rgb(25, 190, 107)" },
      { name: "green2", color: "rgb(25, 190, 107)", leftColor: "#019e4f" },
      { name: "white", color: "#fff" },
      { name: "white", color: "#fff" }
    ]);
    const links = ref([
      // {
      //   text: "框架视频",
      //   path: "https://www.cctalk.com/m/group/90268531",
      //   id: -3,
      // },
      // { text: "大屏数据", path: "/bigdata", id: -3 },
      // {
      //   text: "框架文档",
      //   path: "http://v2.volcore.xyz/document/guide",
      //   id: -2,
      // },   {
      //   text: "框架企业版",
      //   path: "http://pro.volcore.xyz/",
      //   id: 10,
      // },
      {
        text: "大屏数据",
        path: "/temppage",
        id: -2,
        icon: "el-icon-switch-button"
      },
      { text: "个人中心", path: "/UserInfo", id: -1, icon: "el-icon-s-custom" },
      {
        text: "安全退出",
        path: "/login",
        id: -4,
        icon: "el-icon-switch-button",
      },
        id: -1,
        icon: "el-icon-switch-button"
      }
    ]);
    const errorImg = ref(
      'this.src="' + require("@/assets/imgs/error-img.png") + '"'
@@ -213,11 +250,11 @@
      left: false,
      right: false,
      all: false,
      other: false,
      other: false
    });
    const userImg = ref("");
    const navigation = reactive([
      { orderNo: "0", id: "1", name: "首页", path: "/home" },
      { orderNo: "0", id: "1", name: "首页", path: "/home" }
    ]);
    const logo = ref(imgUrl);
    const theme = ref("blue2");
@@ -237,15 +274,35 @@
      },
      hide() {
        toggleLeft();
      },
      }
    };
    const changeTheme = (name) => {

    const createSocket = url => {
      // åˆ›å»ºWebSocket连接
      //"ws://127.0.0.1:9295/admin"
      client = new WebSocket(url);

      client.onopen = function() {
        //client.onmessage = handleMessage;
        store.commit("setWebsocket", client);
        console.log("WebSocket è¿žæŽ¥æˆåŠŸ");
      };

      client.onclose = function() {
        console.log("WebSocket è¿žæŽ¥å…³é—­");
        setTimeout(createSocket, 10000);
      };

      client.onerror = function() {};
    };

    const changeTheme = name => {
      if (theme.value != name) {
        theme.value = name;
      }
      localStorage.setItem("vol3_theme", name);
    };
    const to = (item) => {
    const to = item => {
      /* 2020.07.31增加手动打开tabs*/
      if (item.path.indexOf("http") != -1) {
        window.open(item.path);
@@ -266,7 +323,7 @@
    };
    const open = (item, useRoute) => {
      /* 2020.07.31增加手动打开tabs*/
      let _index = navigation.findIndex((x) => {
      let _index = navigation.findIndex(x => {
        return x.path == item.path;
      });
      if (_index == -1) {
@@ -275,7 +332,7 @@
          id: item.id + "",
          name: item.name || item.text || "无标题",
          path: item.path,
          query: item.query, //2021.03.20修复自定义二次打开$tabs时参数丢失的问题
          query: item.query //2021.03.20修复自定义二次打开$tabs时参数丢失的问题
        });
        //新打开的tab移至最后一个选项
        selectId.value = navigation.length - 1 + "";
@@ -290,13 +347,13 @@
      }
      currentMenuId.value = item.id * 1;
      // tab菜单绑定右键事件
      proxy.$nextTick(function (e) {
      proxy.$nextTick(function(e) {
        proxy.bindRightClickMenu(true);
      });
    };
    const close = (path) => {
    const close = path => {
      /* 2020.07.31增加手动打开tabs*/
      let index = navigation.findIndex((x) => {
      let index = navigation.findIndex(x => {
        return x.path == path;
      });
      if (index == -1) {
@@ -304,7 +361,7 @@
      }
      removeNav(index);
    };
    const setItem = (item) => {
    const setItem = item => {
      /* 2020.07.31增加手动打开tabs*/
      localStorage.setItem(
        window.location.origin + "_tabs",
@@ -316,23 +373,23 @@
      let nav = localStorage.getItem(window.location.origin + "_tabs");
      return nav ? JSON.parse(nav) : null;
    };
    const selectNav = (item) => {
    const selectNav = item => {
      //升级element正式版修改
      selectId.value = item.props.name;
      let _path = navigation[item.index].path;
      currentMenuId.value = (
        menuOptions.value.find((c) => {
        menuOptions.value.find(c => {
          return c.path == _path;
        }) || { id: 0 }
      ).id;

      router.push({
        path: navigation[item.index].path,
        query: navigation[item.index].query,
        query: navigation[item.index].query
      });
    };

    const removeNav = (_index) => {
    const removeNav = _index => {
      return new Promise(() => {
        //关闭的当前项,跳转到前一个页面
        if (selectId.value == _index + "") {
@@ -341,7 +398,7 @@
          router.push({
            path: navigation[_index - 1].path,
            //2022.06.27修复tabs二次切换后参数丢失的问题
            query: navigation[_index - 1].query,
            query: navigation[_index - 1].query
          });
          navigation.splice(_index, 1);
          selectId.value = selectId.value - 1 + "";
@@ -352,19 +409,19 @@
        }
        navigation.splice(_index, 1);
        currentMenuId.value = (
          menuOptions.value.find((c) => {
          menuOptions.value.find(c => {
            return c.path == navigation[selectId.value * 1].path;
          }) || { id: 0 }
        ).id;
      });
    };

    const getSelectMenuName = (id) => {
      return menuOptions.value.find(function (x) {
    const getSelectMenuName = id => {
      return menuOptions.value.find(function(x) {
        return x.id == id;
      });
    };
    const onSelect = (treeId) => {
    const onSelect = treeId => {
      /* 2020.07.31增加手动打开tabs*/
      var item = getSelectMenuName(treeId);
      open(item, false);
@@ -374,7 +431,7 @@
     * æ˜¾ç¤ºå³é”®èœå•
     * @param {*} e äº‹ä»¶å¯¹è±¡
     */
    const openTabsMenu = function (e) {
    const openTabsMenu = function(e) {
      e.preventDefault(); // é˜²æ­¢é»˜è®¤èœå•å¼¹å‡º
      let tabId = e.target.id.split("-")[1] * 1;

@@ -417,14 +474,14 @@
    const toHome = () => {
      open({
        text: navigation[0].name,
        path: navigation[0].path,
        path: navigation[0].path
      });
    };
    /**
     * å…³é—­å…¶å®ƒæ ‡ç­¾é¡µ
     * @param {*} par å…³é—­ç±»åž‹(left,right,other)
     */
    const closeTabs = (value) => {
    const closeTabs = value => {
      let _menuId = navigation[selectId.value * 1].id;
      let currnetIndex = selectId.value * 1; // navigation.findIndex(c => { return c.id == selectId.value });
      switch (value) {
@@ -463,7 +520,7 @@
        }
      }
      selectId.value =
        navigation.findIndex((c) => {
        navigation.findIndex(c => {
          return c.id == _menuId;
        }) + "";
      closeTabsMenu();
@@ -499,9 +556,11 @@
      }
      Object.assign(_config.$tabs, { open: open, close: close });

      http.get("api/Sys_Menu/getTreeMenu", {}, true).then((data) => {
      // createSocket(window.webConfig.webSocketUrl);

      http.get("api/Sys_Menu/getTreeMenu", {}, true).then(data => {
        data.push({ id: "1", name: "首页", url: "/home" }); // ä¸ºäº†èŽ·å–选中id使用
        data.forEach((d) => {
        data.forEach(d => {
          d.path = (d.url || "").replace("/Manager", "");
          d.to = (d.url || "").replace("/Manager", "");
          if (!d.icon || d.icon.substring(0, 3) != "el-") {
@@ -514,7 +573,7 @@

        //开启消息推送（main.js中设置是否开启signalR）2022.05.05
        if (_config.$global.signalR) {
          MessageConfig(http, (result) => {
          MessageConfig(http, result => {
            messageList.unshift(result);
            //    console.log(result)
          });
@@ -523,12 +582,12 @@
        //当前刷新是不是首页
        if (router.currentRoute.value.path != navigation[0].path) {
          //查找系统菜单
          let item = menuOptions.value.find((x) => {
          let item = menuOptions.value.find(x => {
            return x.path == router.currentRoute.value.path; //this.$route.path;
          });
          if (item) return onSelect(item.id);
          //查找顶部快捷连接
          item = links.value.find((x) => {
          item = links.value.find(x => {
            return x.path == router.currentRoute.value.path; //this.$route.path;
          });
          //查找最后一次跳转的页面
@@ -574,7 +633,7 @@
      visibleItem,
      closeTabsMenu,
      closeTabs,
      currentMenuId,
      currentMenuId
    };
  },
  /**
@@ -584,7 +643,7 @@
    let _date = showTime();
    $indexDate = document.getElementById("index-date");
    $indexDate.innerText = _date;
    $interval = setInterval(function () {
    $interval = setInterval(function() {
      $indexDate.innerText = showTime();
    }, 1000);

@@ -610,7 +669,7 @@
          item.oncontextmenu = that.openTabsMenu;
        });
      });
    },
    }
  },

  /**
@@ -619,7 +678,7 @@
  destroyed() {
    $this = null;
    clearInterval($interval);
  },
  }
});
const week = new Array(
  "星期一",
@@ -699,8 +758,12 @@
  letter-spacing: 1px;
}

.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:last-child,
.el-tabs--top.el-tabs--border-card.header-navigation>.el-tabs__header .el-tabs__item:nth-child(2) {
.el-tabs.el-tabs--top.el-tabs--border-card.header-navigation
  > .el-tabs__header
  .el-tabs__item:last-child,
.el-tabs--top.el-tabs--border-card.header-navigation
  > .el-tabs__header
  .el-tabs__item:nth-child(2) {
  padding: 0;
}