You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
260 lines
9.3 KiB
260 lines
9.3 KiB
<template>
|
|
<div class="m-topnav">
|
|
<div class="title">{{ customerName }}综合服务平台数据看板</div>
|
|
<div class="btn-back" @click="toPage('/')">
|
|
<img class="z-default" src="~@/assets/images/shuju/main/back.png" />
|
|
<img class="z-on" src="~@/assets/images/shuju/main/back-on.png" />
|
|
<span>返回</span>
|
|
</div>
|
|
<div class="nav-list z-left">
|
|
<div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/renfang/index' }"
|
|
@click="toPage('/dataBoard/renfang/index')">
|
|
<span>人房总览</span>
|
|
</div>
|
|
<div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/sida/index' }"
|
|
@click="toPage('/dataBoard/sida/index')">
|
|
<span>四大清单</span>
|
|
</div>
|
|
<div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/fifteen/index' }"
|
|
@click="toPage('/dataBoard/fifteen/index')">
|
|
<span>十五分钟生活圈</span>
|
|
</div>
|
|
<div class="nav-item" >
|
|
<span>一级菜单</span>
|
|
</div>
|
|
</div>
|
|
<div class="nav-list z-right">
|
|
<div class="nav-item">
|
|
<span>一级菜单</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<span>更多菜单</span>
|
|
</div>
|
|
</div>
|
|
<div class="msg">
|
|
<div class="weather">
|
|
<img v-if="weather.weather == '小雨'" src="~@/assets/images/shuju/main/weather/xiaoyu.png" />
|
|
<img v-if="weather.weather == '中雨'" src="~@/assets/images/shuju/main/weather/zhongyu.png" />
|
|
<img v-if="weather.weather == '大雨'" src="~@/assets/images/shuju/main/weather/dayu.png" />
|
|
<img v-if="weather.weather == '雷雨'" src="~@/assets/images/shuju/main/weather/leiyu.png" />
|
|
<img v-if="weather.weather == '雷暴'" src="~@/assets/images/shuju/main/weather/leibao.png" />
|
|
<img v-if="weather.weather == '雨雪'" src="~@/assets/images/shuju/main/weather/yuxue.png" />
|
|
<img v-if="weather.weather == '阴'" src="~@/assets/images/shuju/main/weather/yin.png" />
|
|
<img v-if="weather.weather == '雾'" src="~@/assets/images/shuju/main/weather/wu.png" />
|
|
<img v-if="weather.weather == '风'" src="~@/assets/images/shuju/main/weather/feng.png" />
|
|
<img v-else-if="weather.weather == '雪'" src="~@/assets/images/shuju/main/weather/xue.png" />
|
|
<img v-else-if="weather.weather == '多云'" src="~@/assets/images/shuju/main/weather/duoyun.png" />
|
|
<img v-else src="~@/assets/images/shuju/main/weather/qing.png" />
|
|
<div>{{ weather.temperature }}℃</div>
|
|
<div>{{ weather.weather }}</div>
|
|
</div>
|
|
<div class="date">
|
|
<div class="date-time">{{ showTime }}</div>
|
|
<div class="date-div"></div>
|
|
<div class="date-week">{{ showWeek }}</div>
|
|
</div>
|
|
</div>
|
|
<nav v-if="false" class="m-navbar">
|
|
<div class="navbar__header">
|
|
<h1 class="navbar__brand" @click="$router.push({ name: 'home' })">
|
|
<a class="navbar__brand-lg" href="javascript:;">{{ customerName
|
|
}}</a>
|
|
<a class="navbar__brand-mini" href="javascript:;">{{ customerName.slice(0, 2)
|
|
}}</a>
|
|
</h1>
|
|
</div>
|
|
<div class="navbar__body">
|
|
<el-menu class="navbar__menu mr-auto" mode="horizontal">
|
|
<el-menu-item index="1" @click="
|
|
$store.state.sidebarFold = !$store.state.sidebarFold
|
|
">
|
|
<svg class="icon-svg navbar__icon-menu navbar__icon-menu--switch" aria-hidden="true">
|
|
<use xlink:href="#icon-outdent"></use>
|
|
</svg>
|
|
</el-menu-item>
|
|
<el-menu-item index="2" @click="refresh()">
|
|
<svg class="icon-svg navbar__icon-menu" aria-hidden="true">
|
|
<use xlink:href="#icon-sync"></use>
|
|
</svg>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
<el-menu :default-active="$store.state.mainShuju.activeName" :unique-opened="true"
|
|
:collapseTransition="false" mode="horizontal" class="navbar__menu mr-auto z-div">
|
|
<el-menu-item index="index" @click="toIndexPage">
|
|
<span>首页</span>
|
|
</el-menu-item>
|
|
<template v-for="(menu, idx) in $store.state.mainShuju.menuList">
|
|
<li class="sub-menu" :class="
|
|
$store.state.mainShuju.activeName == menu.id
|
|
? 'z-on'
|
|
: ''
|
|
" v-if="menu.children" :key="menu.id" @click="gotoRouteHandle(menu.id, idx)">
|
|
<span>{{ menu.name }}</span>
|
|
<div class="sub-menu-list">
|
|
<div :class="
|
|
$store.state.mainShuju.activeName ==
|
|
subMenu.id
|
|
? 'z-on'
|
|
: ''
|
|
" :key="subMenu.id" @click="
|
|
gotoRouteHandle(subMenu.id, subIndex)
|
|
" v-for="(subMenu, subIndex) in menu.children">
|
|
{{ subMenu.name }}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<el-menu-item v-else :key="menu.id" :menu="menu" :index="menu.id"
|
|
@click="gotoRouteHandle(menu.id, idx)">
|
|
<span>{{ menu.name }}</span>
|
|
</el-menu-item>
|
|
</template>
|
|
</el-menu>
|
|
<el-menu class="navbar__menu" mode="horizontal">
|
|
<!-- <el-menu-item index="1">
|
|
<el-dropdown placement="bottom"
|
|
:show-timeout="0">
|
|
<el-button size="mini">{{ $t('_lang') }}</el-button>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item v-for="(val, key) in i18nMessages"
|
|
:key="key"
|
|
@click.native="$i18n.locale = key">{{ val._lang }}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-menu-item> -->
|
|
<!-- <el-menu-item index="2">
|
|
<a href="//www.renren.io/"
|
|
target="_blank">
|
|
<svg class="icon-svg navbar__icon-menu"
|
|
aria-hidden="true">
|
|
<use xlink:href="#icon-earth"></use>
|
|
</svg>
|
|
</a>
|
|
</el-menu-item> -->
|
|
<el-menu-item index="3" @click="fullscreenHandle()">
|
|
<svg class="icon-svg navbar__icon-menu" aria-hidden="true">
|
|
<use xlink:href="#icon-fullscreen"></use>
|
|
</svg>
|
|
</el-menu-item>
|
|
<el-menu-item index="4" class="navbar__avatar">
|
|
<el-dropdown placement="bottom" :show-timeout="0">
|
|
<span class="el-dropdown-link">
|
|
<img src="~@/assets/img/staff-default-avatar.png" />
|
|
<span>{{ $store.state.user.realName }}</span>
|
|
<i class="el-icon-arrow-down"></i>
|
|
</span>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item @click.native="updatePasswordHandle()">{{ $t("updatePassword.title")
|
|
}}</el-dropdown-item>
|
|
<el-dropdown-item @click.native="logoutHandle()">{{ $t("logout") }}</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</div>
|
|
<!-- 弹窗, 修改密码 -->
|
|
<update-password-work v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password-work>
|
|
</nav>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
messages
|
|
} from "@/i18n";
|
|
import UpdatePasswordWork from "@/views/main-navbar-update-password-work";
|
|
import dateFormat from "dai-js/tools/dateFormat";
|
|
import nextTick from "dai-js/tools/nextTick";
|
|
import {
|
|
requestGet
|
|
} from "@/js/dai/request";
|
|
export default {
|
|
inject: ["refresh"],
|
|
data() {
|
|
return {
|
|
showHeader: true,
|
|
i18nMessages: messages,
|
|
updatePassowrdVisible: false,
|
|
customerName: "",
|
|
showWeek: "",
|
|
showTime: "",
|
|
weather: {
|
|
weather: "晴",
|
|
temperature: "--",
|
|
},
|
|
};
|
|
},
|
|
components: {
|
|
UpdatePasswordWork,
|
|
},
|
|
created() {
|
|
this.changeCustomerName();
|
|
const customerId = localStorage.getItem("customerId");
|
|
let siteconfigElement = window.SITE_CONFIG["menuShujuList"];
|
|
//暂时 亿联街道和 微笑崂山显示 社区治理-》多元化菜单
|
|
if ("04c0d396e298f13e57aa5904a657eaa6" != customerId && "3fdd0380deff5b30f45376cdf995d1c1" != customerId) {
|
|
for (let index in siteconfigElement) {
|
|
if (siteconfigElement[index].id == "6") {
|
|
let newMenuArr = siteconfigElement[index].children.filter(
|
|
(item) => item.id !== "duoyuanfuwufenxi");
|
|
siteconfigElement[index].children = newMenuArr;
|
|
}
|
|
}
|
|
}
|
|
this.$store.state.mainShuju.menuList = siteconfigElement;
|
|
const pollTime = async () => {
|
|
this.computeCurrentTime();
|
|
await nextTick(1000);
|
|
pollTime();
|
|
};
|
|
pollTime();
|
|
this.getWeatherData();
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
computeCurrentTime() {
|
|
let now = new Date();
|
|
let wk = now.getDay();
|
|
this.showWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", ][wk];
|
|
this.showTime = dateFormat(now, "yyyy-MM-dd hh:mm:ss");
|
|
},
|
|
toPage(path) {
|
|
this.$router.push({
|
|
path
|
|
});
|
|
},
|
|
toIndexPage() {
|
|
this.$router.replace("/");
|
|
},
|
|
// 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
|
|
gotoRouteHandle(menuId, idx) {
|
|
var route = window.SITE_CONFIG["dynamicMenuRoutesShuju"].filter(
|
|
(item) => item.meta.menuId === menuId)[0];
|
|
if (route) {
|
|
this.$router.push({
|
|
name: route.name
|
|
});
|
|
this.$store.state.mainShuju.activeName = menuId;
|
|
}
|
|
},
|
|
changeCustomerName() {
|
|
this.customerName = localStorage.getItem("customerName") || "数据分析可视化平台";
|
|
},
|
|
async getWeatherData() {
|
|
const url = "https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e";
|
|
const {
|
|
data,
|
|
code,
|
|
msg
|
|
} = await requestGet(url, {
|
|
city: this.$store.state.user.areaCode,
|
|
});
|
|
if (code === 0) {
|
|
console.log("---------------weather", data);
|
|
this.weather = data.lives[0];
|
|
} else {
|
|
// return this.$message.error("网络错误");
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style>
|
|
|