fire-mh/src/views/head.vue

<template>
    <el-row class="content">
        <!-- <el-row class="weather">
      <img
        v-if="weatherObj.weather_pic"
        :src="weatherObj.weather_pic || ''"
        alt=""
      />
      <span v-if="weatherObj.weather"
        >{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span
      >
    </el-row> -->
        <el-row class="title">闵行区消防管理与应急救援数字平台</el-row>
        <div class="nowTime">
            <div class="day">{{ dateDay }}</div>
            <div class="time">{{ dataTime }}</div>
        </div>
        <el-row class="nav">
            <el-row class="btnBox btnBoxLeft">
                <el-col
                    class="btn btn1"
                    v-for="(item, index) in btnList.slice(0, 4)"
                    @click="btnClick(item)"
                    :key="index"
                    :class="{
                        active: public_store.$state.routeInfo === item.router,
                    }"
                >
                    {{ item.name }}
                </el-col>
            </el-row>
            <el-row class="btnBox btnBoxRight">
                <el-col
                    class="btn btn2"
                    v-for="(item, index) in btnList.slice(4)"
                    @click="btnClick(item)"
                    :key="index"
                    :class="{
                        active: public_store.$state.routeInfo === item.router,
                    }"
                >
                    {{ item.name }}
                </el-col>
            </el-row>
        </el-row>

        <!-- <div class="homeIcon" v-if="$route.fullPath !== '/'">
      <img src="~@a/img/icon/close.png" alt="" class="timeImage2" @click="fanhui"  />
    </div> -->
    </el-row>
</template>

<script setup>
import { useStore, mapGetters } from "vuex";
import publicStore from "@/store/modules/public.js";
import { useRoute, useRouter } from "vue-router";
import {
    defineAsyncComponent,
    defineComponent,
    ref,
    onMounted,
    watch,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const public_store = publicStore(); //公共store

const route = useRoute();
const router = useRouter();

const dateDay = ref("");
const dataTime = ref("");
const weatherObj = ref({});
const dataWeekList = ref(["一", "二", "三", "四", "五", "六", "七"]);
const valueTime = ref([]);
const defaultTime = ref([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
]); // '00:00:00', '23:59:59'
const btnList = ref([])
console.log(window.location.href.split("#"))
if(
    window.location.href.indexOf("fire-signs") || 
    window.location.href.indexOf("self-management") || 
    window.location.href.indexOf("enforcement-dynamic") || 
    window.location.href.indexOf("fire-data-analysis") || 
    window.location.href.indexOf("rescue-station") || 
    window.location.href.indexOf("water-sources") || 
    window.location.href.indexOf("comprehensive-disposal") || 
    window.location.href.indexOf("security-plan") || 
    window.location.href.split("#")[1] == "/" 
    ){
         btnList.value = [
            { name: "城市消防体征", router: "/fire-signs" },
            { name: "企业自主管理", router: "/self-management" },
            { name: "消防执法动态", router: "/enforcement-dynamic" },
            { name: "火灾数据分析", router: "/fire-data-analysis" },
            { name: "消防救援站点", router: "/rescue-station" },
            { name: "消防水源情况", router: "/water-sources" },
            { name: "警情综合处置", router: "/comprehensive-disposal" },
            { name: "大型安保预案", router: "/security-plan" },
        ]
    }else{
        btnList.value = []
    }

valueTime.value = public_store.$state.timeList.map((val) => {
    return val;
});

//返回
function fanhui() {
    router.go(-1);
}

//天气
async function getWeather() {
    //   let res = await this.$axios.get("/service-fire/aliWeather");
    //   if (JSON.parse(res.data).showapi_res_code === 0) {
    //     weatherObj.value = JSON.parse(res.data).showapi_res_body.now;
    //   }
}

//路由跳转
function btnClick(val) {
    if (val.router === public_store.$state.routeInfo) {
        router.push({
            path: "/",
        });
    } else {
        router.push({
            path: val.router,
        });
    }
}

onMounted(() => {
    //当前年月日时分秒
    setInterval(() => {
        let day = new Date();
        dateDay.value =
            day.getFullYear() +
            "-" +
            (day.getMonth() + 1 < 10
                ? "0" + (day.getMonth() + 1)
                : "" + (day.getMonth() + 1)) +
            "-" +
            (day.getDate() < 10 ? "0" + day.getDate() : day.getDate());
        dataTime.value =
            (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
            ":" +
            (day.getMinutes() < 10
                ? "0" + day.getMinutes()
                : day.getMinutes()) +
            ":" +
            (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
    }, 1000);
});

watch(
    () => route,
    (to, from) => {
        // console.log(from); //从哪来
        // console.log(to); //到哪去
        public_store.$state.routeInfo = to.path;
    },
    { deep: true, immediate: true }
);

watch(
    () => public_store.$state.timeList,
    (val) => {
        valueTime.value = val.map((value) => {
            return value;
        });
    },
    { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
@import "@/assets/scss/color.scss";
.content {
    width: 100%;
    height: 0.9375rem;
    position: relative;
    background-image: url(~@a/img/topBackground.png);
    background-size: 100% 100%;
    background-color: transparent;
    z-index: 100;
    .weather {
        position: absolute;
        left: 0.375rem;
        top: 0.18rem;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 0.375rem;
        }
        span {
            font-size: 0.2rem;
            margin-left: 0.135rem;
            @include color_primary($color-primary2);
        }
    }
    .nowTime {
        .day {
            position: absolute;
            top: 0.16rem;
            left: 0.125rem;
            width: auto;
            height: auto;
            font-size: 0.2rem;
            font-weight: 400;
            @include color_primary($color-primary3);
        }
        .time {
            position: absolute;
            top: 0.16rem;
            left: 1.3rem;
            font-size: 0.2rem;
            //font-weight: 700;
            @include color_primary($color-primary3);
        }
    }

    .title {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 0.1rem;
        font-size: 0.375rem;
        font-weight: 700;
        width: fit-content;
        @include color_primary($color-primary1);
        background: linear-gradient(to bottom, #b4dffc, #fbfeff);
        -webkit-background-clip: text;
        color: transparent;
        font-family: syhtB !important;
        // 转变为行内块元素 文字
    }

    .nav {
        .btnBox {
            display: flex;
            justify-content: space-between;
            flex: none;
            // background: red;
            .btn {
                overflow: hidden !important;
                white-space: nowrap !important;
                text-overflow: ellipsis !important;

                width: 1.325rem;
                // height: 0.3rem;
                // background: blue;
                background-size: 100% 100%;
                font-size: 0.2rem;
                @include color_primary($color-primary3);
                text-align: center;
                // line-height: 0.625rem;
                line-height: 0.6rem;
                flex: none;
                cursor: pointer;
                @include user_select();
            }
            .btn1 {
                margin: 0rem 0 0 0.275rem;
            }
            .btn2 {
                margin: 0rem 0.275rem 0 0;
            }
            .active {
                @include color_primary($color-primary1);
                border-bottom: 0.025rem solid #01d1ff;
                border-image: linear-gradient(to right, #01d1ff, #2969e8) 1;
            }
        }
        .btnBoxLeft {
            position: fixed;
            left: 9.8%;
        }
        .btnBoxRight {
            position: fixed;
            right: 9.8%;
        }
    }
    .homeIcon {
        position: absolute;
        right: 0.6875rem;
        top: 0.0625rem;
        font-size: 0.625rem;
        color: #28bcfa;
        i {
            cursor: pointer;
        }
    }
}
.timeImage2 {
    width: 0.5rem;
}
</style>