sgxt_web/src/views/home/layout/head.vue

<template>
  <div class="headBox">
    <FlowLine></FlowLine>
    <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" @click="handleBtns('后台')">{{ 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 user-info">
            <div :style="{color:isRed ? '#ff5500' : '#fff',fontWeight:isRed ? 'bold' : 'normal'}">{{ userName }}</div>
            <div class="dept-text" :title="dept">{{ dept }}</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.name)" v-for="iv in btns.moreBtn" :key="iv.name">
              <!-- <el-icon color="#fff" style="top:2px;">
                <Notification />
              </el-icon> -->
              <i class="ml10" style="color: #fff;">{{ iv.name }}</i>
            </div>
          </el-popover>

          <!-- <img class="mr10" src="@/assets/images/Group427322485.png" style="width: 100px" alt="" />
          <img class="mr10" src="@/assets/images/Group427322486.png" style="width: 100px" alt="" /> -->
          <!-- <span class="ml10 mr10"><img @click.stop="handleBtns('后台')" src="@/assets/images/meun.png" alt=""></span> -->
        </div>
      </ul>
    </div>

  </div>
</template>

<script setup>
import { qcckGet } from "@/api/qcckApi.js"
import FlowLine from './flowLine.vue'
import { getItem } from "@/utils/storage";
import { timeValidate, weekValidate } from "@/utils/tools.js";
import { useRouter, useRoute, onBeforeRouteLeave } from "vue-router";
import { useStore } from "vuex";
import { getUserIsRed } from "@/api/sys.js"
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 userName = getItem("USERNAME");
/** 是否红色名字  市情指领导、优秀信息员、优秀研判名字要变橙红色*/
const isRed = ref(false)
const dept = getItem("deptId") ? getItem("deptId")[0].deptName : '';
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 btns = reactive({
  rightBtn: ["实战支撑", "安全监控"],
  leftBtn: ["数据整合", '分析研判'],
  moreBtn: [
    { name: '后台', img: require('@/assets/images/Group427322486.png') },
    { name: '权限申请', img: require('@/assets/images/Group427322486.png') },
    { name: '退出登录', img: require('@/assets/images/Group427322485.png') }
  ]
});
const btnsActive = ref("");
const showMore = ref(false); //更多
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();
  getIsRed()
  timersfm.value = setInterval(() => {
    CurrentTime();
  }, 1000);
});
/** 获取名字是否标红 */
function getIsRed() {
  getUserIsRed().then(res=>{
    isRed.value = res === true
  })
}
// 按钮切换
const handleBtns = (val) => {
  btnsActive.value = val;
  switch (val) {
    case "数据整合":
      router.push("/mpvPeo");
      break;
    case "实战支撑":
      router.push("/InfoCollection");
      break;
    case "分析研判":
      router.push("/ResearchHome");
      break;
    case "后台":
      router.push("/YjData");
      break;
    case "安全监控":
      router.push("/resourceMonitoring");
      break;
    case "退出登录":
      store.dispatch("user/logout");
      break;
    case "权限申请":
      router.push("/permissionApply");
      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;
}

.user-info {
  width: 150px;
}

.dept-text {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</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;
  }
}

.settingItem {
  line-height: 22px;
  padding: 5px;
  border-bottom: 1px solid;
}
</style>