增加磁贴项

src/api/table/list.ts

@@ -39,7 +39,7 @@ export function getTableHeader(): AxiosPromise<[]> {
  */
 export function getTableData(params: number): AxiosPromise<TableVo> {
   return request({
-    url: '/bi/opt/getTableData/'+params,
+    url: '/bi/opt/getTableData/' + params,
     method: 'get'
   });
 }
@@ -60,9 +60,9 @@ export function editConfig(data: any) {
 /**
  * 获取底部面板信息
  */
-export function getTableFooter(): AxiosPromise<[]> {
+export function getTableFooter(params: number): AxiosPromise<[]> {
   return request({
-    url: '/bi/opt/getTableFooter',
+    url: '/bi/opt/getTableFooter/' + params,
     method: 'get'
   });
 }

src/api/table/types.ts

@@ -62,7 +62,7 @@ export interface TableVo {
  */
 export interface PanelVo {
   backImg: string;
-  ext: string;
+  ext: any;
   id: number;
   title: string;
   type: string;

src/router/index.ts

@@ -39,6 +39,11 @@ export const constantRoutes: RouteRecordRaw[] = [
     component: () => import('@/views/monitoring/devicemanage/index.vue'),
     meta: { hidden: true }
   },
+  {
+    path: '/details',
+    component: () => import('@/views/details/index.vue'),
+    meta: { hidden: true }
+  },
 
   {
     path: '/',

src/types/auto-imports.d.ts

@@ -5,6 +5,9 @@ declare global {
   const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
+  const ElTree: typeof import('element-plus/es')['ElTree']
+  const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -274,6 +277,9 @@ declare module 'vue' {
     readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
+    readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
+    readonly ElTree: UnwrapRef<typeof import('element-plus/es')['ElTree']>
+    readonly NEllipsis: UnwrapRef<typeof import('naive-ui')['NEllipsis']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>

src/types/components.d.ts

@@ -21,17 +21,30 @@ declare module '@vue/runtime-core' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     Hamburger: typeof import('./../components/Hamburger/index.vue')['default']
+    IEpDelete: typeof import('~icons/ep/delete')['default']
+    IEpEdit: typeof import('~icons/ep/edit')['default']
+    IEpPlus: typeof import('~icons/ep/plus')['default']
+    IEpPosition: typeof import('~icons/ep/position')['default']
+    IEpRefresh: typeof import('~icons/ep/refresh')['default']
+    IEpSearch: typeof import('~icons/ep/search')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     MultiUpload: typeof import('./../components/Upload/MultiUpload.vue')['default']
     NBadge: typeof import('naive-ui')['NBadge']
@@ -60,4 +73,7 @@ declare module '@vue/runtime-core' {
     Video: typeof import('./../components/Video/index.vue')['default']
     WangEditor: typeof import('./../components/WangEditor/index.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

src/views/details/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="roleContainer">
+    <el-card class="search" shadow="always">
+      <el-form ref="queryFormRef" :model="searchForm" :inline="true">
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="searchForm.keywords"
+            clearable
+            style="width: 200px"
+            placeholder="用户名/昵称/手机号"
+            @keyup.enter="getUserData"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getUserData"><i-ep-search />搜索</el-button>
+          <el-button @click="resetClick"><i-ep-refresh />重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list" shadow="always"> 内容 </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// import { getRolePage } from '@/api/role';
+// import { listMenuOptions } from '@/api/menu';
+// import { RolePageVO, RoleForm, RoleQuery } from '@/api/role/types';
+
+// const queryFormRef = ref(ElForm);
+// const roleData = ref<RolePageVO[]>();
+// const searchForm = reactive<RoleQuery>({
+//   pageNum: 1,
+//   pageSize: 10
+// });
+
+onMounted(() => {
+  // getUserData();
+});
+
+//列表数据
+// function getUserData() {
+//   loading.value = true;
+//   getRolePage(searchForm)
+//     .then(({ data }) => {
+//       // roleData.value = data.list;
+//     })
+//     .finally(() => {
+//       loading.value = false;
+//     });
+// }
+
+//搜索
+// function resetClick() {
+//   queryFormRef.value.resetFields();
+//   searchForm.pageNum = 1;
+//   getUserData();
+// }
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

src/views/monitoring/screen/components/infoPanel.vue

@@ -1,20 +1,34 @@
 <template>
   <div class="infoPanel">
-    <swiper class="swiper" :loop="true"
+    <swiper
-      :autoplay="{ delay: 500000, pauseOnMouseEnter: true, disableOnInteraction: false }" :modules="modules"
+      class="swiper"
-      :slides-per-view="4" :space-between="15" navigation :pagination="{ clickable: true }">
+      :loop="false"
+      :autoplay="{ delay: 500000, pauseOnMouseEnter: true, disableOnInteraction: false }"
+      :modules="modules"
+      :slides-per-view="4"
+      :space-between="15"
+      navigation
+      :pagination="{ clickable: true }"
+    >
       <swiper-slide class="item" v-for="(item, index) in panelData" :key="index">
         <div class="content">
           <div class="icon">
             <img src="@/assets/images/panel_icon.png" />
           </div>
-          <div class="numValue">
+          <div class="numValue" v-if="item.type === 'A'">
             <span>
               <countTo :start="1" :end="item.value" :duration="3000"></countTo>
             </span>
             <i>{{ item.ext }}</i>
             <p>{{ item.title }}</p>
           </div>
+          <div class="numValueMore" v-if="item.type === 'B'">
+            <div class="numItem" v-for="(res, index) in item.ext" :key="index">
+              <span>{{ res.name }}：</span>
+              <span><countTo :start="1" :end="res.value" :duration="3000"></countTo></span>
+              <span>{{ res.unit }}</span>
+            </div>
+          </div>
         </div>
       </swiper-slide>
     </swiper>
@@ -26,41 +40,110 @@ import { Navigation, Pagination, Autoplay } from 'swiper/modules';
 import { getTableFooter } from '@/api/table/list';
 import { PanelVo } from '@/api/table/types';
 import countTo from '@/utils/countTo';
+import mitt from '@/plugins/bus';
 import 'swiper/css';
 
 const modules = [Navigation, Pagination, Autoplay];
 const panelData = ref<PanelVo[]>();
+const deptId = ref(0);
 
-// interface CardData {
+// const panelData: PanelVo[] = [
-//   id: string;
+//   {
-//   title: string;
+//     title: '总产热量',
-//   value: number;
+//     value: 26449,
-//   ext: string,
+//     ext: 'KJ',
-//   time: number;
+//     backImg: '/poll/hot',
-//   icon: string;
+//     type: 'A',
-// }
+//     id: 2
-
+//   },
-// const cardData: CardData[] = [
+//   {
+//     title: '一次网补水',
+//     value: 9889,
+//     ext: 'm³',
+//     backImg: '/poll/onewater',
+//     type: 'A',
+//     id: 3
+//   },
 //   {
-//     id: '1',
 //     title: '设备在线率',
-//     value: 95,
+//     value: 40.425532,
 //     ext: '%',
-//     time: 5000,
+//     backImg: '/poll/dev',
-//     icon: ''
+//     type: 'A',
+//     id: 1
 //   },
+//   {
+//     title: '告警累计',
+//     value: 27893,
+//     ext: '次',
+//     backImg: '/poll/alert',
+//     type: 'A',
+//     id: 4
+//   },
+//   {
+//     title: '',
+//     value: 0,
+//     ext: [
+//       {
+//         name:'一次网供水温度',
+//         value:'58996',
+//         ext:'℃'
+//       },
+//       {
+//         name:'一次网回水温度',
+//         value:'58996',
+//         ext:'℃'
+//       },
+//       {
+//         name:'一次网供水流量',
+//         value:'58996',
+//         ext:'℃'
+//       },
+//       {
+//         name:'一次网回水流量',
+//         value:'32369',
+//         ext:'t/h'
+//       },
+//       {
+//         name:'一次网瞬时补水',
+//         value:'58996',
+//         ext:'℃'
+//       },
+//       {
+//         name:'一次网耗热累计',
+//         value:'58996',
+//         ext:'℃'
+//       },
+//       {
+//         name:'一次网补水累计',
+//         value:'8956',
+//         ext:'T'
+//       }
+//     ],
+//     backImg: '/poll/alert',
+//     type: 'B',
+//     id: 5
+//   }
 // ];
 
 onMounted(() => {
-  getPanel()
+  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
+  getPanel();
+});
+
+mitt.on('menuKey', (res: any) => {
+  //监听左侧菜单点击
+  deptId.value = res;
+  getPanel();
 });
 
 function getPanel() {
   //获取表格数据
-  getTableFooter().then((res: any) => {
+  const params = deptId.value;
+  getTableFooter(params).then((res: any) => {
     if (res.code === 200) {
       panelData.value = res.data;
     }
   });
 }
-</script>
+</script>

src/views/monitoring/screen/index.scss

@@ -18,10 +18,10 @@
     position: absolute;
     top: 118px;
     left: 0;
-    color: #B1E3FF;
+    color: #b1e3ff;
     text-align: center;
-    border: 1px solid #0D55B0;
+    border: 1px solid #0d55b0;
-    background-color: #02072E;
+    background-color: #02072e;
     border-right: none;
     cursor: pointer;
 
@@ -32,13 +32,13 @@
     .left {
       transform: rotate(0deg);
       -webkit-transform: rotate(0deg);
-      transition: transform .5s;
+      transition: transform 0.5s;
     }
 
     .right {
       transform: rotate(180deg);
       -webkit-transform: rotate(180deg);
-      transition: transform .5s;
+      transition: transform 0.5s;
     }
   }
 
@@ -49,7 +49,7 @@
     right: 0;
     width: 70%;
     text-align: center;
-    color: #A2CEFF;
+    color: #a2ceff;
     background: url(@/assets/images/panelBtn_bg.png) no-repeat center;
     background-size: 100% 100%;
     transition: width 0.28s;
@@ -64,18 +64,18 @@
     .up {
       transform: rotate(0deg);
       -webkit-transform: rotate(0deg);
-      transition: transform .5s;
+      transition: transform 0.5s;
     }
 
     .down {
       transform: rotate(180deg);
       -webkit-transform: rotate(180deg);
-      transition: transform .5s;
+      transition: transform 0.5s;
     }
   }
 
   .panelBtn.left {
-    left: 14%
+    left: 14%;
   }
 
   // .header {
@@ -163,7 +163,7 @@
       width: 12%;
       height: calc(100vh - 95px - 30px); //屏幕高度-头部header高度-底部高度
       flex-shrink: 0;
-      border: 1px solid #0D55B0;
+      border: 1px solid #0d55b0;
       padding: 10px 0;
       // box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 12);
       margin-right: 1vw;
@@ -271,7 +271,7 @@
       background-color: rgba(2, 8, 46, 0.8);
 
       .headerInfo {
-        border: 1px solid #0D55B0;
+        border: 1px solid #0d55b0;
         // box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 124);
         margin-bottom: 10px;
 
@@ -322,11 +322,10 @@
           // --vxe-table-border-color: none;
           --vxe-font-color: #5beff9;
           --vxe-table-header-font-color: #ffffffb3;
-          border: 1px solid #0D55B0;
+          border: 1px solid #0d55b0;
           // box-shadow: inset 0px 0px 10px 0px rgb(36, 90, 124);
 
           :deep(.vxe-table) {
-
             // height: calc(100vh - 5.7rem - 60px) !important;
             .vxe-table--body-wrapper {
               // height: calc(100vh - 5.7rem - 182px) !important;
@@ -339,7 +338,7 @@
                 border-left: none !important;
 
                 .vxe-resizable.is--line:before {
-                  content: none
+                  content: none;
                 }
               }
 
@@ -355,11 +354,10 @@
 
             .tableRowClass {
               .tableCellClass {
-
                 // border-bottom: 1px solid #265a89 !important;
                 .vxe-cell {
                   font-family: 'AlibabaPuHuiTiRegular';
-                  color: #B1E3FF;
+                  color: #b1e3ff;
 
                   .title {
                     display: flex;
@@ -410,7 +408,6 @@
 
             .tableRowClass.row--stripe {
               background-color: rgba(0, 95, 199, 0.15);
-              ;
             }
 
             .tips {
@@ -507,14 +504,14 @@
               display: flex;
               align-items: center;
               height: -webkit-fill-available;
-              border: 2px solid #0D54AE;
+              border: 2px solid #0d54ae;
               border-radius: 5px;
               color: #fff;
               padding: 15px;
               background-color: rgba(2, 8, 46, 0.5);
 
               .icon {
-                width: 40%;
+                width: 35%;
 
                 img {
                   width: 100%;
@@ -524,7 +521,7 @@
               .numValue {
                 flex: 1;
                 text-align: center;
-                color: #99E5FF;
+                color: #99e5ff;
 
                 span {
                   font-size: 5rem;
@@ -538,7 +535,26 @@
                 p {
                   font-size: 2rem;
                   margin: 0;
-                  color: #1782FF;
+                  color: #1782ff;
+                }
+              }
+
+              .numValueMore {
+                flex: 1;
+                margin-left: 1rem;
+                span {
+                  font-size: 1.4rem;
+                  line-height: 30px;
+                  color: #99e5ff;
+                  margin-right: 3px;
+                }
+                span:nth-child(1) {
+                  font-size: 1.6rem;
+                  color: #1782ff;
+                }
+                span:nth-child(2) {
+                  font-size: 1.8rem;
+                  margin-right: 5px;
                 }
               }
             }
@@ -614,7 +630,6 @@
     background-blend-mode: multiply;
 
     .layout {
-
       .sidebar {
         background-color: rgba(29, 30, 31, 0.8);
       }
@@ -644,4 +659,4 @@
       }
     }
   }
-}
+}