引入海康威视插件

web/src/views/LoginView.vue

@@ -82,6 +82,8 @@ export default {
           this.$message.success('登录成功')
           localStorage.setItem('token', res.token)
           localStorage.setItem('permission',JSON.stringify( res.permission) )
+          localStorage.setItem('account',JSON.stringify( res.account) )
+
           this.$router.push('/')
 
         } 

web/src/views/MainView.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="main">
-    <div class="header"></div>
+    <div class="header">
+      <span class="time">
+        <span class="text" style="margin-right: 15px"> {{ dateVal }} </span>
+        <span class="text" style="width: 80px;">{{ currentTime  }}</span>
+        <span class="text">{{ weekVal }}</span>
+      </span>
+
+      <span class="title text"> 能源站监控与运行管理系统 </span>
+      <span class="user">
+        <span style="margin-right: 15px"> {{ user }}</span>
+        <span class="iconfont icon-tuichu" @click="logout"></span>
+      </span>
+    </div>
 
     <div class="page">
       <div class="subMenu" v-if="subMenu.length > 0">
@@ -35,7 +47,9 @@
 
 <script>
 // @ is an alias to /src
-
+import moment from 'moment'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
 export default {
   name: 'MainView',
   components: {},
@@ -104,14 +118,19 @@ export default {
           ]
         }
       ],
