|
|
@@ -1,54 +1,58 @@
|
|
|
<template>
|
|
|
<el-container class="hc-layout-box">
|
|
|
- <div class="hc-app-bg-box" v-show="AppTheme === 'dark'">
|
|
|
+ <div v-show="AppTheme === 'dark'" class="hc-app-bg-box">
|
|
|
<img :src="appViewBg" alt="" crossOrigin="anonymous">
|
|
|
</div>
|
|
|
- <el-aside :width="isCollapse?'100px':'250px'" class="hc-aside-box" :class="[isCollapse?'is-collapse':'']" v-show="MenuBarKey !== 'home-index'">
|
|
|
+ <el-aside v-show="MenuBarKey !== 'home-index'" :width="isCollapse ? '100px' : '250px'" class="hc-aside-box" :class="[isCollapse ? 'is-collapse' : '']">
|
|
|
<div class="hc-aside-logo-box" @click="logoClick">
|
|
|
- <img :src="appLogoIcon" alt="" id="hc-logo-icon">
|
|
|
- <img :src="appLogoName" alt="" id="hc-logo-name" v-show="!isCollapse">
|
|
|
+ <img id="hc-logo-icon" :src="appLogoIcon" alt="">
|
|
|
+ <img v-show="!isCollapse" id="hc-logo-name" :src="appLogoName" alt="">
|
|
|
</div>
|
|
|
<div class="hc-aside-menu-box">
|
|
|
<el-scrollbar>
|
|
|
- <MenuBar :datas="MenuBarData" :cur="MenuBarKey" :collapse="isCollapse" @change="MenuBarChange" :msgCount="msgCount"/>
|
|
|
+ <MenuBar :datas="MenuBarData" :cur="MenuBarKey" :collapse="isCollapse" :msg-count="msgCount" @change="MenuBarChange" />
|
|
|
</el-scrollbar>
|
|
|
</div>
|
|
|
<div class="hc-aside-bar-box">
|
|
|
- <div :class="isCollapse?'':'active'" @click="collapseChange(false)">
|
|
|
- <HcIcon name="menu-unfold"/>
|
|
|
+ <div :class="isCollapse ? '' : 'active'" @click="collapseChange(false)">
|
|
|
+ <HcIcon name="menu-unfold" />
|
|
|
</div>
|
|
|
- <div :class="isCollapse?'active':''" @click="collapseChange(true)" v-show="!isCollapse">
|
|
|
- <HcIcon name="menu-fold"/>
|
|
|
+ <div v-show="!isCollapse" :class="isCollapse ? 'active' : ''" @click="collapseChange(true)">
|
|
|
+ <HcIcon name="menu-fold" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-aside>
|
|
|
<el-container class="hc-container-view">
|
|
|
- <el-header class="hc-header-view" v-show="MenuBarKey !== 'home-index'">
|
|
|
- <div class="hc-header-page-name" id="hc-header-page-name">{{RoutesTitle}}</div>
|
|
|
+ <el-header v-show="MenuBarKey !== 'home-index'" class="hc-header-view">
|
|
|
+ <div id="hc-header-page-name" class="hc-header-page-name">
|
|
|
+ {{ RoutesTitle }}
|
|
|
+ </div>
|
|
|
<div class="hc-header-top-menu-bar">
|
|
|
- <TopMenuBar/>
|
|
|
+ <TopMenuBar />
|
|
|
</div>
|
|
|
<div class="hc-header-content">
|
|
|
- <div class="hc-header-cascader-box" v-if="userRoleId !== website.role_id">
|
|
|
- <div class="project-name-box">{{projectInfo.projectAlias}} / {{contractInfo.name}}</div>
|
|
|
- <el-cascader ref="ElCascaderRef" v-model="projectValue" :options="projectContract" :props="projectProps" placeholder="请选择项目" @change="projectContractChange"/>
|
|
|
+ <div v-if="userRoleId !== website.role_id" class="hc-header-cascader-box">
|
|
|
+ <div class="project-name-box">
|
|
|
+ {{ projectInfo.projectAlias }} / {{ contractInfo.name }}
|
|
|
+ </div>
|
|
|
+ <el-cascader ref="ElCascaderRef" v-model="projectValue" :options="projectContract" :props="projectProps" placeholder="请选择项目" @change="projectContractChange" />
|
|
|
</div>
|
|
|
- <div class="hc-header-project-name-box" @click="userProjectClick" v-else>
|
|
|
+ <div v-else class="hc-header-project-name-box" @click="userProjectClick">
|
|
|
<span class="project-icon">
|
|
|
- <HcIcon name="arrow-right"/>
|
|
|
+ <HcIcon name="arrow-right" />
|
|
|
</span>
|
|
|
- <span class="project-name">{{projectInfoData?.projectName??'请先选择项目'}}</span>
|
|
|
+ <span class="project-name">{{ projectInfoData?.projectName ?? '请先选择项目' }}</span>
|
|
|
</div>
|
|
|
- <HelpInfoBar></HelpInfoBar>
|
|
|
- <ConfigBar></ConfigBar>
|
|
|
- <UserInfoBar></UserInfoBar>
|
|
|
+ <HelpInfoBar />
|
|
|
+ <ConfigBar />
|
|
|
+ <UserInfoBar />
|
|
|
</div>
|
|
|
</el-header>
|
|
|
- <el-main class="hc-main-box" id="hc-main-box" :class="MenuBarKey">
|
|
|
- <router-view v-slot="{ Component }" v-if="reloadRouter">
|
|
|
+ <el-main id="hc-main-box" class="hc-main-box" :class="MenuBarKey">
|
|
|
+ <router-view v-if="reloadRouter" v-slot="{ Component }">
|
|
|
<transition name="fade-transform">
|
|
|
<keep-alive include="ProductList">
|
|
|
- <component :is="Component" :msgCount="msgCount" :msgChange="msgChange"/>
|
|
|
+ <component :is="Component" :msg-count="msgCount" :msg-change="msgChange" />
|
|
|
</keep-alive>
|
|
|
</transition>
|
|
|
</router-view>
|
|
|
@@ -58,19 +62,19 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import {onMounted, ref, nextTick, watch} from "vue";
|
|
|
-import {useRouter, useRoute} from 'vue-router'
|
|
|
-import {useAppStore} from "~src/store";
|
|
|
-import MenuBar from "./modules/MenuBar.vue"
|
|
|
-import TopMenuBar from "./modules/TopMenuBar.vue"
|
|
|
-import HelpInfoBar from "./modules/HelpInfoBar.vue"
|
|
|
-import UserInfoBar from "./modules/UserInfoBar.vue"
|
|
|
-import ConfigBar from "./modules/ConfigBar.vue"
|
|
|
-import {initButtons,initProjectContract} from "~sto/app";
|
|
|
+import { nextTick, onMounted, ref, watch } from 'vue'
|
|
|
+import { useRoute, useRouter } from 'vue-router'
|
|
|
+import { useAppStore } from '~src/store'
|
|
|
+import MenuBar from './modules/MenuBar.vue'
|
|
|
+import TopMenuBar from './modules/TopMenuBar.vue'
|
|
|
+import HelpInfoBar from './modules/HelpInfoBar.vue'
|
|
|
+import UserInfoBar from './modules/UserInfoBar.vue'
|
|
|
+import ConfigBar from './modules/ConfigBar.vue'
|
|
|
+import { initButtons, initProjectContract } from '~sto/app'
|
|
|
import website from '~src/config/index'
|
|
|
-import appViewBg from "~src/assets/view/bg.png";
|
|
|
-import {setImageColor, setImageColorStyle} from "js-fast-way";
|
|
|
-import {setAppName} from "~uti/tools";
|
|
|
+import appViewBg from '~src/assets/view/bg.png'
|
|
|
+import { setImageColor, setImageColorStyle } from 'js-fast-way'
|
|
|
+import { setAppName } from '~uti/tools'
|
|
|
|
|
|
//初始组合式
|
|
|
const router = useRouter()
|
|
|
@@ -83,30 +87,30 @@ const appLogoIcon = ref(useAppState.getLogoIcon)
|
|
|
const appLogoName = ref(useAppState.getLogoName)
|
|
|
|
|
|
//路由参数
|
|
|
-const routerQuery = useRoutes?.query;
|
|
|
+const routerQuery = useRoutes?.query
|
|
|
const reloadRouter = ref(true)
|
|
|
-const BarMenuKey = useRoutes?.name ?? 'home-index';
|
|
|
-const BarMenuTitle = useRoutes?.meta?.title ?? '';
|
|
|
+const BarMenuKey = useRoutes?.name ?? 'home-index'
|
|
|
+const BarMenuTitle = useRoutes?.meta?.title ?? ''
|
|
|
|
|
|
//主题和色调变量
|
|
|
-const AppColor = ref(useAppState.getColor);
|
|
|
-const AppTheme = ref(useAppState.getTheme);
|
|
|
+const AppColor = ref(useAppState.getColor)
|
|
|
+const AppTheme = ref(useAppState.getTheme)
|
|
|
|
|
|
//顶部菜单数据和相关处理
|
|
|
-const MenuBarKey = ref(BarMenuKey);
|
|
|
-const RoutesName = ref(BarMenuKey);
|
|
|
-const RoutesTitle = ref(BarMenuTitle);
|
|
|
+const MenuBarKey = ref(BarMenuKey)
|
|
|
+const RoutesName = ref(BarMenuKey)
|
|
|
+const RoutesTitle = ref(BarMenuTitle)
|
|
|
const MenuBarData = ref(useAppState.getMenus)
|
|
|
const isCollapse = ref(useAppState.getCollapse)
|
|
|
-const userInfo = ref(useAppState.getUserInfo);
|
|
|
-const userRoleId = ref(useAppState.getRoleId);
|
|
|
-const projectInfoData = ref(useAppState.getProjectInfo);
|
|
|
+const userInfo = ref(useAppState.getUserInfo)
|
|
|
+const userRoleId = ref(useAppState.getRoleId)
|
|
|
+const projectInfoData = ref(useAppState.getProjectInfo)
|
|
|
|
|
|
//项目合同段
|
|
|
-const projectInfo = ref({});
|
|
|
-const contractInfo = ref({});
|
|
|
+const projectInfo = ref({})
|
|
|
+const contractInfo = ref({})
|
|
|
const projectContract = ref([])
|
|
|
-const projectValue = ref(null);
|
|
|
+const projectValue = ref(null)
|
|
|
const projectProps = ref({
|
|
|
value: 'id',
|
|
|
label: 'projectAlias',
|
|
|
@@ -119,7 +123,7 @@ onMounted(() => {
|
|
|
initProjectContract()
|
|
|
if (userRoleId.value !== website.role_id) {
|
|
|
const info = useAppState.getProjectContract || []
|
|
|
- projectContractData(info);
|
|
|
+ projectContractData(info)
|
|
|
}
|
|
|
setIsCollapse(RoutesName.value)
|
|
|
useAppState.barMenuName = BarMenuTitle
|
|
|
@@ -148,7 +152,7 @@ watch(() => [
|
|
|
isCollapse.value = collapse
|
|
|
setIsCollapse(RoutesName.value)
|
|
|
if (userRoleId.value !== website.role_id) {
|
|
|
- projectContractData(projectContractArr || []);
|
|
|
+ projectContractData(projectContractArr || [])
|
|
|
} else {
|
|
|
projectInfoData.value = projectInfo
|
|
|
}
|
|
|
@@ -183,7 +187,7 @@ const setLogoNameColor = (theme) => {
|
|
|
if (theme === 'light') {
|
|
|
filter = 'invert(0%) sepia(100%) saturate(0%) hue-rotate(235deg) brightness(107%) contrast(103%)'
|
|
|
}
|
|
|
- document.getElementById('hc-logo-name').style.filter = filter;
|
|
|
+ document.getElementById('hc-logo-name').style.filter = filter
|
|
|
} catch {}
|
|
|
}
|
|
|
|
|
|
@@ -214,10 +218,10 @@ const projectContractData = (projectContractData) => {
|
|
|
})
|
|
|
//处理其他数据
|
|
|
projectContract.value = projectContractData
|
|
|
- const projectId = useAppState.getProjectId //项目ID
|
|
|
- const contractId = useAppState.getContractId //合同段ID
|
|
|
- const UserProjectInfo = useAppState.getProjectInfo
|
|
|
- const UserContractInfo = useAppState.getContractInfo
|
|
|
+ const projectId = useAppState.getProjectId //项目ID
|
|
|
+ const contractId = useAppState.getContractId //合同段ID
|
|
|
+ const UserProjectInfo = useAppState.getProjectInfo
|
|
|
+ const UserContractInfo = useAppState.getContractInfo
|
|
|
//查询缓存的选中ID是否存在
|
|
|
const pid = projectContractData.findIndex(item => Number(item.id) === Number(projectId))
|
|
|
const contractList = projectContractData[pid]?.contractInfoList || []
|
|
|
@@ -225,9 +229,9 @@ const projectContractData = (projectContractData) => {
|
|
|
//如果缓存的选中ID不存在
|
|
|
if (cid === -1) {
|
|
|
//取项目数组中的第一个数据
|
|
|
- let letProjectInfo = projectContractData[0];
|
|
|
+ let letProjectInfo = projectContractData[0]
|
|
|
let contractInfoList = letProjectInfo?.contractInfoList || []
|
|
|
- let letContractInfo = contractInfoList[0] || {};
|
|
|
+ let letContractInfo = contractInfoList[0] || {}
|
|
|
projectValue.value = letContractInfo?.id
|
|
|
projectInfo.value = letProjectInfo
|
|
|
contractInfo.value = letContractInfo
|
|
|
@@ -252,9 +256,9 @@ const projectContractData = (projectContractData) => {
|
|
|
//项目被选择
|
|
|
const ElCascaderRef = ref(null)
|
|
|
const projectContractChange = (val) => {
|
|
|
- const Nodes = ElCascaderRef.value.getCheckedNodes();
|
|
|
- const UserProjectInfo = Nodes[0].parent.data;
|
|
|
- const UserContractInfo = Nodes[0].data;
|
|
|
+ const Nodes = ElCascaderRef.value.getCheckedNodes()
|
|
|
+ const UserProjectInfo = Nodes[0].parent.data
|
|
|
+ const UserContractInfo = Nodes[0].data
|
|
|
//缓存项目数据
|
|
|
useAppState.setProjectId(val[0])
|
|
|
useAppState.setContractId(val[1])
|
|
|
@@ -263,7 +267,7 @@ const projectContractChange = (val) => {
|
|
|
//更改界面更新
|
|
|
projectInfo.value = UserProjectInfo
|
|
|
contractInfo.value = UserContractInfo
|
|
|
- window.$message?.info('切换了项目，数据更新中');
|
|
|
+ window.$message?.info('切换了项目，数据更新中')
|
|
|
//刷新路由
|
|
|
reloadRouter.value = false
|
|
|
nextTick(()=>{
|
|
|
@@ -273,48 +277,48 @@ const projectContractChange = (val) => {
|
|
|
|
|
|
//菜单被点击
|
|
|
const MenuBarChange = (item) => {
|
|
|
- MenuBarKey.value = item?.code;
|
|
|
+ MenuBarKey.value = item?.code
|
|
|
setIsCollapse(item?.code)
|
|
|
- router.push({name: item?.code});
|
|
|
+ router.push({ name: item?.code })
|
|
|
}
|
|
|
|
|
|
//首页
|
|
|
const logoClick = () => {
|
|
|
router.push({
|
|
|
- name: useAppState.homeUrl
|
|
|
- });
|
|
|
+ name: useAppState.homeUrl,
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
//项目档案汇总
|
|
|
const userProjectClick = () => {
|
|
|
- router.push({path: '/user/project'});
|
|
|
+ router.push({ path: '/user/project' })
|
|
|
}
|
|
|
const msgCount = ref({
|
|
|
})
|
|
|
-const msgChange=ref(0)
|
|
|
+const msgChange = ref(0)
|
|
|
//推送系统
|
|
|
-let socket;
|
|
|
+let socket
|
|
|
const setInitSocket = () => {
|
|
|
- const user_id = userInfo.value.user_id;
|
|
|
- socket = new WebSocket(website.socket + user_id);
|
|
|
+ const user_id = userInfo.value.user_id
|
|
|
+ socket = new WebSocket(website.socket + user_id)
|
|
|
try {
|
|
|
socket.onopen = function (evt) {
|
|
|
- console.log('websocket链接成功');
|
|
|
- };
|
|
|
+ console.log('websocket链接成功')
|
|
|
+ }
|
|
|
socket.onclose = function (evt) {
|
|
|
console.log('websocket连接已断开')
|
|
|
- };
|
|
|
- socket.onmessage = function ({data}) {
|
|
|
+ }
|
|
|
+ socket.onmessage = function ({ data }) {
|
|
|
if (data) {
|
|
|
msgCount.value = data
|
|
|
- console.log(data,'消息信息');
|
|
|
+ console.log(data, '消息信息')
|
|
|
msgChange.value++
|
|
|
|
|
|
}
|
|
|
- };
|
|
|
- socket.onerror = function ({data}) {
|
|
|
+ }
|
|
|
+ socket.onerror = function ({ data }) {
|
|
|
console.log('发生错误:', data)
|
|
|
- };
|
|
|
+ }
|
|
|
} catch {
|
|
|
}
|
|
|
}
|
|
|
@@ -323,10 +327,10 @@ const setInitSocket = () => {
|
|
|
const socketSend = (msg) => {
|
|
|
try {
|
|
|
if (socket) {
|
|
|
- socket.send(msg);
|
|
|
+ socket.send(msg)
|
|
|
} else {
|
|
|
setTimeout(() => {
|
|
|
- socket.send(msg);
|
|
|
+ socket.send(msg)
|
|
|
}, 1000)
|
|
|
}
|
|
|
} catch {
|
|
|
@@ -343,7 +347,6 @@ const socketSend = (msg) => {
|
|
|
.hc-header-view .hc-header-content .hc-header-cascader-box {
|
|
|
.el-cascader {
|
|
|
width: 100%;
|
|
|
- top: -10px;
|
|
|
}
|
|
|
.el-cascader .el-input .el-input__wrapper {
|
|
|
padding: 4px 15px;
|
