新加安保security页路由处理

package.json

@@ -11,6 +11,7 @@
         "lint": "vue-cli-service lint"
     },
     "dependencies": {
+        "@element-plus/icons-vue": "^2.1.0",
         "@videojs/http-streaming": "^2.12.0",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
@@ -54,4 +55,4 @@
         "terser-webpack-plugin": "^5.1.3",
         "vue-cli-plugin-element-plus": "0.0.13"
     }
-}
+}

src/main.js

@@ -5,7 +5,7 @@ import store from "./store";
 import querystring from "querystring";
 import installElementPlus from "./plugins/element";
 import * as echarts from "echarts";
-
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import "@a/scss/public.scss";
 import "@a/scss/transition.scss";
 import "@a/scss/common.scss";
@@ -17,6 +17,9 @@ const pinia = createPinia();
 import useStore from "./store/modules/public.js"; //store就是导出的那个值
 
 const app = createApp(App);
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
 installElementPlus(app);
 
 //使用Vue.directive()定义一个全局指令

src/router/home.js

@@ -1,6 +1,13 @@
 // let isProd = process.env.NODE_ENV === 'production';
 export default [
-
+    {
+        path: '/security',
+        component: () =>
+            import ('../views/security-plan.vue'),
+        meta: {
+            title: '大型安保预案'
+        }
+    },
     {
         path: '/',
         name: 'Home',

src/views/head.vue

@@ -10,7 +10,9 @@
         >{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span
       >
     </el-row> -->
-        <el-row class="title">闵行区消防管理与应急救援数字平台</el-row>
+        <el-row class="title" v-if="title">闵行区消防管理与应急救援数字平台</el-row>
+        <el-row class="title2" v-if="!title">进博会消防安保平台</el-row>
+        <el-row class="title3" v-if="!title">（火灾防控）</el-row>
         <div class="nowTime">
             <div class="day">{{ dateDay }}</div>
             <div class="time">{{ dataTime }}</div>
@@ -43,7 +45,9 @@
                 </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> -->
@@ -67,7 +71,7 @@ const public_store = publicStore(); //公共store
 
 const route = useRoute();
 const router = useRouter();
-
+const title = ref(true)
 const dateDay = ref("");
 const dataTime = ref("");
 const weatherObj = ref({});
@@ -79,39 +83,55 @@ const defaultTime = ref([
 ]); // '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.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);
-}
+// function fanhui() {
+//     router.go(-1);
+// }
 
 //天气
 async function getWeather() {
@@ -133,7 +153,10 @@ function btnClick(val) {
         });
     }
 }
-
+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(() => {
@@ -239,6 +262,45 @@ watch(
         -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;
+        }
+        // 转变为行内块元素 文字
+    }
+    .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;
+        }
         // 转变为行内块元素 文字
     }
 
@@ -289,13 +351,10 @@ watch(
     }
     .homeIcon {
         position: absolute;
-        right: 0.6875rem;
-        top: 0.0625rem;
+        right: 10px;
+        top: -10px;
         font-size: 0.625rem;
         color: #28bcfa;
-        i {
-            cursor: pointer;
-        }
     }
 }
 .timeImage2 {

src/views/time-select.vue

@@ -1,6 +1,6 @@
 <template>
     <el-row class="timeSelect">
-        <el-row class="wrap">
+        <el-row class="wrap" v-if="!security">
             <el-row class="xj xj1"></el-row>
             <el-row class="xj xj2"></el-row>
             <el-row class="xj xj3"></el-row>
@@ -59,6 +59,13 @@
             >
             </el-date-picker>
         </el-row>
+        <el-row class="wrap2" v-if="security">
+            <el-row class="xj xj1"></el-row>
+            <el-row class="xj xj2"></el-row>
+            <el-row class="xj xj3"></el-row>
+            <el-row class="xj xj4"></el-row>
+            <p>安保阶段：2023年10月23日——11月15日</p>
+        </el-row>
     </el-row>
 </template>
 <script>
@@ -82,6 +89,7 @@ export default {
     },
     data() {
         return {
+            security:true,
             stores: this.$useStore(),
 
             timeArea: "dangyue",
@@ -94,6 +102,11 @@ export default {
     },
     created() {
         // this.timeTypeClick("dangyue");
+        if(window.location.href.split("#")[1] == "/security" ){
+            this.security = true
+        }else{
+            this.security = false
+        }
     },
     watch: {
         "stores.timeList"(val) {
@@ -224,5 +237,17 @@ export default {
             box-shadow: inset 0 0 0.05rem 0.05rem rgba(115, 251, 253, 0.8);
         }
     }
+    .wrap2{
+        width: 50%;
+        height: 100%;
+        margin-left:25%;
+        box-shadow: inset 0 0 0.1rem 0.0125rem #137bb8;
+        padding-left: 0.53rem;
+        border-radius: 2px;
+        >p{
+            line-height: 34px;
+        }
+
+    }
 }
 </style>