更新重点人群大屏

This commit is contained in:
2025-04-15 18:22:42 +08:00
parent a82eed844e
commit f983835744
7 changed files with 176 additions and 113 deletions

View File

@ -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(() => {