更新重点人群大屏
This commit is contained in:
parent
a82eed844e
commit
f983835744
|
|
@ -49,7 +49,8 @@ li {
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #fff;
|
||||
overflow-x: auto;
|
||||
background: #263445;
|
||||
// background: #263445;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
//只显示一排内容
|
||||
|
|
|
|||
|
|
@ -17,6 +17,30 @@
|
|||
width: 442px;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
.asideTitle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient( 90deg, #124CB3 0%, rgba(18,76,179,0.23) 77%, rgba(18,76,179,0) 100%);
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
height: 40px;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.asideCnt{
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
.aside-middle{
|
||||
height: calc(100%/2);
|
||||
padding: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.homeBtn{
|
||||
height: 302px;
|
||||
|
|
@ -32,9 +56,15 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 151px;
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 70px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
.headBoxBg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("~@/assets/images/home_head.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
height: 151px;
|
||||
}
|
||||
.top-center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
@ -44,14 +74,7 @@
|
|||
letter-spacing: 2px;
|
||||
font-family: "YSBTH";
|
||||
white-space: nowrap;
|
||||
background-image: linear-gradient(
|
||||
72deg,
|
||||
#0072ff 0%,
|
||||
#00ffff 18%,
|
||||
#07e9ff 51%,
|
||||
#00ffff 83%,
|
||||
#0072ff 100%
|
||||
);
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #66B5FF 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
|
||||
|
|
@ -76,26 +99,10 @@
|
|||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
.yjbtn{
|
||||
width: 155px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 16px;
|
||||
font-family: "YSBTH";
|
||||
.btms{
|
||||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
.yjbtnActive{
|
||||
// background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
|
||||
}
|
||||
.topBtn-left {
|
||||
left: 5px;
|
||||
left: 35px;
|
||||
font-size: 12px;
|
||||
.text {
|
||||
font-family: "YSBTH";
|
||||
|
|
@ -105,8 +112,31 @@
|
|||
color: #0a99ff;
|
||||
}
|
||||
}
|
||||
.leftBtn-yjbtn{
|
||||
position: absolute;
|
||||
left: 430px;
|
||||
top: 20px;
|
||||
width: 155px;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/home_btns.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
font-size: 16px;
|
||||
font-family: "YSBTH";
|
||||
.btms{
|
||||
@include textColor(#a1d6ff, #ffffff);
|
||||
}
|
||||
}
|
||||
.yjbtnActive{
|
||||
background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.btms{
|
||||
@include textColor(#00ffff, #faff00);
|
||||
}
|
||||
}
|
||||
.topBtn-right {
|
||||
right: 170px;
|
||||
right: 270px;
|
||||
.topBtn-item {
|
||||
background: url("~@/assets/images/home_btns_right.png") no-repeat center
|
||||
center;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 908 B |
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<header>
|
||||
<div class="logo flex align-center" @click="goToHome"><img width="45" class="mr10" src="@/assets/images/jinghui.png" alt="">林芝公安治安防控管理平台</div>
|
||||
<div class="logo flex align-center" @click="goToHome">
|
||||
<img width="45" class="mr10" src="@/assets/images/jinghui.png" alt="">林芝哨岗系统
|
||||
</div>
|
||||
<div class="right">
|
||||
<div><img src="@/assets/images/peo.png" /></div>
|
||||
<div class="detail">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import {
|
|||
removeAllItem
|
||||
} from "@/utils/storage";
|
||||
// 白名单
|
||||
const whiteList = ['/login','/', '/FourColorWarning','/oatuh_login','/editPassword', '/404', '/401']
|
||||
const whiteList = ['/login','/','/KeyPopulations', '/FourColorWarning','/oatuh_login','/editPassword', '/404', '/401']
|
||||
/**
|
||||
* 路由前置守卫
|
||||
* to 去哪里
|
||||
|
|
|
|||
|
|
@ -34,6 +34,11 @@ export const publicRoutes = [
|
|||
name:'home',
|
||||
component: () => import("@/views/home/index") //系统登录
|
||||
},
|
||||
{
|
||||
path: "/KeyPopulations",
|
||||
name:'KeyPopulations',
|
||||
component: () => import("@/views/KeyPopulations/index") //系统登录
|
||||
},
|
||||
{
|
||||
path: "/editPassword",// 注意：带有路径“/”的记录中的组件“默认”是一个不返回 Promise 的函数
|
||||
component: layout,
|
||||
|
|
|
|||
|
|
@ -1,81 +1,91 @@
|
|||
<template>
|
||||
<div class="headBox">
|
||||
<!-- 左边 -->
|
||||
<el-popover width="480px" :visible="isShowVisble" :append-to-body="true" trigger="click" popper-class="bszdr-tq-Popover" >
|
||||
<template #reference>
|
||||
<ul class="topBtn topBtn-left flex" ref="btnRefs" v-if="wekendays && wekendays.length > 0" @click="openWinter" >
|
||||
<li class="flex align-center pointer mr10">
|
||||
<img class="mr10" :src="showIcon(wekendays[0].dqtq)" alt="" />
|
||||
<div class="">
|
||||
<div class="f15 text">{{ wekendays[0].dqtq }}</div>
|
||||
<div class="tests">{{ wekendays[0].fx }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-center mr10 ml10 pointer">
|
||||
<img class="mr10" :src="icon3" alt="" />
|
||||
<div>
|
||||
<div class="f16 text">{{ wekendays[0].dqwd }}°C</div>
|
||||
<div class="tests">
|
||||
{{ wekendays[0].btwd }}°~{{ wekendays[0].yjwd }}°
|
||||
<div class="headBoxBg">
|
||||
<!-- 左边 -->
|
||||
<el-popover width="480px" :visible="isShowVisble" :append-to-body="true" trigger="click" popper-class="bszdr-tq-Popover" >
|
||||
<template #reference>
|
||||
<ul class="topBtn topBtn-left flex" ref="btnRefs" v-if="wekendays && wekendays.length > 0" @click="openWinter" >
|
||||
<li class="flex align-center pointer mr10" >
|
||||
<img class="mr10" :src="showIcon(wekendays[0].dqtq)" alt="" />
|
||||
<div class="">
|
||||
<div class="f15 text">{{ wekendays[0].dqtq }}</div>
|
||||
<div class="tests">{{ wekendays[0].fx }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-center mr10 ml10 pointer" >
|
||||
<img class="mr10" :src="icon3" alt="" />
|
||||
<div>
|
||||
<div class="f16 text">{{ wekendays[0].dqwd }}°C</div>
|
||||
<div class="tests">
|
||||
{{ wekendays[0].btwd }}°~{{ wekendays[0].yjwd }}°
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex align-center pointer relative" >
|
||||
<span class="tqCount" v-if="wekendays[0].list.length > 0">{{ wekendays[0].list.length }}</span>
|
||||
<img v-if="wekendays[0].list.length > 0" width="34" height="34" class="mr10" src="@/assets/images/icon_066.gif" alt="" />
|
||||
<img v-else class="mr10" src="@/assets/images/icon_057.png" alt="" />
|
||||
<div>
|
||||
<div class="f16 text"> {{ hour + ":" + minute + ":" + second }}</div>
|
||||
<div class="tests">{{ weekenday }} {{ datatime }}</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<ul class="tqBox pt10 pl10 pr10">
|
||||
<li class="tqItem flex align-center pointer mt10 bth">
|
||||
<div class="ml43 tc" style="width: 100px">温度</div>
|
||||
<div class="tc" style="width: 80px">天气</div>
|
||||
<div class="tc" style="width: 100px">风向</div>
|
||||
<div class="tc" style="width: 80px">风速</div>
|
||||
<div class="tc" style="width: 100px">日期</div>
|
||||
</li>
|
||||
<li class="flex align-center pointer relative">
|
||||
<span class="tqCount" v-if="wekendays[0].list.length > 0">{{ wekendays[0].list.length }}</span>
|
||||
<img v-if="wekendays[0].list.length > 0" width="34" height="34" class="mr10" src="@/assets/images/icon_066.gif" alt="" />
|
||||
<img v-else class="mr10" src="@/assets/images/icon_057.png" alt="" />
|
||||
<div>
|
||||
<div class="f16 text"> {{ hour + ":" + minute + ":" + second }}</div>
|
||||
<div class="tests">{{ weekenday }} {{ datatime }}</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="yjbtn">
|
||||
<span class="btms">预警布控</span>
|
||||
<li class="tqItem relative flex align-center pointer mb8" v-for="(iv, idx) in wekendays" :key="idx" >
|
||||
<span class="Count" v-if="iv.list.length > 0">{{ iv.list.length }}</span>
|
||||
<img class="mr10" :src="showIcon(iv.dqtq)" alt="" />
|
||||
<div class="tc" style="width: 100px"> {{ iv.btwd }}° ~ {{ iv.yjwd }}° </div>
|
||||
<div class="tc" style="width: 80px">晴</div>
|
||||
<div class="tc" style="width: 100px">{{ iv.fx }}</div>
|
||||
<div class="tc" style="width: 80px">微风</div>
|
||||
<div class="tc" style="width: 100px">{{ iv.tqrq.slice(0, 11) }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<ul class="tqBox pt10 pl10 pr10">
|
||||
<li class="tqItem flex align-center pointer mt10 bth">
|
||||
<div class="ml43 tc" style="width: 100px">温度</div>
|
||||
<div class="tc" style="width: 80px">天气</div>
|
||||
<div class="tc" style="width: 100px">风向</div>
|
||||
<div class="tc" style="width: 80px">风速</div>
|
||||
<div class="tc" style="width: 100px">日期</div>
|
||||
</li>
|
||||
<li class="tqItem relative flex align-center pointer mb8" v-for="(iv, idx) in wekendays" :key="idx" >
|
||||
<span class="Count" v-if="iv.list.length > 0">{{ iv.list.length }}</span>
|
||||
<img class="mr10" :src="showIcon(iv.dqtq)" alt="" />
|
||||
<div class="tc" style="width: 100px"> {{ iv.btwd }}° ~ {{ iv.yjwd }}° </div>
|
||||
<div class="tc" style="width: 80px">晴</div>
|
||||
<div class="tc" style="width: 100px">{{ iv.fx }}</div>
|
||||
<div class="tc" style="width: 80px">微风</div>
|
||||
<div class="tc" style="width: 100px">{{ iv.tqrq.slice(0, 11) }}</div>
|
||||
</el-popover>
|
||||
|
||||
<div v-if="!props.type" class="leftBtn-yjbtn" @click.stop="handleBtns('预警布控')" :class="btnsActive == '预警布控' ? 'yjbtnActive' : ''"><span class="btms">预警布控</span></div>
|
||||
|
||||
<div class="top-center pointer">{{ props.title }}</div>
|
||||
<!-- 右边 -->
|
||||
<ul class="topBtn topBtn-right" v-if="!props.type">
|
||||
<li class="topBtn-item" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'active-topBtn' : ''" v-for="it in btns.rightBtn" :key="it">
|
||||
<span>{{ it }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</el-popover>
|
||||
<div class="top-center pointer">{{ props.title }}</div>
|
||||
<!-- 右边 -->
|
||||
<ul class="topBtn topBtn-right">
|
||||
<li class="topBtn-item" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'active-topBtn' : ''" v-for="it in btns.rightBtn" :key="it">
|
||||
<span>{{ it }}</span>
|
||||
<img class="ml10" :src="it == '消息' ? xinxi : tool" />
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="rightIcon">
|
||||
<div class="flex align-center">
|
||||
<img class="mr10" src="@/assets/images/icon_046.png" alt="" />
|
||||
<div class="f14">
|
||||
<div style="color:#0BB7FF">张某某</div><div>安全管理科</div>
|
||||
<!-- 右边icon -->
|
||||
<ul class="rightIcon">
|
||||
<div class="flex align-center">
|
||||
<img class="mr10" src="@/assets/images/icon_046.png" alt="" />
|
||||
<div class="f14">
|
||||
<div style="color:#0BB7FF">张某某</div><div>安全管理科</div>
|
||||
</div>
|
||||
|
||||
<el-popover popper-class="zdy-meuns-popover" placement="bottom" width="400" :append-to-body="true" v-model:visible="showMore" trigger="click">
|
||||
<template #reference>
|
||||
<span @click="showMore = !showMore" class="ml10 mr10"><img style="width:10px" src="@/assets/images/Polygon_right.png" alt=""></span>
|
||||
</template>
|
||||
<div class="settingItem" @click.stop="handleBtns(iv)" v-for="iv in btns.moreBtn" :key="iv">
|
||||
<el-icon color="#fff" style="top:2px;"><Notification/></el-icon><i class="ml10" style="color: #fff;">{{iv}}</i>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
<span class="ml10 mr10"><img @click.stop="handleBtns('后台')" src="@/assets/images/meun.png" alt=""></span>
|
||||
</div>
|
||||
<span class="ml10 mr10"><img style="width:10px" src="@/assets/images/Polygon_right.png" alt=""></span>
|
||||
<el-icon color="#0BB7FF" :size="24" @click="goPath"><Menu /></el-icon>
|
||||
</div>
|
||||
</ul>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { choseRbgb } from "@/utils/tools.js";
|
||||
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { timeValidate, weekValidate } from "@/utils/tools.js";
|
||||
|
|
@ -97,6 +107,10 @@ const props = defineProps({
|
|||
type: String,
|
||||
default: "林芝哨岗系统"
|
||||
},
|
||||
type:{
|
||||
type:String,
|
||||
default:''
|
||||
}
|
||||
});
|
||||
const wekendays = ref([
|
||||
{ dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
|
||||
|
|
@ -109,10 +123,12 @@ const router = useRouter();
|
|||
const route = useRoute();
|
||||
const btns = reactive({
|
||||
rightBtn: ["四色预警", "重点人群"],
|
||||
leftBtn: ["预警布控"]
|
||||
leftBtn: ["预警布控"],
|
||||
moreBtn:['退出登录',]
|
||||
});
|
||||
|
||||
const btnsActive = ref("");
|
||||
|
||||
|
||||
const showMore = ref(false); //更多
|
||||
const activeText = ref("");
|
||||
const day = ref(0);
|
||||
|
|
@ -132,20 +148,31 @@ onMounted(() => {
|
|||
|
||||
// 按钮切换
|
||||
const handleBtns = (val) => {
|
||||
// btnsActive.value = val;
|
||||
btnsActive.value = val;
|
||||
switch (val) {
|
||||
// case "工作后台":
|
||||
// break;
|
||||
|
||||
// case "退出登录":
|
||||
// store.dispatch("user/logout");
|
||||
// store.commit("app/clearTag", null, { immediate: true });
|
||||
// store.commit("permission/deleteRouter", { immediate: true });
|
||||
// store.commit("user/deleteKeepLiiveRoute", "home");
|
||||
// break;
|
||||
case "预警布控":
|
||||
router.push("/warningControl");
|
||||
break;
|
||||
case "四色预警":
|
||||
router.push("/IdentityManage");
|
||||
break;
|
||||
case "后台":
|
||||
router.push("/editPassword");
|
||||
break;
|
||||
case "重点人群":
|
||||
const NPShref = router.resolve({ path: '/KeyPopulations', query: {}});
|
||||
window.open(NPShref.href, "_blank");
|
||||
break;
|
||||
case "退出登录":
|
||||
store.dispatch("user/logout");
|
||||
store.commit("app/clearTag", null, { immediate: true });
|
||||
store.commit("permission/deleteRouter", { immediate: true });
|
||||
store.commit("user/deleteKeepLiiveRoute", "home");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function openWinter() {
|
||||
isShowVisble.value = !isShowVisble.value;
|
||||
// if (!isShowVisble.value) emitter.emit("deletePointArea", "tq_xfq");
|
||||
|
|
@ -203,9 +230,7 @@ function getWheather() {
|
|||
// });
|
||||
}
|
||||
|
||||
function goPath() {
|
||||
router.push("/editPassword");
|
||||
}
|
||||
|
||||
|
||||
|
||||
onUnmounted(() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user