From 128a2f55ef26f7e1505955fa56aa61e34f39a772 Mon Sep 17 00:00:00 2001 From: wl <173@qq.com> Date: 星期五, 30 十二月 2022 14:12:49 +0800 Subject: [PATCH] feat: 接收设置 --- .history/src/views/layout/components/Header/index_20221230112943.vue | 444 + .history/src/views/layout/components/Header/index_20221230115549.vue | 455 + .history/src/views/layout/components/Header/index_20221230133832.vue | 456 + .history/src/views/layout/components/Header/index_20221230113841.vue | 445 + .history/src/views/layout/components/Header/index_20221230134310.vue | 456 + .history/src/views/layout/components/Header/index_20221230134344.vue | 456 + .history/src/views/layout/components/Header/index_20221230115756.vue | 456 + .history/src/views/layout/components/Header/index_20221230133647.vue | 460 + .history/src/views/layout/components/Header/index_20221230103239.vue | 426 + .history/src/views/layout/components/Header/index_20221230134101.vue | 456 + .history/src/views/layout/components/Header/index_20221230134149.vue | 456 + .history/src/views/layout/components/Header/index_20221230102654.vue | 427 + .history/src/views/layout/components/Header/index_20221230104035.vue | 426 + .history/src/views/layout/components/Header/index_20221230134237.vue | 456 + .history/src/views/layout/components/Header/index_20221230120008.vue | 456 + .history/src/views/layout/components/Header/index_20221230135927.vue | 460 + .history/src/views/layout/components/Header/index_20221230135210.vue | 455 + .history/src/views/layout/components/Header/index_20221230102959.vue | 427 + .history/src/views/layout/components/Header/index_20221230133915.vue | 456 + .history/src/views/layout/components/Header/index_20221230112843.vue | 444 + .history/src/views/layout/components/Header/index_20221230134008.vue | 456 + src/views/layout/components/Header/index.vue | 36 .history/src/views/layout/components/Header/index_20221230115758.vue | 456 + .history/src/views/layout/components/Header/index_20221230113745.vue | 443 + .history/src/views/layout/components/Header/index_20221230113139.vue | 444 + .history/src/views/layout/components/Header/index_20221230133628.vue | 460 + .history/src/views/layout/components/Header/index_20221230103156.vue | 428 + .history/src/views/layout/components/Header/index_20221230104109.vue | 431 + .history/src/views/layout/components/Header/index_20221230141053.vue | 457 + .history/src/views/layout/components/Header/index_20221230102745.vue | 427 + .history/src/views/layout/components/Header/index_20221230140925.vue | 460 + .history/src/views/layout/components/Header/index_20221230114303.vue | 445 + .history/src/views/layout/components/Header/index_20221230113142.vue | 444 + .history/src/views/layout/components/Header/index_20221230134125.vue | 456 + .history/src/views/layout/components/Header/index_20221230133823.vue | 457 + .history/src/views/layout/components/Header/index_20221230133408.vue | 459 + .history/src/views/layout/components/Header/index_20221230134408.vue | 454 + .history/src/views/layout/components/Header/index_20221230105130.vue | 434 + 38 files changed, 16,615 insertions(+), 5 deletions(-) diff --git a/.history/src/views/layout/components/Header/index_20221230102654.vue b/.history/src/views/layout/components/Header/index_20221230102654.vue new file mode 100644 index 0000000..ba7c2f3 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230102654.vue @@ -0,0 +1,427 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + <el-checkbox v-model="checked">澶囬�夐」</el-checkbox> + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230102745.vue b/.history/src/views/layout/components/Header/index_20221230102745.vue new file mode 100644 index 0000000..726f77e --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230102745.vue @@ -0,0 +1,427 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + <el-checkbox v-model="checked">{{channelData.columnName}}</el-checkbox> + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230102959.vue b/.history/src/views/layout/components/Header/index_20221230102959.vue new file mode 100644 index 0000000..1645b3e --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230102959.vue @@ -0,0 +1,427 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + <el-checkbox v-model="channelData.isReceive==null?false:true">{{channelData.columnName}}</el-checkbox> + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230103156.vue b/.history/src/views/layout/components/Header/index_20221230103156.vue new file mode 100644 index 0000000..e1df2cd --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230103156.vue @@ -0,0 +1,428 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <template slot-scope="scope"> <el-checkbox v-model="checked3">{{Scope.row.columnName}}</el-checkbox></template> + + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Scope } from "eslint-scope"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230103239.vue b/.history/src/views/layout/components/Header/index_20221230103239.vue new file mode 100644 index 0000000..9b6f129 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230103239.vue @@ -0,0 +1,426 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + + <el-table-column label="鍏ㄩ儴" min-width="5" align="center"> + <el-checkbox v-model="checked3">{{channelData.columnName}}</el-checkbox> + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230104035.vue b/.history/src/views/layout/components/Header/index_20221230104035.vue new file mode 100644 index 0000000..828ea9c --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230104035.vue @@ -0,0 +1,426 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > + + <el-table-column label="鍏ㄩ儴" min-width="5" align="center"> + <el-checkbox v-model="checked3">娴嬭瘯</el-checkbox> + </el-table-column> + </el-table> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230104109.vue b/.history/src/views/layout/components/Header/index_20221230104109.vue new file mode 100644 index 0000000..1952b51 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230104109.vue @@ -0,0 +1,431 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230105130.vue b/.history/src/views/layout/components/Header/index_20221230105130.vue new file mode 100644 index 0000000..0a6c56a --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230105130.vue @@ -0,0 +1,434 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230112843.vue b/.history/src/views/layout/components/Header/index_20221230112843.vue new file mode 100644 index 0000000..251248d --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230112843.vue @@ -0,0 +1,444 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + val.isRecvice + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=> this.$refs.multipleTable.toggleRowSelection(item,item.isRecvice==null?false:true)) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230112943.vue b/.history/src/views/layout/components/Header/index_20221230112943.vue new file mode 100644 index 0000000..29a5057 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230112943.vue @@ -0,0 +1,444 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + val.isRecvice + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=>this.$refs.multipleTable.toggleRowSelection(item,item.isRecvice==null?false:true)) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230113139.vue b/.history/src/views/layout/components/Header/index_20221230113139.vue new file mode 100644 index 0000000..9cbf3fe --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230113139.vue @@ -0,0 +1,444 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + val.isRecvice + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,item.isRecvice==null?false:true);console.log(item))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230113142.vue b/.history/src/views/layout/components/Header/index_20221230113142.vue new file mode 100644 index 0000000..ef1dabc --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230113142.vue @@ -0,0 +1,444 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + val.isRecvice + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,item.isRecvice==null?false:true);console.log(item)}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230113745.vue b/.history/src/views/layout/components/Header/index_20221230113745.vue new file mode 100644 index 0000000..154ca25 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230113745.vue @@ -0,0 +1,443 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + val.isRecvice + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230113841.vue b/.history/src/views/layout/components/Header/index_20221230113841.vue new file mode 100644 index 0000000..d667af1 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230113841.vue @@ -0,0 +1,445 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + val.isRecvice + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + console.log(row); + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,item.isRecvice==null?false:true);console.log(item)}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230114303.vue b/.history/src/views/layout/components/Header/index_20221230114303.vue new file mode 100644 index 0000000..e1d0ead --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230114303.vue @@ -0,0 +1,445 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + val.isRecvice + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + }) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + console.log(row); + this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(item)}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230115549.vue b/.history/src/views/layout/components/Header/index_20221230115549.vue new file mode 100644 index 0000000..163b2c5 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230115549.vue @@ -0,0 +1,455 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:null + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + .then(res => { + this.channelData=res.data + }) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(item)}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230115756.vue b/.history/src/views/layout/components/Header/index_20221230115756.vue new file mode 100644 index 0000000..dfd52ac --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230115756.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:null + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + .then(res => + console.log(res) + ) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(item)}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230115758.vue b/.history/src/views/layout/components/Header/index_20221230115758.vue new file mode 100644 index 0000000..dfd52ac --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230115758.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:null + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + .then(res => + console.log(res) + ) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(item)}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230120008.vue b/.history/src/views/layout/components/Header/index_20221230120008.vue new file mode 100644 index 0000000..b4158cf --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230120008.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:null + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + .then(res => + console.log(res) + ) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(item)}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230133408.vue b/.history/src/views/layout/components/Header/index_20221230133408.vue new file mode 100644 index 0000000..3f7d2b8 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230133408.vue @@ -0,0 +1,459 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + .then(res => + console.log(res) + ) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(item)}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230133628.vue b/.history/src/views/layout/components/Header/index_20221230133628.vue new file mode 100644 index 0000000..4b0de57 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230133628.vue @@ -0,0 +1,460 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + .then(res => + console.log(res) + ) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(item)}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230133647.vue b/.history/src/views/layout/components/Header/index_20221230133647.vue new file mode 100644 index 0000000..a50a6cc --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230133647.vue @@ -0,0 +1,460 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + .then(res => + console.log(res) + ) +console.log(val); + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230133823.vue b/.history/src/views/layout/components/Header/index_20221230133823.vue new file mode 100644 index 0000000..7914680 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230133823.vue @@ -0,0 +1,457 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + .then(res => + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230133832.vue b/.history/src/views/layout/components/Header/index_20221230133832.vue new file mode 100644 index 0000000..c02da8b --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230133832.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230133915.vue b/.history/src/views/layout/components/Header/index_20221230133915.vue new file mode 100644 index 0000000..0095f08 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230133915.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230134008.vue b/.history/src/views/layout/components/Header/index_20221230134008.vue new file mode 100644 index 0000000..0228b9f --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230134008.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(userInfo.user) + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230134101.vue b/.history/src/views/layout/components/Header/index_20221230134101.vue new file mode 100644 index 0000000..d270ef2 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230134101.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val) + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230134125.vue b/.history/src/views/layout/components/Header/index_20221230134125.vue new file mode 100644 index 0000000..295239b --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230134125.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val[0].id) + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val.id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230134149.vue b/.history/src/views/layout/components/Header/index_20221230134149.vue new file mode 100644 index 0000000..6c789b6 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230134149.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log() + this.messageColumnSet.userId=userInfo.user.id + if(val.isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val.isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val.isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val[0].id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230134237.vue b/.history/src/views/layout/components/Header/index_20221230134237.vue new file mode 100644 index 0000000..a62bfa9 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230134237.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log() + this.messageColumnSet.userId=userInfo.user.id + if(val[0].isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val[0].isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val[0].isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val[0].id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230134310.vue b/.history/src/views/layout/components/Header/index_20221230134310.vue new file mode 100644 index 0000000..39f3680 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230134310.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val[0]) + this.messageColumnSet.userId=userInfo.user.id + if(val[0].isRecvice==null){ + this.messageColumnSet.isRecvice=1 + } + if(val[0].isRecvice==1){ + this.messageColumnSet.isRecvice=0 + } + if(val[0].isRecvice==0){ + this.messageColumnSet.isRecvice=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val[0].id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230134344.vue b/.history/src/views/layout/components/Header/index_20221230134344.vue new file mode 100644 index 0000000..a7fcc72 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230134344.vue @@ -0,0 +1,456 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + userId:null, + isRecvice:null + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val[0]) + this.messageColumnSet.userId=userInfo.user.id + if(val[0].isReceive==null){ + this.messageColumnSet.isReceive=1 + } + if(val[0].isReceive==1){ + this.messageColumnSet.isReceive=0 + } + if(val[0].isReceive==0){ + this.messageColumnSet.isReceive=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val[0].id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230134408.vue b/.history/src/views/layout/components/Header/index_20221230134408.vue new file mode 100644 index 0000000..a55ce0a --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230134408.vue @@ -0,0 +1,454 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val[0]) + this.messageColumnSet.userId=userInfo.user.id + if(val[0].isReceive==null){ + this.messageColumnSet.isReceive=1 + } + if(val[0].isReceive==1){ + this.messageColumnSet.isReceive=0 + } + if(val[0].isReceive==0){ + this.messageColumnSet.isReceive=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update/'+val[0].id, + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230135210.vue b/.history/src/views/layout/components/Header/index_20221230135210.vue new file mode 100644 index 0000000..ca9266e --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230135210.vue @@ -0,0 +1,455 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val[0]) + this.messageColumnSet.userId=userInfo.user.id + this.messageColumnSet.messageColumnId=val[0].id + if(val[0].isReceive==null){ + this.messageColumnSet.isReceive=1 + } + if(val[0].isReceive==1){ + this.messageColumnSet.isReceive=0 + } + if(val[0].isReceive==0){ + this.messageColumnSet.isReceive=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update', + data: this.messageColumnSet + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230135927.vue b/.history/src/views/layout/components/Header/index_20221230135927.vue new file mode 100644 index 0000000..2003dda --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230135927.vue @@ -0,0 +1,460 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val[0]) + this.messageColumnSet.userId=userInfo.user.id + this.messageColumnSet.messageColumnId=val[0].id + if(val[0].isReceive==null){ + this.messageColumnSet.isReceive=1 + } + if(val[0].isReceive==1){ + this.messageColumnSet.isReceive=0 + } + if(val[0].isReceive==0){ + this.messageColumnSet.isReceive=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update', + data: this.messageColumnSet + }).then(res=>{ + this.$message ({ + success:"", + msg:"xx" + }) + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230140925.vue b/.history/src/views/layout/components/Header/index_20221230140925.vue new file mode 100644 index 0000000..985e4f7 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230140925.vue @@ -0,0 +1,460 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val[0]) + this.messageColumnSet.userId=userInfo.user.id + this.messageColumnSet.messageColumnId=val[0].id + if(val[0].isReceive==null){ + this.messageColumnSet.isReceive=1 + } + if(val[0].isReceive==1){ + this.messageColumnSet.isReceive=0 + } + if(val[0].isReceive==0){ + this.messageColumnSet.isReceive=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update', + data: this.messageColumnSet + }).then(res=>{ + this.$message ({ + success:"success", + msg:"璁㈤槄鎴愬姛" + }) + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/.history/src/views/layout/components/Header/index_20221230141053.vue b/.history/src/views/layout/components/Header/index_20221230141053.vue new file mode 100644 index 0000000..14a4ef7 --- /dev/null +++ b/.history/src/views/layout/components/Header/index_20221230141053.vue @@ -0,0 +1,457 @@ +<template> + <!-- 澶撮儴 --> + <el-header v-if="show"> + <!-- 宸︿晶鑿滃崟 --> + <div class="header-left"> + <div class="menu-left__item" v-for="(item, index) in menuLeftList" :key="item.id" @click="changeActive(index)"> + <span :class="item.checked ? 'my-active' : ''" @click="menuChange(item)">{{ item.label }}</span> + </div> + </div> + <!-- 鍙充晶鑿滃崟 --> + <div class="header-right"> + <div class="menu-right__item search"></div> + <!-- 鐧诲綍鐢ㄦ埛 --> + <div class="menu-right__item user" @mousemove="flag.user = true" @mouseleave="flag.user = false"> + <el-avatar :size="20" :src="user.user.icon" v-if="user.user.icon"></el-avatar> + <el-avatar :size="20" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" v-else> + </el-avatar> + <span style="padding: 0 5px;">{{ user.user.username }}</span> + <i class="el-icon-arrow-down"></i> + <!-- 鐢ㄦ埛鎿嶄綔 --> + <div class="user-card" v-if="flag.user" @mouseleave="flag.user = false"> + <el-card class="box-card"> + <div class="user-card__item" @click="updatePassword()">淇敼瀵嗙爜</div> + <div style="margin-top: 10px;" class="user-card__item" @click="baseInfo()">鍩烘湰淇℃伅</div> + </el-card> + </div> + </div> + <!-- 娑堟伅 --> + <div class="menu-right__item btn" @mousemove="flag.message = true" @mouseleave="flag.message = false"> + <el-tooltip effect="dark" content="娑堟伅涓績" placement="bottom-end" :hide-after="600"> + <el-badge :value="messageCounts" class="item"> + <i @click="getMessage" class="el-icon-message-solid"></i> + </el-badge> + </el-tooltip> + <!-- 娑堟伅鎿嶄綔 --> + <div class="message-card" v-if="flag.message" @mouseleave="flag.message = false"> + <el-card class="box-card"> + <div class="card-header"> + <span>娑堟伅涓績</span> + <el-button type="text" @click="channelSetting">鎺ユ敹璁剧疆</el-button> + </div> + <div v-for="item in menuMessageList" :key="item.id" class="message-card__item"> + <router-link to='/home/operate/message/messageIndex'> + <span class="label">{{ item.columnName }}</span> + </router-link> + <span>({{ item.messageNumber }})</span> + </div> + </el-card> + </div> + </div> + <!-- 閫�鍑虹櫥褰� --> + <div class="menu-right__item btn" @click="loginout"> + <el-tooltip effect="dark" content="閫�鍑虹櫥褰�" placement="bottom-end" :hide-after="1000"> + <i class="el-icon-switch-button"></i> + </el-tooltip> + </div> + <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" + :before-close="handleChannelClose"> + <el-table + ref="multipleTable" + :header-cell-style="{ + 'font-size': '14px', + 'font-weight': '650', + 'line-height': '45px', + }" + :data="channelData" + style="width: 100%" + @selection-change="handleSelectionChange" + > <el-table-column + type="selection" + width="55" + + > + </el-table-column> + <el-table-column prop="columnName" label="鍏ㄩ儴" min-width="5" align="center"> + <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> + </el-table-column> + </el-table> + + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> + </el-dialog> + <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" + :before-close="handleClose"> + <updatePassword /> + </el-dialog> + <el-dialog :visible.sync="baseInformationVisible" width="35%" title="鍩烘湰淇℃伅" v-if="baseInformationVisible" + > + <el-form :model="info" class="info" label-width="6vw"> + <el-form-item label="鐢ㄦ埛ID" min-width="6"> + <el-input v-model="info.id"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鐢ㄦ埛鍚嶇О" min-width="10"> + <el-input v-model="info.nickName"></el-input> + </el-form-item> + <el-form-item prop="nickName" label="鎵�灞炲鍚�" min-width="8"> + <el-input v-model="info.username"></el-input> + </el-form-item> + <el-form-item prop="mobile" label="鑱旂郴鏂瑰紡" min-width="7"> + <el-input v-model="info.mobile"></el-input> + </el-form-item> + <el-form-item prop="jobTitle" label="鎵�灞炶亴鍔�" min-width="8"> + <el-input v-model="info.jobTitle"></el-input> + </el-form-item> + <el-form-item prop="createTime" label="鍒涘缓鏃堕棿" min-width="10"> + <el-input v-model="info.createTime"></el-input> + </el-form-item> + </el-form> + + </el-dialog> + </div> + </el-header> +</template> + +<script> +import updatePassword from "./updatePassword"; +import users from "@/api/users"; +import { Message } from "element-ui"; + +export default { + components: { + updatePassword + }, + data() { + return { + baseInformationVisible: false, + updatePasswordDialog: false, + channelSettingVisible:false, + checked3:true, + menuLeftList: [ + { + label: '椹鹃┒鑸�', + checked: true, + url: '', + id: '1f' + }, + { + label: '瑙嗛宸℃煡', + checked: true, + url: '', + id: '2f' + }, + { + label: '鎵ф硶绠$悊', + checked: true, + url: '', + id: '3f', + }, + ], + flag: { + user: false, + message: false + }, + user: '', + menuMessageList: [], + channelData: [], + messageCounts: 0, + keyword: '', + info: null, + show: false, + messageColumnSet:{ + } + }; + }, + created() { + this.setLoginInfo(); + }, + methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val[0]) + this.messageColumnSet.userId=userInfo.user.id + this.messageColumnSet.messageColumnId=val[0].id + if(val[0].isReceive==null){ + this.messageColumnSet.isReceive=1 + } + if(val[0].isReceive==1){ + this.messageColumnSet.isReceive=0 + } + if(val[0].isReceive==0){ + this.messageColumnSet.isReceive=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update', + data: this.messageColumnSet + }).then(res=>{ + this.$message.success("璁㈤槄鎴愬姛") + }) + }, + baseInfo() { + this.baseInformationVisible = true; + const name = sessionStorage.getItem('name'); + this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + .then(res => { + sessionStorage.setItem('user', JSON.stringify(res.data)); + this.info = res.data.user; + }) + }, + channelSetting(row){ + this.channelSettingVisible=true; + const userInfo = JSON.parse(sessionStorage.getItem('user')); + this.$axios({ + method: 'get', + url: 'sccg/message_column/getShowColumn?'+'id='+userInfo.user.id + }) + .then(res => { + this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) + }) + }, + handleChannelClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.dialogUpload = false; + done(); + }) + .catch((_) => { }); + }, + handleClose(done) { + this.$confirm("纭鍏抽棴锛�") + .then((_) => { + this.channelSettingVisible = false; + done(); + }) + .catch((_) => { }); + }, + //淇敼瀵嗙爜 + updatePassword() { + this.updatePasswordDialog = true; + }, + // 閫�鍑哄姛鑳� + loginout() { + this.$confirm('閫�鍑虹郴缁熺‘璁�', '纭鎻愮ず', { + confirmButtonText: '纭畾', + cancelButtonText: '鍙栨秷', + type: 'warning' + }).then(() => { + sessionStorage.clear(); + this.$router.push({ path: "/login" }) + }).catch(err => { + }) + }, + // 鏀瑰彉閫変腑鐘舵�� + changeActive(idx) { + this.menuLeftList.forEach((item, index) => { + item.checked = index === idx; + }) + }, + // 璁剧疆鐢ㄦ埛鍩烘湰淇℃伅 + async setLoginInfo() { + const info = JSON.parse(sessionStorage.getItem('user')); + if (info) { + this.user = info; + } else { + this.user = await this.getLoginInfo(); + } + this.getMessage(); + this.show = true + }, + // 鑾峰彇鐧诲綍鐢ㄦ埛淇℃伅 + async getLoginInfo() { + const name = sessionStorage.getItem('name'); + let res = await this.$axios({ + method: 'get', + url: 'sccg/admin/info?name=' + name, + }) + sessionStorage.setItem('user', JSON.stringify(res.data)); + return res.data; + }, + getMessage() { + const userInfo = JSON.parse(sessionStorage.getItem('user')); + users.getMessageAuditList({ userId: userInfo.user.id }) + .then(res => { + this.menuMessageList = res; + this.menuMessageList.forEach(item => { + this.messageCounts += item.messageNumber; + }) + }) + .catch(err => this.$message.error(`${err}`)) + }, + menuChange(data) { + if (data.id === '1f') { + window.open('http://cockpit.patstech.net:28081/cockpit/dist/board.html#/share-board/zfu0LsJ9', '_blank'); + } + if (data.id === '2f') { + this.$router.push({path: "/home/video"}) + } + if (data.id === '3f') { + this.$router.push({path: "/home/operate/casepool/pool"}) + } + } + } +}; +</script> + +<style lang="scss" scoped> +::v-deep .el-form { + padding: 3vh 5vw; + + .el-form-item__label { + color: #4b9bb7; + } +} + +.el-header { + background-color: #071a38; + text-align: center; + line-height: 60px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + color: #4b9bb7; + + .header-left { + display: flex; + flex: 1; + + .menu-left__item { + width: 120px; + + span { + display: block; + line-height: 40px; + width: 100%; + + &:hover { + cursor: pointer; + color: #fff; + } + } + } + + .my-active { + border-radius: 20px; + color: #fff; + background-color: #092c4a; + } + } + + .header-right { + display: flex; + padding-left: 10vw; + flex: 1; + + .item { + width: 100%; + position: relative; + + :deep(.is-fixed) { + width: 20px; + height: 20px; + padding: 0; + top: 20px; + right: 30px; + border-radius: 50%; + position: absolute; + } + } + + .search { + flex: 3; + } + + .user { + margin-left: 20px; + flex: 2; + display: flex; + align-items: center; + justify-content: center; + position: relative; + + .user-card { + position: absolute; + top: 60px; + width: 120px; + z-index: 3000; + + .user-card__item { + padding: 5px 0; + + &:hover { + color: #fff; + background-color: #071a38; + } + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + :deep(.el-card__body) { + line-height: 20px; + padding: 10px; + } + } + } + + .btn { + flex: 1; + font-size: 20px; + position: relative; + + .message-card { + position: absolute; + top: 60px; + width: 180px; + left: -50px; + z-index: 3000; + + :deep(.el-card__body) { + padding: 0; + } + + :deep(.el-card) { + background-color: #092c4a; + border: 1px solid #17324c; + color: #4b9bb7; + } + + .card-header { + padding: 0 20px; + line-height: 40px; + font-size: 14px; + display: flex; + border-bottom: 1px solid #17324c; + justify-content: space-between; + } + + .message-card__item { + line-height: 30px; + font-size: 14px; + display: flex; + justify-content: space-between; + padding: 0 20px; + + .label:hover { + cursor: pointer; + color: #fff; + } + } + } + } + + .user:hover, + .btn:hover { + background-color: #092c4a; + cursor: pointer; + } + } +} +</style> \ No newline at end of file diff --git a/src/views/layout/components/Header/index.vue b/src/views/layout/components/Header/index.vue index 6d55cf9..14a4ef7 100644 --- a/src/views/layout/components/Header/index.vue +++ b/src/views/layout/components/Header/index.vue @@ -57,7 +57,7 @@ <el-dialog :visible.sync="channelSettingVisible" width="25%" title="娑堟伅鏍忕洰璁剧疆" v-if="channelSettingVisible" :before-close="handleChannelClose"> <el-table - ref="multipleTable" + ref="multipleTable" :header-cell-style="{ 'font-size': '14px', 'font-weight': '650', @@ -65,7 +65,7 @@ }" :data="channelData" style="width: 100%" - + @selection-change="handleSelectionChange" > <el-table-column type="selection" width="55" @@ -76,7 +76,7 @@ <!-- <template slot-scope="scope">{{ scope.row.id }}</template> --> </el-table-column> </el-table> - <el-button type="button" @click="channelSetting">鏇存柊</el-button> + <el-button type="button" @click="channelSetting">鍙栨秷</el-button> </el-dialog> <el-dialog :visible.sync="updatePasswordDialog" width="40%" title="淇敼瀵嗙爜" v-if="updatePasswordDialog" @@ -114,6 +114,7 @@ <script> import updatePassword from "./updatePassword"; import users from "@/api/users"; +import { Message } from "element-ui"; export default { components: { @@ -155,13 +156,37 @@ messageCounts: 0, keyword: '', info: null, - show: false + show: false, + messageColumnSet:{ + } }; }, created() { this.setLoginInfo(); }, methods: { + handleSelectionChange(val){ + const userInfo = JSON.parse(sessionStorage.getItem('user')); + console.log(val[0]) + this.messageColumnSet.userId=userInfo.user.id + this.messageColumnSet.messageColumnId=val[0].id + if(val[0].isReceive==null){ + this.messageColumnSet.isReceive=1 + } + if(val[0].isReceive==1){ + this.messageColumnSet.isReceive=0 + } + if(val[0].isReceive==0){ + this.messageColumnSet.isReceive=1 + } + this.$axios({ + method: 'post', + url: 'sccg/message_column_set/update', + data: this.messageColumnSet + }).then(res=>{ + this.$message.success("璁㈤槄鎴愬姛") + }) + }, baseInfo() { this.baseInformationVisible = true; const name = sessionStorage.getItem('name'); @@ -174,7 +199,7 @@ this.info = res.data.user; }) }, - channelSetting(){ + channelSetting(row){ this.channelSettingVisible=true; const userInfo = JSON.parse(sessionStorage.getItem('user')); this.$axios({ @@ -183,6 +208,7 @@ }) .then(res => { this.channelData=res.data + // this.channelData.forEach(item=>{this.$refs.multipleTable.toggleRowSelection(item,true);console.log(this.$refs.multipleTable.toggleRowSelection(item,true))}) }) }, handleChannelClose(done) { -- Gitblit v1.8.0