| | |
| | | <div>
|
| | | <a-layout id="components-layout-demo-custom-trigger" :style="{ height: '100vh' }">
|
| | | <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
|
| | | <div class="logo">{{ collapsed ? collapsed : '预警响应系统' }}</div>
|
| | | <div class="logo" v-if="!collapsed">{{ '预警响应系统' }}</div>
|
| | | <div class="logo" v-else><a-icon type="alert" /></div>
|
| | | <menuSider />
|
| | | </a-layout-sider>
|
| | | <a-layout>
|
| | | <a-layout-header style="background: #fff; padding: 0">
|
| | | <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
|
| | | @click="() => (collapsed = !collapsed)" />
|
| | | @click="() => (collapsed = !collapsed)"/>
|
| | | <a-dropdown>
|
| | | <a class="ant-dropdown-link" @click="e => e.preventDefault()">
|
| | | 您好,李静 <a-icon type="down" />
|
| | | 您好,{{userInfo.realName}} <a-icon type="down"/>
|
| | | </a>
|
| | | <a-menu slot="overlay">
|
| | | <a-menu-item>
|
| | | <a href="javascript:;">修改密码</a>
|
| | | <a href="javascript:;" @click="editPwd">修改密码</a>
|
| | | </a-menu-item>
|
| | | <a-menu-item>
|
| | | <a href="javascript:;">回到首页</a>
|
| | | <a href="javascript:;" @click="backHome">回到首页</a>
|
| | | </a-menu-item>
|
| | | <a-menu-item>
|
| | | <a @click="logout">退出登录</a>
|
| | | </a-menu-item>
|
| | | </a-menu>
|
| | | </a-dropdown>
|
| | |
|
| | | </a-layout-header>
|
| | | <TabsHeader :pageList="pageList" :activePage="activePage" @change="changePage" @close="remove" />
|
| | | <a-layout-content :style="{
|
| | | margin: '15px 16px 24px 16px',
|
| | | }">
|
| | | <!-- Content -->
|
| | | <router-view ref="tabContent"></router-view>
|
| | | <div style="height: 30px"></div>
|
| | | <keep-alive include="notice">
|
| | | <router-view ref="tabContent"></router-view>
|
| | | </keep-alive>
|
| | | <div style="height: 30px;text-align: center;line-height: 30px">
|
| | | 技术支持:技术保障部
|
| | | </div>
|
| | | </a-layout-content>
|
| | | </a-layout>
|
| | |
|
| | | </a-layout>
|
| | | <center style="textAlign: center;margin-left: 5%;margin-top:50px;">
|
| | | 技术支持:中国科学院
|
| | | </center>
|
| | | <pwd-mod ref="pwdMod"></pwd-mod>
|
| | | <!-- <center style="textAlign: center;margin-left: 5%;margin-top:50px;">-->
|
| | | <!-- 技术支持:中国科学院-->
|
| | | <!-- </center>-->
|
| | | </div>
|
| | | </template>
|
| | |
|
| | | <script>
|
| | | import menuSider from "@/layout/menuSider";
|
| | | import TabsHeader from '@/components/TabsHeader';
|
| | | import pwdMod from "@/views/Admin/components/pwdMod";
|
| | | import { loginOut, getDistrictInfo } from "@/api/login";
|
| | | import { Session, getUserInfo} from '@/util/storage';
|
| | | import Cookies from "js-cookie";
|
| | | import {getAreaWithUserIfo} from "@/api/user";
|
| | | export default {
|
| | | name: "Home",
|
| | | data() {
|
| | | return {
|
| | | userInfo: getUserInfo(),
|
| | | collapsed: false, //返回logo图片或表述
|
| | | pageList: [],
|
| | | activePage: '',
|
| | |
| | | components: {
|
| | | menuSider,
|
| | | TabsHeader,
|
| | | pwdMod
|
| | | },
|
| | | created() {
|
| | | const route = this.$route
|
| | |
| | | })
|
| | | this.addListener()
|
| | | }
|
| | | this.getAreaUsers(getUserInfo().districtId)
|
| | | },
|
| | | watch: {
|
| | | '$route': function(newRoute) {
|
| | |
| | | }
|
| | | }
|
| | | },
|
| | | methods: { |
| | | logout(){ |
| | | this.$router.push('/') |
| | | methods: {
|
| | | backHome(){
|
| | | this.$router.push('/home')
|
| | | },
|
| | |
|
| | | editPwd(){
|
| | | const t = this
|
| | | t.$refs.pwdMod.updateType = 1
|
| | | t.$refs.pwdMod.form.uid = t.userInfo.uid
|
| | | t.$refs.pwdMod.visible = true
|
| | | },
|
| | |
|
| | | logout(){
|
| | | const t = this
|
| | | this.$confirm({
|
| | | title: '提示',
|
| | | content: h => <div>该操作将登出,是否继续?</div>,
|
| | | cancelText: '取消',
|
| | | okText: '确认',
|
| | | centered: true,
|
| | | onOk() {
|
| | | loginOut().then(res=>{
|
| | | if (res.data.code === 100) {
|
| | | Session.clear(); // 清除缓存/token等
|
| | | // 使用 reload 时,不需要调用 resetRoute() 重置路由
|
| | | t.$router.push('/')
|
| | | // window.location.reload();
|
| | | } else {
|
| | | this.$message.warning(res.data.msg);
|
| | | }
|
| | | })
|
| | | },
|
| | | onCancel() {
|
| | | console.log('Cancel');
|
| | | },
|
| | | class: 'test',
|
| | | });
|
| | | },
|
| | |
|
| | | // async getDistrictInfo(){
|
| | | // let res = await getDistrictInfo()
|
| | | // if(res.data.code == 100){
|
| | | // console.log(res.data.data)
|
| | | // Cookies.set('district', res.data.data);
|
| | | // console.log(Cookies.get('district'),666)
|
| | | // } else {
|
| | | // this.$message.warning(res.data.msg);
|
| | | // }
|
| | | // },
|
| | |
|
| | | changePage(key) {
|
| | | this.activePage = key
|
| | | const page = this.pageList.find(item => item.path === key)
|
| | |
| | | const path = closePath && closePath.split('?')[0]
|
| | | this.remove(path, nextRoute)
|
| | | },
|
| | | async getAreaUsers(districtId) {
|
| | | let t = this
|
| | | let res = await getAreaWithUserIfo()
|
| | | if (res.data.code == 100) {
|
| | | if (res.data.data) {
|
| | | t.userTitTree(res.data.data)
|
| | | const areaUsers = t.findNodeById(res.data.data, districtId).children
|
| | | localStorage.removeItem('areaUsers')
|
| | | localStorage.setItem('areaUsers',JSON.stringify(areaUsers))
|
| | | } else {
|
| | | console.log('暂无数据')
|
| | | }
|
| | | } else {
|
| | | this.$message.warning(res.data.msg);
|
| | | }
|
| | | },
|
| | |
|
| | | // 根据id查对象
|
| | | findNodeById(data, value) {
|
| | | for (const node of data) {
|
| | | if (node.id === value) {
|
| | | return node;
|
| | | }
|
| | | if (node.children) {
|
| | | const foundNode = this.findNodeById(node.children, value);
|
| | | if (foundNode) {
|
| | | return foundNode;
|
| | | }
|
| | | }
|
| | | }
|
| | | return null;
|
| | | },
|
| | |
|
| | | // 将树状数据name字段放入users的姓名电话
|
| | | userTitTree(treeData) {
|
| | | for (const node of treeData) {
|
| | | if (node.users) {
|
| | | node.users = node.users.filter(i => i.roleId == 3)
|
| | | node.users = node.users.map((i) => {
|
| | | return {
|
| | | ...i,
|
| | | unittype: node.type,
|
| | | districtId: node.id
|
| | | }
|
| | | })
|
| | | node.name = node.name + '(' + node.users.map(i => i.realName + ' ' + i.phone).join(',') + ')'
|
| | | }
|
| | | if (node.children) {
|
| | | this.userTitTree(node.children)
|
| | | }
|
| | | }
|
| | | return treeData
|
| | | }
|
| | | }
|
| | | };
|
| | | </script>
|