更新重点人群大屏

src/App.vue

@@ -49,7 +49,8 @@ li {
   -moz-osx-font-smoothing: grayscale;
   color: #fff;
   overflow-x: auto;
-  background: #263445;
+  // background: #263445;
+  background: #fff;
 }
 
 //只显示一排内容

src/assets/css/homeScreen.scss

@@ -17,6 +17,30 @@
         width: 442px;
         height: 100%;
         z-index: 10;
+        .asideTitle{
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px;
+          box-sizing: border-box;
+          background: linear-gradient( 90deg, #124CB3 0%, rgba(18,76,179,0.23) 77%, rgba(18,76,179,0) 100%);
+          border-radius: 0px 0px 0px 0px;
+          height: 40px;
+          .title{
+              font-weight: bold;
+              font-size: 16px;
+              color: #FFFFFF;
+              margin-right: 20px;
+          }
+        }
+        .asideCnt{
+          height: calc(100% - 40px);
+        }
+        .aside-middle{
+            height: calc(100%/2);
+            padding: 4px;
+            box-sizing: border-box;
+        }
       }
       .homeBtn{
         height: 302px;
@@ -32,9 +56,15 @@
       position: fixed;
       top: 0;
       width: 100%;
-      height: 151px;
+      height: 70px;
-      background: url("~@/assets/images/home_head.png") no-repeat center center;
+      background: rgba(0,0,0,0.8);
-      background-size: 100% 100%;
+      .headBoxBg{
+        width: 100%;
+        height: 100%;
+        background: url("~@/assets/images/home_head.png") no-repeat center center;
+        background-size: 100% 100%;
+        height: 151px;
+      }
       .top-center {
         position: absolute;
         left: 50%;
@@ -44,14 +74,7 @@
         letter-spacing: 2px;
         font-family: "YSBTH";
         white-space: nowrap;
-        background-image: linear-gradient(
+        background: linear-gradient(180deg, #FFFFFF 0%, #66B5FF 100%);
-          72deg,
-          #0072ff 0%,
-          #00ffff 18%,
-          #07e9ff 51%,
-          #00ffff 83%,
-          #0072ff 100%
-        );
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         text-shadow: 4px 4px 4px rgba(54, 255, 243, 0.15);
@@ -76,26 +99,10 @@
             @include textColor(#a1d6ff, #ffffff);
           }
         }
-        .yjbtn{
+        
-          width: 155px;
-          height: 38px;
-          line-height: 38px;
-          text-align: center;
-          background: url("~@/assets/images/home_btns.png") no-repeat center center;
-          background-size: 100% 100%;
-          font-size: 16px;
-          font-family: "YSBTH";
-          .btms{
-            @include textColor(#a1d6ff, #ffffff);
-          }
-        }
-        .yjbtnActive{
-          // background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
-          // background-size: 100% 100%;
-        }
       }
       .topBtn-left {
-        left: 5px;
+        left: 35px;
         font-size: 12px;
         .text {
           font-family: "YSBTH";
@@ -105,8 +112,31 @@
           color: #0a99ff;
         }
       }
+      .leftBtn-yjbtn{
+        position: absolute;
+        left: 430px;
+        top: 20px;
+        width: 155px;
+        height: 38px;
+        line-height: 38px;
+        text-align: center;
+        background: url("~@/assets/images/home_btns.png") no-repeat center center;
+        background-size: 100% 100%;
+        font-size: 16px;
+        font-family: "YSBTH";
+        .btms{
+          @include textColor(#a1d6ff, #ffffff);
+        }
+      }
+      .yjbtnActive{
+        background: url("~@/assets/images/home_btns_active.png") no-repeat center center;
+        background-size: 100% 100%;
+        .btms{
+          @include textColor(#00ffff, #faff00);
+        }
+      }
       .topBtn-right {
-        right: 170px;
+        right: 270px;
         .topBtn-item {
           background: url("~@/assets/images/home_btns_right.png") no-repeat center
             center;

src/layout/components/Header.vue

@@ -1,6 +1,8 @@
 <template>
   <header>
-    <div class="logo flex align-center" @click="goToHome"><img width="45" class="mr10" src="@/assets/images/jinghui.png" alt="">林芝公安治安防控管理平台</div>
+    <div class="logo flex align-center" @click="goToHome">
+      <img width="45" class="mr10" src="@/assets/images/jinghui.png" alt="">林芝哨岗系统
+    </div>
     <div class="right">
       <div><img src="@/assets/images/peo.png" /></div>
       <div class="detail">

src/permission.js

@@ -6,7 +6,7 @@ import {
   removeAllItem
 } from "@/utils/storage";
 // 白名单
-const whiteList = ['/login','/', '/FourColorWarning','/oatuh_login','/editPassword', '/404', '/401']
+const whiteList = ['/login','/','/KeyPopulations', '/FourColorWarning','/oatuh_login','/editPassword', '/404', '/401']
 /**
  * 路由前置守卫
  * to  去哪里

src/router/index.js

@@ -34,6 +34,11 @@ export const publicRoutes = [
     name:'home',
     component: () => import("@/views/home/index") //系统登录
   },
+  {
+    path: "/KeyPopulations",
+    name:'KeyPopulations',
+    component: () => import("@/views/KeyPopulations/index") //系统登录
+  },
   {
     path: "/editPassword",// 注意：带有路径“/”的记录中的组件“默认”是一个不返回 Promise 的函数
     component: layout,

src/views/home/layout/head.vue

@@ -1,81 +1,91 @@
 <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>
+      <el-popover width="480px" :visible="isShowVisble" :append-to-body="true" trigger="click" popper-class="bszdr-tq-Popover" >
-        <ul class="topBtn topBtn-left flex" ref="btnRefs" v-if="wekendays && wekendays.length > 0" @click="openWinter" >
+        <template #reference>
-          <li class="flex align-center pointer mr10">
+          <ul class="topBtn topBtn-left flex" ref="btnRefs" v-if="wekendays && wekendays.length > 0" @click="openWinter" >
-            <img class="mr10" :src="showIcon(wekendays[0].dqtq)" alt="" />
+            <li class="flex align-center pointer mr10" >
-            <div class="">
+              <img class="mr10" :src="showIcon(wekendays[0].dqtq)" alt="" />
-              <div class="f15 text">{{ wekendays[0].dqtq }}</div>
+              <div class="">
-              <div class="tests">{{ wekendays[0].fx }}</div>
+                <div class="f15 text">{{ wekendays[0].dqtq }}</div>
-            </div>
+                <div class="tests">{{ wekendays[0].fx }}</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 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="flex align-center pointer relative">
+          <li class="tqItem relative flex align-center pointer mb8" v-for="(iv, idx) in wekendays" :key="idx" >
-            <span class="tqCount" v-if="wekendays[0].list.length > 0">{{ wekendays[0].list.length  }}</span>
+            <span class="Count" v-if="iv.list.length > 0">{{ iv.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 class="mr10" :src="showIcon(iv.dqtq)" alt="" />
-            <img  v-else  class="mr10"  src="@/assets/images/icon_057.png" alt=""  />
+            <div class="tc" style="width: 100px"> {{ iv.btwd }}° ~ {{ iv.yjwd }}° </div>
-            <div>
+            <div class="tc" style="width: 80px">晴</div>
-              <div class="f16 text"> {{ hour + ":" + minute + ":" + second }}</div>
+            <div class="tc" style="width: 100px">{{ iv.fx }}</div>
-              <div class="tests">{{ weekenday }} {{ datatime }}</div>
+            <div class="tc" style="width: 80px">微风</div>
-            </div>
+            <div class="tc" style="width: 100px">{{ iv.tqrq.slice(0, 11) }}</div>
-          </li>
-          <li class="yjbtn">
-            <span class="btms">预警布控</span>
           </li>
         </ul>
-      </template>
+      </el-popover>
-      <ul class="tqBox pt10 pl10 pr10">
+  
-        <li class="tqItem flex align-center pointer mt10 bth">
+      <div v-if="!props.type" class="leftBtn-yjbtn" @click.stop="handleBtns('预警布控')" :class="btnsActive == '预警布控' ? 'yjbtnActive' : ''"><span class="btms">预警布控</span></div>
-          <div class="ml43 tc" style="width: 100px">温度</div>
+  
-          <div class="tc" style="width: 80px">天气</div>
+      <div class="top-center pointer">{{ props.title }}</div>
-          <div class="tc" style="width: 100px">风向</div>
+      <!-- 右边 -->
-          <div class="tc" style="width: 80px">风速</div>
+       <ul class="topBtn topBtn-right" v-if="!props.type">
-          <div class="tc" style="width: 100px">日期</div>
+        <li class="topBtn-item" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'active-topBtn' : ''" v-for="it in btns.rightBtn" :key="it">
-        </li>
+          <span>{{ it }}</span>
-        <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>
+      <!-- 右边icon -->
-    <div class="top-center pointer">{{ props.title }}</div>
+      <ul class="rightIcon">
-    <!-- 右边 -->
+        <div class="flex align-center">
-     <ul class="topBtn topBtn-right">
+          <img class="mr10" src="@/assets/images/icon_046.png" alt="" />
-      <li class="topBtn-item" @click.stop="handleBtns(it)" :class="btnsActive == it ? 'active-topBtn' : ''" v-for="it in btns.rightBtn" :key="it">
+          <div class="f14">
-        <span>{{ it }}</span>
+            <div style="color:#0BB7FF">张某某</div><div>安全管理科</div>
-        <img class="ml10" :src="it == '消息' ? xinxi : tool" />
+          </div>
-      </li>
+  
-    </ul>
+          <el-popover popper-class="zdy-meuns-popover" placement="bottom" width="400" :append-to-body="true" v-model:visible="showMore" trigger="click">
-    <ul class="rightIcon">
+            <template #reference>
-      <div class="flex align-center">
+              <span @click="showMore = !showMore" class="ml10 mr10"><img style="width:10px" src="@/assets/images/Polygon_right.png" alt=""></span>
-        <img class="mr10" src="@/assets/images/icon_046.png" alt="" />
+            </template>
-        <div class="f14">
+            <div class="settingItem" @click.stop="handleBtns(iv)" v-for="iv in btns.moreBtn" :key="iv">
-          <div style="color:#0BB7FF">张某某</div><div>安全管理科</div>
+              <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>
-        <span class="ml10 mr10"><img style="width:10px" src="@/assets/images/Polygon_right.png" alt=""></span>
+      </ul>
-        <el-icon color="#0BB7FF" :size="24" @click="goPath"><Menu /></el-icon>
+    </div>
-      </div>
-    </ul>
   </div>
 </template>
 
 <script setup>
-import { choseRbgb } from "@/utils/tools.js";
 import { qcckGet, qcckPost } from "@/api/qcckApi.js";
 import emitter from "@/utils/eventBus.js";
 import { timeValidate, weekValidate } from "@/utils/tools.js";
@@ -97,6 +107,10 @@ const props = defineProps({
     type: String,
     default: "林芝哨岗系统"
   },
+  type:{
+    type:String,
+    default:''
+  }
 });
 const wekendays = ref([
   { dqtq :'晴' ,fx:'北',dqwd:'30',btwd:'10',yjwd:'20',tqrq:'2022-10-10',list:[]},
@@ -109,10 +123,12 @@ const router = useRouter();
 const route = useRoute();
 const btns = reactive({
   rightBtn: ["四色预警", "重点人群"],
-  leftBtn: ["预警布控"]
+  leftBtn: ["预警布控"],
+  moreBtn:['退出登录',]
 });
-
 const btnsActive = ref("");
+
+
 const showMore = ref(false); //更多
 const activeText = ref("");
 const day = ref(0);
@@ -132,20 +148,31 @@ onMounted(() => {
 
 // 按钮切换
 const handleBtns = (val) => {
-  // btnsActive.value = val;
+  btnsActive.value = val;
   switch (val) {
-    // case "工作后台":
+    case "预警布控":
-    //   break;
+      router.push("/warningControl");
-   
+      break;
-    // case "退出登录":
+    case "四色预警":
-    //   store.dispatch("user/logout");
+      router.push("/IdentityManage");
-    //   store.commit("app/clearTag", null, { immediate: true });
+      break;
-    //   store.commit("permission/deleteRouter", { immediate: true });
+    case "后台":
-    //   store.commit("user/deleteKeepLiiveRoute", "home");
+      router.push("/editPassword");
-    //   break;
+      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");
@@ -203,9 +230,7 @@ function getWheather() {
   // });
 }
 
-function goPath() {
+
-  router.push("/editPassword");
-}
 
 
 onUnmounted(() => {