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" v-if="title">闵行区消防管理数字平台</el-row>
        <el-row class="title4" v-if="!title" style="    font-family: ZhenyanGB!important;">
            <a href="http://32.1.7.96:8011/project/mhzd_zdab/#/ciieSecurity" target="_blank"> <img src="@a/img/securityPlan/zhdd.png" alt="" /></a>
            第七届中国国际进口博览会消防安保指挥平台
            <a > <img src="@a/img/securityPlan/hzfk.png" alt="" /></a>
            
        </el-row>
        <!-- <el-row class="title2" v-if="!title">进博会消防安保平台</el-row>
        <el-row class="title3" v-if="!title">
            <span >火灾防控</span>
            <span style="margin-left:.2rem;margin-top:.05rem;font-size:.2rem" >
                <a href="http://32.1.7.96:8010/zhts_mh_20231011_v1/#/ciieSecurity" style="text-decoration:none;color:rgba(137, 128, 128, 0.1);" target="_blank">指挥调度</a>
            </span>
        </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" @click="fanhui"  v-if="!title">
            <HomeFilled style="width: 0.8em; height: 0.8em; margin-right: 0px" />
        </div>
        <!-- <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 title = ref(true)
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 = []
//     }
if(window.location.href.split("#")[1] == "/security" ){
    btnList.value = []
    title.value = false
}else{
    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" },
    ]
    title.value = true
}

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,
        });
    }
}
function fanhui(){
    window.location.href = "http://32.1.7.96:8010/zhts_mh_20231011_v1/#/ciieSecurity"
    // window.location.href = "http://www.baidu.com"
}
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;
    }
    .title2 {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 0rem;
        font-size: 0.355rem;
        letter-spacing: 4px;
        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;
        >p{
            font-size: 0.25rem;
        }
        // 转变为行内块元素 文字
    }
    .title4 {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 0.03rem;
        font-size: 0.35rem;
        letter-spacing: 4px;
        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;
        >p{
            font-size: 0.25rem;
        }
        img{
            height:.4rem;
            margin:.0 .8rem 

        }
        // 转变为行内块元素 文字
    }
    .title3 {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 0.45rem;
        font-size: 0.25rem;
        letter-spacing: 4px;
        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;
        >p{
            font-size: 0.25rem;
        }
        // 转变为行内块元素 文字
    }

    .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: 10px;
        top: -10px;
        font-size: 0.625rem;
        color: #28bcfa;
    }
}
.timeImage2 {
    width: 0.5rem;
}
</style>