277 lines
9.6 KiB
Vue
277 lines
9.6 KiB
Vue
<template>
|
|
<div class="headBox">
|
|
<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>
|
|
</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="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>
|
|
</el-popover>
|
|
|
|
<ul class="leftBtn-yjbtn flex">
|
|
<li class="leftBtn-item pointer" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'yjbtnActive' : ''" v-for="it in btns.leftBtn" :key="it">
|
|
<span class="btms">{{ it }}</span>
|
|
</li>
|
|
</ul>
|
|
<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>
|
|
<!-- 右边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>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
|
|
import emitter from "@/utils/eventBus.js";
|
|
import { timeValidate, weekValidate } from "@/utils/tools.js";
|
|
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
|
|
import { useStore } from "vuex";
|
|
import xinxi from "@/assets/images/icon_045.png";
|
|
import tool from "@/assets/images/icon_044.png";
|
|
const icon1 = require("@/assets/images/icon_048.png"); //晴天
|
|
const icon2 = require("@/assets/images/icon_049.png"); //小雨
|
|
const icon3 = require("@/assets/images/icon_050.png"); //高温
|
|
const icon4 = require("@/assets/images/icon_052.png"); //中雨
|
|
const icon5 = require("@/assets/images/icon_053.png"); //大雨
|
|
const icon6 = require("@/assets/images/icon_054.png"); //雷阵雨
|
|
const icon7 = require("@/assets/images/icon_055.png"); //多云转晴 - 阴天
|
|
const icon8 = require("@/assets/images/icon_056.png"); //多云
|
|
import { ref, onMounted, defineEmits, defineProps,onUnmounted, reactive, watch } from "vue";
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: "林芝哨岗系统"
|
|
},
|
|
type:{
|
|
type:String,
|
|
default:''
|
|
}
|
|
});
|
|
const wekendays = ref([
|
|
{ dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
|
|
{ dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
|
|
{ dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
|
|
]);
|
|
const isShowVisble = ref(false);
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const btns = reactive({
|
|
rightBtn: ["四色预警", "重点人群"],
|
|
leftBtn: ["预警布控",'研判首页'],
|
|
moreBtn:['退出登录',]
|
|
});
|
|
const btnsActive = ref("");
|
|
|
|
|
|
const showMore = ref(false); //更多
|
|
const activeText = ref("");
|
|
const day = ref(0);
|
|
const minute = ref("00"); //分
|
|
const second = ref("00"); //秒
|
|
const hour = ref("00"); //时
|
|
const weekenday = weekValidate(); //星期几
|
|
const datatime = ref(timeValidate(null, "ymd"));
|
|
const timersfm = ref(null);
|
|
onMounted(() => {
|
|
// getWheather();
|
|
timersfm.value = setInterval(() => {
|
|
CurrentTime();
|
|
}, 1000);
|
|
});
|
|
|
|
|
|
// 按钮切换
|
|
const handleBtns = (val) => {
|
|
btnsActive.value = val;
|
|
switch (val) {
|
|
case "预警布控":
|
|
router.push("/warningControl");
|
|
break;
|
|
case "四色预警":
|
|
router.push("/IdentityManage");
|
|
break;
|
|
case "研判首页":
|
|
router.push("/ResearchHome");
|
|
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");
|
|
}
|
|
function showIcon(val) {
|
|
switch (val) {
|
|
case "晴":
|
|
return icon1;
|
|
case "小雨":
|
|
return icon2;
|
|
case "中雨":
|
|
return icon4;
|
|
case "大雨":
|
|
return icon5;
|
|
case "雷阵雨":
|
|
return icon6;
|
|
case "多云":
|
|
return icon8;
|
|
case "阴":
|
|
return icon7;
|
|
// ------------------------------//
|
|
case "冻雨":
|
|
return icon6;
|
|
case "雾":
|
|
return icon6;
|
|
case "冰雹":
|
|
return icon6;
|
|
case "大到暴雪":
|
|
return icon6;
|
|
case "中雪":
|
|
return icon6;
|
|
case "小雪":
|
|
return icon6;
|
|
case "大到暴雨":
|
|
return icon6;
|
|
}
|
|
}
|
|
|
|
// 获取时分秒
|
|
function CurrentTime() {
|
|
const date = new Date();
|
|
hour.value = date.getHours();
|
|
minute.value = date.getMinutes();
|
|
second.value = date.getSeconds();
|
|
day.value = day.value < 10 ? "0" + day.value : day.value;
|
|
hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
|
|
minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
|
|
second.value = second.value < 10 ? "0" + second.value : second.value;
|
|
}
|
|
|
|
// 获取天气
|
|
function getWheather() {
|
|
// qcckGet({}, "/mosty-base/weather/getTbWeatherSeven").then((res) => {
|
|
// wekendays.value = res || [];
|
|
// });
|
|
}
|
|
|
|
|
|
|
|
|
|
onUnmounted(() => {
|
|
clearInterval(timersfm.value);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/css/homeScreen.scss";
|
|
.tqItem{
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.zdy-meuns-popover {
|
|
background: url("~@/assets/images/el-popper.png") no-repeat center center !important;
|
|
background-size: 100% 100% !important;
|
|
border: 1px solid transparent !important;
|
|
}
|
|
|
|
.zdy-meuns-popover .el-popper__arrow::before {
|
|
background: #0c1850 !important;
|
|
border: 1px solid #224281 !important;
|
|
display: none !important;
|
|
}
|
|
.bszdr-tq-Popover {
|
|
background: url("~@/assets/images/el-popper.png") no-repeat center center !important;
|
|
background-size: 100% 100% !important;
|
|
border: 1px solid transparent !important;
|
|
&[data-popper-placement^="bottom"] .el-popper__arrow::before {
|
|
border: none !important;
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
</style>
|
|
|