feat: 首页开发

src/layout/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
+
     <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+    <sidebar v-if="!sidebar.hide" class="sidebar-container"  v-show="!layoutHide"/>
+    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide,'layout-hide':layoutHide }" class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar @setLayout="setLayout" />
-        <tags-view v-if="needTagsView" />
+        <navbar @setLayout="setLayout" v-show="!layoutHide"/>
+        <tags-view v-if="needTagsView"  v-show="!layoutHide"/>
       </div>
       <app-main />
       <settings ref="settingRef" />
@@ -18,6 +19,8 @@ import { useWindowSize } from '@vueuse/core'
 import Sidebar from './components/Sidebar/index.vue'
 import { AppMain, Navbar, Settings, TagsView } from './components'
 import defaultSettings from '@/settings'
+import { useRoute } from 'vue-router';
+const route = useRoute();
 
 import useAppStore from '@/store/modules/app'
 import useSettingsStore from '@/store/modules/settings'
@@ -29,6 +32,7 @@ const sidebar = computed(() => useAppStore().sidebar);
 const device = computed(() => useAppStore().device);
 const needTagsView = computed(() => settingsStore.tagsView);
 const fixedHeader = computed(() => settingsStore.fixedHeader);
+const layoutHide = computed(() => route.path === "/index");
 
 const classObj = computed(() => ({
   hideSidebar: !sidebar.value.opened,
@@ -108,4 +112,7 @@ function setLayout() {
 .mobile .fixed-header {
   width: 100%;
 }
+.layout-hide{
+  margin-left:0!important;
+}
 </style>

src/views/alarm/record/bizAccess.vue

@@ -58,7 +58,7 @@
 
 <script setup name="Record">
 import {getBizAccess} from "@/api/alarm/record";
-import {useRouter} from "vue-router";
+import {useRouter,useRoute} from "vue-router";
 import * as echarts from "echarts";
 import moment from "moment";
 import {getObjAccess, getObjAlarm} from "../../../api/alarm/record.js";
@@ -81,6 +81,7 @@ const total = ref(0);
 const title = ref("");
 const daterangeAlarmTime = ref([]);
 const router = useRouter();
+const route = useRoute();
 const chartAccess = ref();
 const asLine = ref();
 
@@ -649,6 +650,10 @@ function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
-timeSelect(30);
+if(route.query.today){
+  timeSelect(0);
+}else{
+  timeSelect(30);
+}
 getList();
 </script>

src/views/alarm/record/bizSort.vue

@@ -82,7 +82,7 @@
 
 <script setup name="Record">
 import {getBizSort, getMetrics,calcMs} from "@/api/alarm/record";
-import {useRouter} from "vue-router";
+import {useRouter,useRoute} from "vue-router";
 import * as echarts from "echarts";
 import moment from "moment/moment.js";
 
@@ -101,6 +101,7 @@ const title = ref("");
 const alarmMs = ref();
 const daterangeAlarmTime = ref([]);
 const router = useRouter();
+const route = useRoute();
 const chartSort = ref();
 
 const data = reactive({
@@ -512,6 +513,10 @@ function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
 }
-timeSelect(30);
+if(route.query.today){
+  timeSelect(7);
+}else{
+  timeSelect(30);
+}
 getList();
 </script>

src/views/hl/bm/component/historyHealth.vue

@@ -1,4 +1,5 @@
 <template>
+  {{firstLoad}}
   <el-table v-loading="loading" :data="hsTimeData" border style="width: 100%">
     <el-table-column prop="hlScoreId" label="ID" width="80"/>
     <el-table-column prop="hlDate" label="评分时间"/>
@@ -28,10 +29,14 @@
 <script setup lang="ts">
 import {hsDayList, hsTimeList} from "@/api/hl/hs"
 import {onMounted, reactive} from "vue";
+import {useRoute,useRouter} from "vue-router";
 import timeDetail from "./widget/timeDetail.vue"
+const route = useRoute()
+const router = useRouter()
+const emit = defineEmits(['update:firstLoad'])
 
 const {proxy} = getCurrentInstance()
-const props = defineProps(['modelId', 'dialogType'])
+const props = defineProps(['modelId', 'dialogType','firstLoad'])
 const hsTimeData = ref([])
 const total = ref(0)
 const loading = ref(false)
@@ -61,8 +66,19 @@ async function getHlList() {
   hsTimeData.value = res.rows
   total.value = res.total
   loading.value = false
+  props.firstLoad && routeQuery()
 }
 
+function routeQuery() {
+  const query = route.query;
+  if (query.hlScoreId) {
+    const row = hsTimeData.value.find(item => item.hlScoreId === Number(query.hlScoreId))
+    handleDetail(row)
+    emit("update:firstLoad",false)
+  }
+}
+
+
 </script>
 <style scoped lang="scss">
 </style>

src/views/hl/bm/index.vue

@@ -78,7 +78,7 @@
     <!-- 添加或修改业务模型对话框 -->
     <el-dialog :title="title" v-model="open" width="1000" append-to-body>
       <add-bm-info ref="bmRef" @cancel="open = false" @success="getList" v-if="dialogType==='add'"/>
-      <component :is="activeComponent[currentActive]" v-else-if="dialogType!=='add' && open" :modelId="modelId"
+      <component :is="activeComponent[currentActive]" v-else-if="dialogType!=='add' && open" :modelId="modelId" v-model:firstLoad="firstLoad"
                  :dialogType="dialogType"/>
     </el-dialog>
   </div>
@@ -87,11 +87,12 @@
 <script setup name="Bm">
 
 import {addBm, delBm, listBm, updateBm,timeHistory,dayHistory} from "@/api/hl/bm";
-import {history} from "@/api/hl/hlScore";
 import addBmInfo from "./component/addBm.vue"
 import healthSetting from "./component/healthSetting.vue"
 import historyHealth from "./component/historyHealth.vue"
 import * as echarts from 'echarts'
+import {useRoute} from "vue-router"
+const route = useRoute()
 
 const {proxy} = getCurrentInstance();
 
@@ -110,6 +111,7 @@ const activeComponent = [healthSetting, historyHealth]
 const currentActive = ref(0)
 const bmLeft = ref(null)
 const bmRight = ref(null)
+const firstLoad = ref(true)
 
 const data = reactive({
   form: {},
@@ -287,9 +289,18 @@ function getList() {
     bmList.value = response.rows;
     total.value = response.total;
     loading.value = false;
+    firstLoad.value && routeQuery()
   });
 }
 
+function routeQuery() {
+  const query = route.query;
+  if(query.modelId){
+    const bm = bmList.value.find(item => item.modelId === Number(query.modelId))
+    handleHealthSet(bm,'history')
+  }
+}
+
 // 取消按钮
 function cancel() {
   open.value = false;

src/views/hl/check/index.vue

@@ -94,6 +94,7 @@ import {getCheckList,getCheckModel} from "@/api/hl/bm"
 import {onMounted} from "vue";
 import {Timer,Compass,Warning,Loading,CircleCheck,WarnTriangleFilled} from "@element-plus/icons-vue"
 import checkHistory from "./widget/checkHistory.vue"
+import {useRoute,useRouter} from "vue-router"
 const checkList = ref([])
 const cLoading = ref(false)
 const currentProgress = ref(0)
@@ -105,6 +106,9 @@ const totalErrorCount = ref(0)
 const checkFlag = ref(false)
 const visible = ref(false)
 
+const route = useRoute()
+const router = useRouter()
+
 const colors = [
   { color: '#bbdefb', percentage: 20 },
   { color: '#90caf9', percentage: 40 },
@@ -114,16 +118,18 @@ const colors = [
 ]
 
 onMounted( ()=>{
-  if(localStorage.getItem("listData")){
+  if(!route.query.check && localStorage.getItem("listData")){
     return restoreCache()
   }
   getListData()
 })
 
+
 async function getListData(){
   const res = await getCheckList();
   checkList.value = res.data
   listData.value = res.data[0].classList
+  route.query.check && handleNowCheck(checkList.value.length)
 }
 
 function convertTime(milliseconds) {
@@ -156,7 +162,7 @@ function handleNowCheck(sub){
     checkFlag.value = false
     if(localStorage.getItem("listData")){
       removeCache()
-      getListData()
+      !route.query.check && getListData()
     }
     cLoading.value = true;
     cIndex.value = null;
@@ -171,9 +177,8 @@ function handleNowCheck(sub){
     return cLoading.value = false
   }
   setTimeout(async ()=>{
-    const res = await getCheckModel(checkList.value[index].modelId)
+    await getCheckModel(checkList.value[index].modelId)
     totalErrorCount.value= 413
-    console.log(res)
     listData.value[index].checkProess = 'done'
     let e = Math.ceil(Math.random()*100)
     totalError.value += e
@@ -188,6 +193,7 @@ function saveCache(){
   localStorage.setItem("errorInfo",JSON.stringify({totalErrorCount:totalErrorCount.value,totalError:totalError.value,checkTime:checkTime.value}))
   localStorage.setItem("checkList",JSON.stringify(checkList.value))
   checkFlag.value = true
+  router.replace({path:"/hl/check"})
 }
 
 function removeCache(){

src/views/index.vue

@@ -1,22 +1,29 @@
 <template>
-  <div class="home-page">
-    <top-scroll-bar />
-    <div class="content-top">
-        <run-result />
-        <app-health />
+  <div class="home-container">
+    <title-nav />
+    <div class="home-page">
+      <!--    <top-scroll-bar />-->
+      <div class="content-top">
         <div class="column-row">
           <access-error />
           <alarm-ranking />
         </div>
-    </div>
-    <div class="content-chart">
-      <health-tendency />
-      <run-tendency />
+        <app-health />
+        <div class="column-row">
+          <top-scroll-bar />
+          <run-result />
+        </div>
+      </div>
+      <div class="content-chart">
+        <health-tendency />
+        <run-tendency />
+      </div>
     </div>
   </div>
 </template>
 <script setup>
 import topScrollBar from "./index/widget/topScrollBar.vue"
+import titleNav from "./index/widget/titleNav.vue"
 import runResult from "./index/widget/runResult.vue"
 import appHealth from "./index/widget/appHealth.vue"
 import accessError from "./index/widget/accessError.vue"

src/views/index/css/style.scss

@@ -1,167 +1,229 @@
 @import "../../../assets/styles/common.scss";
-.home-page{
+
+.home-container {
   background: url("@/assets/images/background.png") top center no-repeat;
-  height:calc(100vh - 84px);
+  height: 100vh;
   background-size: cover;
   overflow: auto;
-  padding:20px;
-  color:white;
-  @include borderBox;
-  .top-scroll-bar{
-    background-image: linear-gradient(to right top,#0E4690,#11386B);
-    box-shadow: inset 0 0 19px 3px #72D5FF66;
-    border:1px solid #72D5FF;
-    padding:10px;
-    @include borderBox;
+
+  .home-title-nav {
+    background-image: url("@/assets/images/top_bg.png");
+    background-repeat: no-repeat;
+    background-position: top center;
+    background-size: cover;
+    height: 80px;
+    width: 100%;
     @include flexBetween;
-    //border-radius: 16px 0 16px 0;
-    &-left{
-      @include flexStart;
-      .left-title{
-        background-image: linear-gradient(to bottom,#078BCB,#0B4389);
-        border:1px solid #6FCFFB;
-        border-radius: 25px 0 25px 0;
-        font-weight: bold;
-        @include flexCenter;
-      }
-      .left-content{
-        @include flexStart;
-        padding-left:20px;
+    align-items: flex-start;
+    color:#FFF;
+    .l-span{
+      width: 20%;
+      padding:5px;
+    }
+    .r-span{
+      width: 20%;
+      text-align: right;
+      padding:10px;
+      font-size: 14px;
+      color:#FFFFFF;
+      font-family: "BebasNeue-1", serif;
+    }
+    .title-text{
+      width: 60%;
+      @include flexCenter;
+      font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
+      font-weight: 400;
+      font-size: 32px;
+      line-height: 47px;
+      text-align: left;
+      font-style: normal;
+      background: linear-gradient(180deg, #FFFFFF 0%,#7DB1FF 70%, #7DB1FF 100%);
+      -webkit-background-clip: text;
+      letter-spacing: 2px;
+      text-transform: none;
+      color: transparent;
+      padding-top:5px;
+    }
+  }
+}
+
+.home-page {
+
+  padding: 0 20px 20px 20px;
+  color: white;
+  @include borderBox;
+
+  .top-scroll-bar {
+    .t-span {
+      font-size: 12px;
+
+      .t-time {
         font-size: 14px;
-        .s-time{
-          font-family: "BebasNeue-1", serif;
-          font-size: 18px;
-        }
-        .status-item{
-          background-image: linear-gradient(to bottom,#10427e,#002576);
-          border:1px solid #6FCFFB;
-          color:#72D5FF;
-          margin:0 10px;
-          font-size: 14px;
-          padding:2px 6px;
-        }
-        .result-text{
-          border-left:1px solid #3c6d88;
-          padding-left:10px;
-          @include flexStart;
-          .text-a{
-            @include flexStart;
-            color:#3AC4FF;
-            text-decoration: underline;
-            margin-left:10px;
-          }
+        letter-spacing: 1px;
+        font-family: "BebasNeue-1", serif;
+        margin-right: 5px;
+      }
+
+      .text-a {
+        margin-left: 5px;
+        color: #3AC4FF;
+        text-decoration: underline;
+
+        &:hover {
+          text-decoration: none;
         }
       }
     }
-    .right-btn{
-      background-image: linear-gradient(to bottom,#25B1FF,#1E4683);
-      padding:4px 10px;
-      font-weight: bold;
-      font-size: 14px;
-      border:1px solid #95DFFF;
+
+    .right-btn {
+      background: linear-gradient(to bottom, #257CFF 0%, #222E7F 100%);
+      border-radius: 2px 2px 2px 2px;
+      border: 1px solid;
+      border-image: linear-gradient(180deg, rgba(149, 223, 255, 1), rgba(114, 213, 255, 1)) 1 1;
+      height: 26px;
+      line-height: 26px;
+      font-size: 12px;
+      padding: 0 10px;
       cursor: pointer;
     }
+
+    .scroll-text {
+      height: 54px;
+      line-height: 54px;
+      margin-bottom: 10px;
+      padding: 0 10px;
+      font-size: 12px;
+      overflow: hidden;
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
-  .column-row-title{
-    background-image: linear-gradient(to right top,#21589e,#11386B);
-    border:1px solid #72D5FF;
+
+  .column-row-title {
+    background: #112973;
     border-bottom-width: 0;
-    padding:0 8px 0 0;
-    line-height:40px;
+    padding: 0 8px 0 0;
+    line-height: 40px;
+    margin-bottom: 8px;
     @include flexBetween;
-    .title-text{
+
+    .title-text {
       font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
       @include flexStart;
       font-size: 16px;
-      .s-span{
-        margin-left:5px;
+
+      .s-span {
+        margin-left: 5px;
         font-size: 14px;
         font-style: italic;
         color: #A8CAF9;
       }
-      &>img{
-        margin-right:10px;
+
+      & > img {
+        margin-right: 10px;
       }
     }
-    .yellow-txt{
+
+    .yellow-txt {
       color: #FFB342;
       font-size: 20px;
       font-weight: 400;
-      margin-left:4px;
+      margin-left: 4px;
     }
-    .el-checkbox{
-      color:white;
+
+    .el-checkbox {
+      color: white;
       font-size: 16px;
     }
-    .el-checkbox__inner{
+
+    .el-checkbox__inner {
       background: transparent;
-      border:1px solid #72D5FF80;
+      border: 1px solid #72D5FF80;
     }
-    .el-checkbox__label{
+
+    .el-checkbox__label {
       padding-left: 4px;
     }
-    .el-checkbox__input.is-checked+.el-checkbox__label{
+
+    .el-checkbox__input.is-checked + .el-checkbox__label {
       color: #72D5FF;
     }
-    .el-checkbox__input.is-checked .el-checkbox__inner::after{
+
+    .el-checkbox__input.is-checked .el-checkbox__inner::after {
       border-color: #72D5FF;
     }
   }
 
-  .content-top{
+  .content-top {
     @include flexBetween;
     align-items: flex-start;
-    margin-top:16px;
-    .column-row{
+    margin-top: 16px;
+
+    .column-row {
       width: 375px;
     }
   }
 
-  .app-health{
-    height:calc(70vh - 138px);
+  .app-health {
+    height: calc(70vh - 138px);
     position: relative;
     width: calc(100% - 750px);
-    margin:0 10px;
-    .h-img{
-      width: 100px;
+    margin: 0 10px;
+    background-image: url("@/assets/images/center-bg.png");
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 70%;
+
+    .h-img {
+      width: 120px;
     }
-    .a-h-item{
+
+    .a-h-item {
       position: absolute;
-      top:10%;
-      left:10%;
+      top: 29%;
+      left: 9%;
       text-align: center;
+      cursor: pointer;
     }
-    .item-cq{
-      top: 48%;
-      left: 15%;
+
+    .item-cq {
+      top: 63%;
+      left: 27%;
     }
-    .item-js{
-      top: 70%;
+
+    .item-js {
+      top: 5%;
       left: 50%;
-      margin-left:-60px;
+      margin-left: -60px;
     }
-    .item-hg{
-      top: 48%;
-      left: 67%;
+
+    .item-hg {
+      top: 63%;
+      left: 57%;
     }
-    .item-fb{
-      left: calc(80% - 40px);
+
+    .item-fb {
+      left: calc(81% - 40px);
     }
-    .item-jcd{
-      left:50%;
-      margin-left:-140px;
-      top:1%;
+
+    .item-jcd {
+      left: 50%;
+      margin-left: -140px;
+      top: 1%;
     }
-    .i-label{
+
+    .i-label {
       font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
       font-weight: 400;
       font-size: 20px;
-      color: #CEE8FF;
-      text-shadow: 1px 1px 0 #138EFF;
+      color: #F4FAFF;
+      text-shadow: 2px 2px 0 #223FA3;
       font-style: normal;
       text-transform: none;
     }
-    .i-value{
+
+    .i-value {
       font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
       font-weight: 400;
       font-size: 34px;
@@ -170,276 +232,332 @@
       text-transform: none;
       text-align: center;
       position: absolute;
-      top:-16px;
+      top: -20px;
       width: 100%;
     }
-    .i-normal{
-      color:#6FFF7D;
-      text-shadow: 2px 0 0 #239E2F;
-      background: url("@/assets/images/icon-green.png") no-repeat center bottom;
-      background-size: 60%;
+
+    .i-normal {
+      //background: url("@/assets/images/icon-green.png") no-repeat center bottom;
+      //background-size: 70%;
+      background: linear-gradient(180deg, #FFFFFF 0%, #6CA0ED 100%);
+      -webkit-background-clip: text;
+      letter-spacing: 2px;
+      text-transform: none;
+      color: transparent;
     }
-    .i-waring{
-      color:#F0D90B;
+
+    .i-waring {
+      color: #F0D90B;
       text-shadow: 2px 0 0 #9E9223;
       background: url("@/assets/images/icon-yellow.png") no-repeat center bottom;
       background-size: 60%;
     }
-    .i-risk{
-      color:#F00B0B;
-      text-shadow: 2px 0 0 #9E2323;
-      background: url("@/assets/images/icon-red.png") no-repeat center bottom;
-      background-size: 60%;
+
+    .i-risk {
+      //background-size: 70%;
+      background: linear-gradient(180deg, #FFCB7D 0%, #FEB851 100%);
+      -webkit-background-clip: text;
+      color: transparent;
     }
   }
 
-  .column-content{
-    background-image: linear-gradient(to right top,#0E4690B0,#11386BB0);
-    box-shadow: inset 0 0 19px 3px #72D5FF33;
-    border:1px solid #72D5FF;
-    height:calc(70vh - 180px);
-    padding:10px;
+  .column-content {
+    background: rgba(6, 5, 65, 0.8);
+    box-shadow: inset 0px -3px 14px 0px rgba(112, 210, 253, 0.5);
+    border: 1px solid;
+    border-image: linear-gradient(180deg, rgba(0, 136, 194, 0.6), rgba(0, 136, 194, 0.4)) 1 1;
+    height: calc(70vh - 286px);
+    padding: 10px;
     @include borderBox;
     overflow: auto;
-    .c-row{
+
+    .c-row {
       font-size: 14px;
       @include flexBetween;
-      border:1px solid #8DB2E4;
-      box-shadow: inset 0 0 19px 3px #72D5FF33;
-      padding:8px 12px;
-      margin-top:4px;
-      &:first-child{
-        margin-top:0;
+      //border: 1px solid #8DB2E4;
+      background: #060541;
+      box-shadow: inset 0 0 7px 0 #2973C7;
+      padding: 8px 12px;
+      margin-top: 4px;
+
+      &:first-child {
+        margin-top: 0;
       }
-      .c-item{
+
+      &:nth-child(odd) {
+        background: #0C1B5B;
+        box-shadow: inset 0 0 7px 0 #2973C7;
+      }
+
+      .c-item {
         width: 40%;
         text-align: left;
       }
-      .statue-risk{
+
+      .statue-risk {
         width: 60px;
         text-align: center;
-        padding:1px 0;
-        border:1px solid #FFB342;
-        background-image: linear-gradient(to bottom,#754E13,#CA8A29);
-        color:#FFF;
-        font-size: 14px;
+        padding: 1px 0;
+        border: 1px solid #FFB342;
+        background-image: linear-gradient(to bottom, #754E1380, #CA8A2940);
+        color: #FFF;
+        font-size: 12px;
       }
-      .statue-normal{
+
+      .statue-normal {
         @extend .statue-risk;
-        background-image: linear-gradient(to bottom,#203C6C,#435D8A);
+        background-image: linear-gradient(to bottom, #203C6C80, #435D8A40);
         border-color: #669FFF;
         color: #7DADFF;
       }
     }
   }
-  .column-content-half{
-    height:calc(((70vh - 180px)/2) - 26px);
+
+  .column-content-half {
+    height: calc(((70vh - 180px) / 2) - 26px);
     font-size: 12px;
+    cursor: pointer;
   }
 
-  .tab-block{
+  .tab-block {
     @include flexCenter;
-    color:#9FB9E7;
-    margin-bottom:10px;
-    .tab-blue{
+    color: #9FB9E7;
+    margin-bottom: 10px;
+
+    .tab-blue {
       background: #3D74FF;
       width: 20px;
       height: 10px;
       display: inline-block;
       border-right: 1px;
-      margin:0 5px 0 10px;
+      margin: 0 5px 0 10px;
 
     }
-    .tab-yellow{
+
+    .tab-yellow {
       @extend .tab-blue;
       background: #FFB342;
     }
   }
 
-  .access-row{
+  .access-row {
     @include flexStart;
-    .a-r-label{
+
+    .a-r-label {
       width: 120px;
       text-align: right;
     }
-    .a-r-progress{
+
+    .a-r-progress {
       width: calc(100% - 110px);
-      margin-left:10px;
-      .p-total{
+      margin-left: 10px;
+
+      .p-total {
         @include flexStart;
         width: 100%;
-        color:#9FB9E7;
-        .progress{
+        color: #9FB9E7;
+
+        .progress {
           transition: all .3s;
-          background-image: linear-gradient(to right,#1D47B0,#3D74FF);
+          background-image: linear-gradient(to right, #1D47B0, #3D74FF);
           height: 10px;
-          margin-right:5px;
+          margin-right: 5px;
           border-radius: 0 5px 5px 0;
         }
       }
-      .p-error{
-        .progress{
-          background-image: linear-gradient(to right,#A36F22,#FFB342);
+
+      .p-error {
+        .progress {
+          background-image: linear-gradient(to right, #A36F22, #FFB342);
         }
       }
     }
   }
 
-  .alarm-ranking{
-    margin-top:11px;
+  .alarm-ranking {
+    margin-top: 11px;
   }
-  .alarm-row{
-    .ranking-title{
-      margin-bottom:5px;
+
+  .alarm-row {
+    .ranking-title {
+      margin-bottom: 5px;
       @include flexBetween;
-      .no1{
+
+      .no1 {
         color: #FFB342;
         font-size: 16px;
         font-family: "YouSheBiaoTiHei-2", Microsoft YaHei, serif;
       }
-      .no2{
+
+      .no2 {
         @extend .no1;
         color: #72D5FF;
       }
-      .no3{
+
+      .no3 {
         @extend .no1;
         color: #56D4B3;
       }
-      .no-other{
+
+      .no-other {
         @extend .no1;
         color: #A1B3D2;
       }
-      .alarm-num{
-        color:#9FB9E7;
+
+      .alarm-num {
+        color: #9FB9E7;
       }
     }
   }
-  .alarm-progress{
+
+  .alarm-progress {
     margin-bottom: 5px;
     width: 100%;
-    height:10px;
+    height: 10px;
     background: #205194;
     border-radius: 0 8px 8px 0;
-    .progress{
+
+    .progress {
       transition: all .3s;
-      background-image: linear-gradient(to right,#1D47B0,#3D74FF);
+      background-image: linear-gradient(to right, #1D47B0, #3D74FF);
       height: 10px;
-      margin-right:5px;
+      margin-right: 5px;
       border-radius: 0 8px 8px 0;
     }
   }
 
-  .content-chart{
+  .content-chart {
     @include flexBetween;
-    margin-top:16px;
-    &-row{
+    margin-top: 16px;
+
+    &-row {
       width: calc(50% - 8px);
-      margin-left:16px;
-      &:first-child{
-        margin-left:0;
+      margin-left: 16px;
+
+      &:first-child {
+        margin-left: 0;
       }
     }
-    .btn-span{
-      background-image: linear-gradient(to bottom,#25B1FF,#1E4683);
+
+    .btn-span {
+      background: linear-gradient(to bottom, #257CFF 0%, #222E7F 100%);
+      border-radius: 2px 2px 2px 2px;
+      border: 1px solid;
+      border-image: linear-gradient(180deg, rgba(149, 223, 255, 1), rgba(114, 213, 255, 1)) 1 1;
       font-size: 14px;
-      border:1px solid #95DFFF;
       cursor: pointer;
       line-height: 30px;
-      padding:0 10px;
+      padding: 0 10px;
       font-weight: bold;
     }
-    .chart-content{
-      height:260px;
+
+    .chart-content {
+      height: 260px;
     }
-    .run-tendency{
+
+    .run-tendency {
       @include flexBetween;
       align-items: flex-start;
-      .run-title{
+
+      .run-title {
         width: 200px;
-        height:238px;
+        height: 238px;
         overflow: auto;
-        .r-t-row{
+
+        .r-t-row {
           @include flexStart;
-          padding:6px 8px;
+          padding: 6px 8px;
           cursor: pointer;
-          .r-value{
+
+          .r-value {
             width: 66px;
             line-height: 44px;
-            background: #16418B;
+            background: #0B1254;
             box-shadow: inset 0 0 5px 0 #3885DB;
             border-radius: 2px 2px 2px 2px;
-            border: 1px solid #72D5FF;
+            border: 1px solid #0B0A55;
             text-align: center;
             font-size: 14px;
-            color:#C9EFFF;
-            margin-right:5px;
+            color: #C9EFFF;
+            margin-right: 5px;
           }
-          .r-obj-name{
+
+          .r-obj-name {
             font-size: 14px;
           }
-          .r-obj-metrics-name{
+
+          .r-obj-metrics-name {
             font-size: 12px;
-            color:#9FB9E7;
-            margin-top:5px;
+            color: #9FB9E7;
+            margin-top: 5px;
           }
-          &:hover{
-            background: #17468D;
+
+          &:hover {
+            background: #162E81;
           }
         }
-        .active{
-          background: #17468D;
+
+        .active {
+          background: #162E81;
         }
       }
-      .chart-sort{
+
+      .chart-sort {
         width: calc(100% - 210px);
         font-size: 14px;
       }
     }
-    .health-t{
-      .el-input__wrapper{
-        background-image: linear-gradient(to bottom,#2F5BA7,#123269);
-        box-shadow:0 0 0 1px #7EC1FF;
+
+    .health-t {
+      .el-input__wrapper {
+        background-image: linear-gradient(to bottom, #28388D, #060443);
+        box-shadow: 0 0 0 1px #7EC1FF;
       }
-      .el-select .el-input .el-select__caret{
-        color:white;
+
+      .el-select .el-input .el-select__caret {
+        color: white;
       }
-      .el-input__inner{
-        color:white;
+
+      .el-input__inner {
+        color: white;
       }
-      .el-input__prefix{
-        color:white;
+
+      .el-input__prefix {
+        color: white;
       }
     }
 
-    .food-list-footer{
+    .food-list-footer {
       @include flexCenter;
       padding-top: 20px;
     }
   }
 
-  // 滚动条
-  ::-webkit-scrollbar {
-    width: 4px;
-  }
 
-  ::-webkit-scrollbar-track {
-    // width: 6px;
-    background: rgba(#0E4690, .2);
-    // -webkit-border-radius: 2em;
-    // -moz-border-radius: 2em;
-    // border-radius: 2em;
-  }
+}
 
-  ::-webkit-scrollbar-thumb {
-    background-color: rgba(#72D5FF, .7);
-    background-clip: padding-box;
-    min-height: 28px;
-    // -webkit-border-radius: 2em;
-    // -moz-border-radius: 2em;
-    // border-radius: 2em;
-  }
+// 滚动条
+::-webkit-scrollbar {
+  width: 4px;
+}
 
-  ::-webkit-scrollbar-thumb:hover {
-    background: #72D5FF;
-  }
+::-webkit-scrollbar-track {
+  // width: 6px;
+  background: rgba(6, 5, 65, .2)
+  // -webkit-border-radius: 2em;
+  // -moz-border-radius: 2em;
+  // border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgba(6, 5, 65, .8);
+  background-clip: padding-box;
+  min-height: 28px;
+  // -webkit-border-radius: 2em;
+  // -moz-border-radius: 2em;
+  // border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #72D5FF;
 }

src/views/index/widget/accessError.vue

@@ -4,7 +4,7 @@
       <span class="s-span">(当日)</span>
     </span>
   </div>
-  <div class="column-content column-content-half">
+  <div class="column-content column-content-half" @click="target">
     <div class="tab-block">
       <span><span class="tab-blue"/>总次数</span>
       <span><span class="tab-yellow"/>访问错误次数</span>
@@ -29,11 +29,19 @@
 <script setup lang="ts">
 import {bizAccess} from "@/api/index/hl"
 import {onMounted} from "vue";
+import {useRouter} from "vue-router";
+
 const accessData = ref([])
 const maxValue = ref(0)
+const router = useRouter()
 onMounted(async ()=>{
   const res = await bizAccess()
   accessData.value = res.data
   maxValue.value = Math.max(...accessData.value.map(item=>item.total))+20
 })
+
+function target(){
+  router.push({path:"/alarm/bizAccess",query:{today:"true"}})
+}
+
 </script>

src/views/index/widget/alarmRanking.vue

@@ -5,7 +5,7 @@
     </span>
 <!--    <div><el-checkbox v-model="alarm" label="当前告警数" size="large" @change="getAlarm"/><span class="yellow-txt">8</span></div>-->
   </div>
-  <div class="column-content column-content-half">
+  <div class="column-content column-content-half" @click="target">
     <div v-for="(item,index) in alarmData" class="alarm-row">
       <div class="ranking-title">
         <div>
@@ -25,9 +25,12 @@
 <script setup lang="ts">
 import {objAlarm} from "@/api/index/hl"
 import {onMounted} from "vue";
+import {useRouter} from "vue-router";
+
 const alarm = ref(false)
 const alarmData = ref([])
 const maxValue = ref(0)
+const router = useRouter()
 onMounted(()=>{
   getAlarm()
 })
@@ -36,4 +39,8 @@ async function getAlarm(){
   alarmData.value = res.data.data.sort((a,b)=>b.alarm - a.alarm)
   maxValue.value = Math.max(...alarmData.value.map(item=>item.alarm))+20
 }
+
+function target(){
+  router.push({path:"/alarm/bizSort",query:{today:"true"}})
+}
 </script>

src/views/index/widget/appHealth.vue

@@ -1,29 +1,36 @@
 <template>
   <div class="app-health">
-    <div :class="`a-h-item ${itemClass[index]}`" v-for="(item,index) in currData">
-        <div :class="`i-value ${ item.score > 90 ? 'i-normal' : item.score > 80 && item.score < 90 ? 'i-waring' : 'i-risk' } `">
-          {{item.score}}
+    <div :class="`a-h-item ${itemClass[index]}`" v-for="(item,index) in currData" @click="handleDetails(item)">
+        <div :class="`i-value ${ item.hlScore > 80 ? 'i-normal' :  'i-risk' } `">
+          {{item.hlScore}}
         </div>
         <img :src="itemImg" alt="" class="h-img"/>
-        <div class="i-label">{{item.name}}</div>
+        <div class="i-label">{{item.modelName}}</div>
     </div>
-    <div class="a-h-item item-jcd">
-      <img src="@/assets/images/health-small.png" alt="" />
-      <div class="i-label">应用健康度</div>
-    </div>
-
+<!--    <div class="a-h-item item-jcd">-->
+<!--      <img src="@/assets/images/health-small.png" alt="" />-->
+<!--      <div class="i-label">应用健康度</div>-->
+<!--    </div>-->
   </div>
 </template>
 <script setup lang="ts">
 import itemImg from "@/assets/images/health-mini.png"
 import {hlCurr} from "@/api/index/hl"
 import {onMounted} from "vue";
+import {useRouter} from "vue-router"
+const router = useRouter()
 const currData= ref([])
 const itemClass = ["","item-cq","item-js","item-hg","item-fb"]
 onMounted(async ()=>{
   const res = await hlCurr()
   currData.value = res.data
 })
+
+function handleDetails(item){
+  const {modelId,hlScoreId} = item
+  router.push({path: '/hl/bm',query:{modelId,hlScoreId}})
+}
+
 </script>
 <style scoped lang="scss">
 </style>

src/views/index/widget/healthTendency.vue

@@ -21,9 +21,12 @@ import * as echarts from "echarts";
 import {parseTime} from "@/utils/ruoyi"
 import {hlMonthDay} from "@/api/index/hl"
 import {onMounted} from "vue";
+const today = new Date();
+const yesterday = new Date(today);
+yesterday.setDate(today.getDate() - 1);
 const monthDay = ["月度","每日"]
-const dateType = ref("月度")
-const dateValue = ref(new Date())
+const dateType = ref("每日")
+const dateValue = ref(yesterday)
 const chartSort = ref(null)
 onMounted(()=>{
   changeDate()

src/views/index/widget/runTendency.vue

@@ -86,24 +86,16 @@ function initChart(res) {
           color:'#61d1fc'
         },
         areaStyle: {
-          normal: {
-            color: {
-              type: "linear", //设置线性渐变
-              x: 0,
-              y: 1,
-              colorStops: [
-                {
-                  offset: 0,
-                  color: "#225c8e", // 100% 处的颜色
-                },
-                {
-                  offset: 1,
-                  color: "#014082", // 0% 处的颜色
-                },
-              ],
-              globalCoord: false, // 缺省为 false
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgba(13,27,154,0.8)'
             },
-          },
+            {
+              offset: 1,
+              color: 'rgb(5,11,72)'
+            }
+          ])
         },
       }
     ]

src/views/index/widget/titleNav.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="home-title-nav">
+    <span class="l-span">
+      <img src="@/assets/images/logo.png" alt=""/>
+    </span>
+    <span class="title-text">国网四川电力交易中心运行环境风险监测</span>
+    <span class="r-span">{{date}} {{week}} {{time}}</span>
+  </div>
+</template>
+<script setup lang="ts">
+import {parseTime} from "@/utils/ruoyi"
+import {onMounted} from "vue";
+
+const week = ref("");
+const date = ref("");
+const time = ref("");
+const weekText = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
+onMounted(()=>{
+  getWeek()
+  setInterval(()=>{
+    getWeek()
+  },1000)
+})
+
+function getWeek(){
+  let dayOfWeek = new Date().getDay();
+  date.value = parseTime(new Date(),'{y}-{m}-{d}')
+  time.value = parseTime(new Date(),'{h}:{i}:{s}')
+  week.value = weekText[dayOfWeek]
+}
+
+</script>

src/views/index/widget/topScrollBar.vue

@@ -1,28 +1,32 @@
 <template>
   <div class="top-scroll-bar">
-    <div class="top-scroll-bar-left">
-      <span class="left-title">
-       <img src="@/assets/images/scroll-title.png"  alt=""/>
-      </span>
-      <div class="left-content">
-        <span class="s-time">
-          {{result.time}}
-        </span>
-        <span class="status-item">已完成</span>
-        <span class="result-text">巡检结果：本次自动巡检{{result.metrics || 0}}个指标，共发现{{result.problem || 0}}处问题
-          <a href="javascript:;" class="text-a">查看详情 <el-icon><Right /></el-icon></a>
-        </span>
-      </div>
+    <div class="column-row-title">
+      <span class="title-text"><img src="@/assets/images/title-icon.png" alt=""/>最近巡检</span>
+      <span class="t-span">
+        <span class="t-time">{{ result.time }}</span> |
+        <a href="#" class="text-a"  @click="nowCheck(false)">查看详情 </a></span>
+      <span class="right-btn" @click="nowCheck(true)">立即巡检</span>
+    </div>
+    <div class="column-content scroll-text">
+      巡检结果：本次自动巡检共{{result.model}}个模块，共发现{{result.problem}}问题
     </div>
-    <span class="right-btn">立即巡检</span>
   </div>
 </template>
 <script setup lang="ts">
 import {hlCheck} from "@/api/index/hl"
-import {Right} from "@element-plus/icons-vue"
-import {onMounted,ref} from "vue";
+import {onMounted, ref} from "vue";
+import {useRouter} from "vue-router"
+const router = useRouter()
+
+const nowCheck = (query) => {
+  if(query){
+    router.push({path: '/hl/check',query:{check:'true'}})
+  }else{
+    router.push({path: '/hl/check'})
+  }
+}
 const result = ref({})
-onMounted(async ()=>{
+onMounted(async () => {
   const res = await hlCheck()
   result.value = res.data
 })