-      subMenu: []
+      subMenu: [],
+      currentTime: '',
+      timer: null,
+      dateVal: moment().locale('zh-cn').format('ll') + ' ',
+      weekVal: moment().locale('zh-cn').format('dddd'),
+      user:localStorage.getItem('account').replace(/^"|"$/g, '')
     }
   },
   watch: {
     $route: {
       handler(n) {
-        console.log(n,"nnnnnnnnnnnnnn")
-        this.subMenu =n.matched[1].children || []
+        console.log(n, 'nnnnnnnnnnnnnn')
+        this.subMenu = n.matched[1].children || []
       },
       immediate: true
     }
@@ -119,8 +138,35 @@ export default {
 
   mounted() {
     this.initRoute()
+    this.getDateTime()
+    this.timer = setInterval(() => {
+      this.getDateTime()
+    }, 1000)
+  },
+  unmounted() {
+    clearInterval(this.timer)
   },
   methods: {
+    logout(){
+      const that=this
+      this.$Modal.confirm({
+        title: '你确认退出系统吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          localStorage.clear()
+          that.$router.push('/login')
+        },
+        onCancel() {
+        },
+        class: 'test'
+      })
+      
+    },
+    //getDateTime
+    getDateTime() {
+      this.currentTime = moment().locale('zh-cn').format('LTS')
+    },
     // 过滤函数：根据权限数据过滤路由并附加权限信息
     filterRoutes(routes, permissions) {
       return routes.filter((route) => {
@@ -130,7 +176,7 @@ export default {
 
         // 如果有权限项，附加到路由对象
         if (routePermissions.length > 0) {
-          route.permissions = routePermissions;
+          route.permissions = routePermissions
           hasViewPermission = true
         }
 
@@ -155,7 +201,7 @@ export default {
       //   this.menuList,
       //   JSON.parse(localStorage.getItem('permission'))
       // )
-      console.log( this.$route.matched, 'filteredRoutes')
+      console.log(this.$route.matched, 'filteredRoutes')
       this.subMenu = this.$route.matched[1].children || []
       // this.menuList= JSON.parse(localStorage.getItem('permission'))
       // this.subMenu =filteredRoutes[0].children||[]
@@ -172,7 +218,7 @@ export default {
     subMenuClick(subMenu) {
       console.log(subMenu, subMenu.path)
       this.subCurrentKey = subMenu.path
-      this.$router.push('/system'+subMenu.path)
+      this.$router.push('/system' + subMenu.path)
     }
   }
 }
@@ -188,6 +234,44 @@ export default {
 .header {
   width: 100%;
   height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  .text {
+    background: linear-gradient(
+      180deg,
+      rgb(255, 255, 255) 0%,
+      rgb(227, 254, 255) 33.17%,
+      rgb(35 190 195) 100%
+    );
+    
+    -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
+    background-clip: text;
+    color: transparent; /* 必须设置为透明 */
+    display: inline-block; /* 确保背景裁剪生效 */
+    line-height: 80px;
+    font-size: 18px;
+  }
+  .title{
+    font-size: 40px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 10px;
+
+  }
+  .user{
+    font-weight: 700;
+    font-size: 18px;
+    .icon-tuichu{
+      cursor: pointer;
+    }
+
+  }
+  .time{
+    font-weight: 700;
+  }
 }
 .subMenu {
   display: flex;
@@ -222,7 +306,7 @@ export default {
   height: 100%;
 }
 .subcontent {
-  height: calc(100% - 46px);
+  height: calc(100% - 56px);
 }
 .menu {
   position: absolute;
@@ -242,6 +326,7 @@ export default {
     color: #fff;
     font-size: 20px;
     font-weight: 700;
+    border: 1px solid #ffffff00;
     cursor: pointer;
     margin: 0 35px;
   }

web/src/views/monitor.vue

@@ -210,7 +210,8 @@ export default {
 @import url(@/style/color.scss);
 .monitor {
   // width: 100%;
-  height: calc(100% - 40px);
+  // height: calc(100% - 40px);
+  height: 100%;
   padding: 20px;
   background: $bg1-color;
   border-radius: 15px;
@@ -243,14 +244,13 @@ export default {
       display: grid;
       border-radius: 12px;
       background: $bg2-color;
-      padding-top: 10px;
+      padding-top: 15px;
       grid-template-rows: repeat(auto-fit, minmax(140px, 4fr));
       .station-item {
         flex: 1;
-        width: 100px;
-        margin: 0 10px 10px 10px;
+        margin: 0 15px 15px 15px;
         border-radius: 12px;
-        min-width: 160px;
+        width: 180px;
         display: flex;
         flex-direction: column;
         color: #fff;

web/src/views/system/alarmLog.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="alarmLog">
-    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
+    <!-- <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox> -->
 
     <div class="content-table">
       <ComTable
@@ -15,8 +15,8 @@
         </template>
         <template #status="record">
           <span
-            ><a-tag :color="record.status ? 'red' : 'green'">{{
-              record.status ? '异常' : '正常'
+            ><a-tag :color="record.status==0 ? 'red' : 'green'">{{
+              record.status==0 ? '异常' : '正常'
             }}</a-tag></span
           >
         </template>
@@ -193,10 +193,10 @@ export default {
 <style lang="scss" scoped>
 .alarmLog {
   height: 100%;
+  padding: 20px;
 
   .content-table {
-    height: calc(100% - 90px);
-    padding: 10px;
+    height: 100%;
   }
 }
 </style>

web/src/views/system/device.vue

@@ -18,8 +18,8 @@
           <span>{{ getType(record.type) }}</span>
         </template>
          <template #isEnable="record">
-          <span><a-tag :color="record.is_open ? 'green' : 'red'">{{
-                record.is_open ? '启用' : '禁用'
+          <span><a-tag :color="record.is_open==1 ? 'green' : 'red'">{{
+                record.is_open==1 ? '启用' : '禁用'
               }}</a-tag></span>
         </template>
 
@@ -203,7 +203,7 @@ export default {
           if (i.key === 'id') {
             e.ruleForm.id = row.id
           } else if (i.key === 'is_open') {
-            e.ruleForm.is_open = Boolean(row.is_open)
+            e.ruleForm.is_open = Boolean(Number(row.is_open))
           } else {
             e.ruleForm[i.key] = row[i.key] || ''
           }
@@ -232,10 +232,12 @@ export default {
 <style lang="scss" scoped>
 .device {
   height: 100%;
+  padding: 0 10px;
 
   .content-table {
+    width: 100%;
     height: calc(100% - 90px);
-    padding: 10px;
+    padding: 0 10px;
   }
 }
 </style>

web/src/views/system/log.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="syslog">
-    <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox>
+    <!-- <searchBox :btn-option-list="btnOptionList" @operateForm="operateForm"></searchBox> -->
 
     <div class="content-table">
       <ComTable
@@ -12,8 +12,8 @@
       >
         <template #status="record">
           <span>
-            <a-tag :color="record.status ? 'red' : 'green'">{{
-              record.status ? '异常' : '正常'
+            <a-tag :color="record.status==0 ? 'red' : 'green'">{{
+              record.status==0 ? '异常' : '正常'
             }}</a-tag>
             </span>
         </template>
@@ -176,10 +176,10 @@ export default {
 <style lang="scss" scoped>
 .syslog {
   height: 100%;
+  padding: 20px;
 
   .content-table {
-    height: calc(100% - 90px);
-    padding: 10px;
+    height: 100%;
   }
 }
 </style>

web/src/views/system/policy.vue

@@ -15,7 +15,7 @@
           <div>{{ getPolicyType(record.type) }}</div>
         </template>
         <template #isOpen="record">
-          <a-tag :color="record.is_open == 1 ? '#2db7f5' : '#f50'">{{
+          <a-tag :color="record.is_open == 1 ? 'green' : 'red'">{{
             record.is_open == 1 ? '启用' : '禁用'
           }}</a-tag>
         </template>
@@ -28,8 +28,8 @@
   <div>
     <a-modal
       v-model:open="formModal"
-      width="70%"
-      style="top: 20px"
+      width="900px"
+      style="top: 20px;"
       :footer="null"
       :get-container="() => $refs.policy"
     >
@@ -48,6 +48,7 @@ export default {
   name: '',
   components: { policyForm },
   props: {},
+
   data() {
     return {
       formModal: false,
@@ -58,21 +59,18 @@ export default {
           title: '策略ID',
           dataIndex: 'policy_id',
           key: 'policyId',
-          width: 120,
           ellipsis: true
         },
         {
           title: '策略名称',
           dataIndex: 'name',
           key: 'name',
-          width: 120,
           ellipsis: true
         },
         {
           title: '策略类型',
           dataIndex: 'type', //策略类型：1：削峰套利；2：需求响应；3：自发自用
           key: 'type',
-          width: 120,
           ellipsis: true,
           scopedSlots: { customRender: 'type' }
         },
@@ -80,7 +78,6 @@ export default {
           title: '策略描述',
           dataIndex: 'describe',
           key: 'describe',
-          width: 120,
           ellipsis: true
         },
         {
@@ -94,7 +91,6 @@ export default {
           title: '是否启用',
           dataIndex: 'is_open',
           key: 'isOpen',
-          width: 120,
           ellipsis: true,
           scopedSlots: { customRender: 'isOpen' }
         },
@@ -103,8 +99,8 @@ export default {
           title: '操作',
           dataIndex: 'action',
           key: 'action',
-          width: 150,
           ellipsis: true,
+          fixed:'right',
           scopedSlots: { customRender: 'action' }
         }
       ],
@@ -130,16 +126,18 @@ export default {
   },
   methods: {
     async getTableList() {
+      this.$refs.comTable.loading = true
       try {
+        this.$refs.comTable.loading = false
         const res = await getReq('/queryPolicyList', {
           page: this.pageOption.page,
           page_size: this.pageOption.pageSize
         })
-        console.log(res)
         this.tableData = res.data
         this.pageOption.count = res.count
       } catch (error) {
         console.log(error)
+        this.$refs.comTable.loading = false
       }
     },
     getPolicyType(type) {
@@ -236,10 +234,11 @@ export default {
 .policy {
   // width: 100%;
   height: 100%;
-  padding: 0 15px;
+  padding: 0 10px;
   .content-table {
     width: 100%;
     height: calc(100% - 90px);
+    padding: 0 10px;
   }
 }
 </style>

web/src/views/system/user.vue

@@ -44,6 +44,7 @@ import { columnList, userOptions } from '../../../public/config/columnList'
 import { getReq, postReq } from '@/request/api.js'
 import EditCom from '@/components/EditCom.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { Modal } from 'ant-design-vue'
 import { createVNode } from 'vue'
 export default {
   name: '',