From 68c4becede9016656735030b7372ff5b37bbb3cf Mon Sep 17 00:00:00 2001
From: fuguobin <fgbin2008@163.com>
Date: Mon, 25 Mar 2024 13:54:41 +0800
Subject: [PATCH] =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/auto-imports.d.ts                   |  10 -
 .../screenData/components/header.vue          | 546 ++++++++++++++++++
 .../monitoring/screenData/components/main.vue |  15 +-
 .../monitoring/screenData/components/menu.vue |   4 +-
 src/views/monitoring/screenData/index.vue     |   2 +-
 5 files changed, 558 insertions(+), 19 deletions(-)
 create mode 100644 src/views/monitoring/screenData/components/header.vue

diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 5742656..6f8d200 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -2,11 +2,6 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  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 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']
@@ -273,11 +268,6 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
-    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 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']>
diff --git a/src/views/monitoring/screenData/components/header.vue b/src/views/monitoring/screenData/components/header.vue
new file mode 100644
index 0000000..edbbab4
--- /dev/null
+++ b/src/views/monitoring/screenData/components/header.vue
@@ -0,0 +1,546 @@
+<template>
+  <div class="title">
+    <h3>{{ titleData }}</h3>
+  </div>
+  <div class="weather">
+    <div class="users">{{ timePeriod }} {{ userStore.nickname }}</div>
+    <div class="timeTips">
+      <div class="time">{{ currentTime }} {{ lunarDay.ncWeek }}</div>
+      <div class="line"></div>
+      <div class="forecast">
+        <span>{{ weatherData.city }}：{{ weatherData.weather }} {{ weatherData.temperature }}℃</span>
+        <svg-icon class="weatherSvg" :icon-class="weatherData.weatherImg" />
+        <!-- <img src="../../../assets/images/weather/duoyun.png" /> -->
+      </div>
+    </div>
+  </div>
+  <div class="seeting">
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-button class="tooltips" circle dashed @click="returnBack">
+          <template #icon>
+            <n-icon>
+              <ReturnDownBack />
+            </n-icon>
+          </template>
+        </n-button>
+      </template>
+      返回上一页
+    </n-tooltip>
+    <n-tooltip trigger="hover">
+      <template #trigger>
+        <n-button class="tooltips" circle dashed @click="lineClick">
+          <template #icon>
+            <n-icon>
+              <ChartLine />
+            </n-icon>
+          </template>
+        </n-button>
+      </template>
+      图表
+    </n-tooltip>
+    <n-tooltip trigger="hover" v-if="settingShow">
+      <template #trigger>
+        <n-button class="tooltips" circle dashed @click="showClick">
+          <template #icon>
+            <n-icon>
+              <Settings />
+            </n-icon>
+          </template>
+        </n-button>
+      </template>
+      显示项
+    </n-tooltip>
+    <n-tooltip trigger="hover" v-if="warningShow">
+      <template #trigger>
+        <n-badge class="warningbadge" :value="waringData.length" :max="15">
+          <n-button class="tooltips" circle dashed @click="waringClick">
+            <template #icon>
+              <n-icon>
+                <Bell />
+              </n-icon>
+            </template>
+          </n-button>
+        </n-badge>
+      </template>
+      报警
+    </n-tooltip>
+  </div>
+  <n-drawer class="waringDrawer" v-model:show="waringDrawer" :default-width="420" resizable placement="right">
+    <n-drawer-content closable>
+      <template #header>
+        <div class="title">
+          <span>消息</span>
+          <span class="button" @click="waringMore">更多</span>
+        </div>
+      </template>
+      <div class="waringList">
+        <div class="item" v-for="(item, index) in waringData" :key="index">
+          <div class="name">
+            <div class="title">
+              <svg-icon icon-class="alarm" v-if="audioType === true && item.alertSwitch === '1'" />
+              <span>{{ item.deviceName }}</span>
+            </div>
+            <span class="time">{{ item.alertTime }}</span>
+          </div>
+          <div class="info">
+            <span>{{ item.paramName }}</span>
+            <!-- <n-button type="info" size="small" @click="waringConfirm(item)">确认</n-button> -->
+          </div>
+        </div>
+      </div>
+    </n-drawer-content>
+  </n-drawer>
+  <n-modal class="waringModal" v-model:show="waringModal">
+    <n-card :bordered="false" size="huge" role="dialog" aria-modal="true">
+      <el-table
+        class="waringTable"
+        :data="waringList"
+        header-row-class-name="headerRowClass"
+        header-cell-class-name="headerCellClass"
+        row-class-name="rowClass"
+        cell-class-name="cellClass"
+        height="350"
+        stripe
+      >
+        <el-table-column prop="deviceName" label="设备名称" align="center" />
+        <el-table-column prop="paramName" label="变量名称" align="center" />
+        <el-table-column prop="alertName" label="告警级别" align="center">
+          <template #default="scope">
+            <span class="level">{{ scope.row.alertName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="totalCounts" label="告警累计" align="center" />
+        <el-table-column label="报警时间" align="center">
+          <el-table-column prop="alertFirstTimeS" label="首次告警时间" align="center" />
+          <el-table-column prop="alertLastTimeS" label="末次告警时间" align="center" />
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" align="center">
+          <template #default="scope">
+            <el-switch
+              v-model="scope.row.alertSwitchBoolean"
+              inline-prompt
+              active-text="开"
+              inactive-text="关"
+              @change="alarrmChange($event, scope.row)"
+            />
+            <el-button class="confirm" type="info" size="small" @click="waringConfirm(scope.row)">确认</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        class="waringPagination"
+        layout="prev, pager, next"
+        :current-page.sync="params.pageNum"
+        :page-size="params.pageSize"
+        :total="params.total"
+        hide-on-single-page
+        @current-change="handleCurrentChange"
+      />
+      <div class="warClose" @click="warClose">
+        <CloseCircleOutline />
+      </div>
+    </n-card>
+  </n-modal>
+  <div class="alarm">
+    <audio loop autoplay ref="alarsRef" ebkit-playsinline="true" playsinline="true" controls="controls" muted hidden>
+      <source :src="audisUrl" type="audio/mp3" />
+    </audio>
+    <audio
+      loop
+      autoplay
+      ref="alarmRef"
+      ebkit-playsinline="true"
+      playsinline="true"
+      :src="audioUrl"
+      muted
+      hidden
+    ></audio>
+  </div>
+</template>
+<script setup>
+import { useRoute, useRouter } from 'vue-router';
+import { useUserStore } from '@/store/modules/user';
+import { getWeather } from '@/api/user/index';
+import { getWarList, process, setAlarm } from '@/api/waring/index';
+// import { waringVo } from '@/api/waring/types';
+import { Filter, Maximize, Settings, Power, Bell, ChartLine } from '@vicons/tabler';
+import { CloseCircleOutline, ReturnDownBack } from '@vicons/ionicons5';
+import { useDateFormat, useNow } from '@vueuse/core';
+// import { uniqueArrayObject } from '@/utils/index';
+import canAutoPlay from 'can-autoplay';
+import mitt from '@/plugins/bus';
+import calendar from '@/utils/lunar';
+import audioUrl from '@/assets/media/alarm.mp3';
+
+const audisUrl = ref('');
+const userStore = useUserStore();
+const hoursNow = useNow().value.getHours();
+const route = useRoute();
+const router = useRouter();
+
+const currentTime = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
+const emit = defineEmits(['showModalClick', 'returnClick']);
+const timer = ref();
+const isCurrentRoute = ref(true);
+const waringDrawer = ref(false);
+const waringModal = ref(false);
+// const waringData = ref<waringVo[]>([]);
+// const waringList = ref<waringVo[]>([]);
+const waringData = ref([]);
+const waringList = ref([]);
+const routerType = ref('');
+const deptId = ref(0);
+const params = reactive({
+  total: 10,
+  pageSize: 10,
+  pageNum: 1
+});
+
+const alarmRef = ref();
+const alarsRef = ref();
+const audioType = ref(false);
+
+const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' });
+
+const lunarDay = calendar.solarToLunar(
+  useNow().value.getUTCFullYear(),
+  useNow().value.getUTCMonth() + 1,
+  useNow().value.getUTCDate()
+);
+const props = defineProps({
+  titleData: {
+    type: String,
+    default: '数据监控'
+  },
+  settingShow: {
+    type: Boolean,
+    default: false
+  },
+  warningShow: {
+    type: Boolean,
+    default: false
+  }
+});
+
+onMounted(() => {
+  deptId.value = sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId'));
+  routerType.value = route.query?.id === undefined ? '0' : '1';
+  getWeatherData();
+  document.body.addEventListener('mousedown', function () {
+    if (alarsRef.value != null) {
+      console.log('鼠标按下');
+      alarsRef.value.play();
+      alarsRef.value.muted = false;
+    }
+  });
+});
+
+const timePeriod = computed(() => {
+  if (hoursNow >= 3 && hoursNow < 8) {
+    return '早安！';
+  } else if (hoursNow >= 8 && hoursNow < 11) {
+    return '上午好！';
+  } else if (hoursNow >= 11 && hoursNow < 13) {
+    return '中午好！';
+  } else if (hoursNow >= 13 && hoursNow < 17) {
+    return '下午好！';
+  } else if (hoursNow >= 17 && hoursNow < 23) {
+    return '晚上好！';
+  } else if (hoursNow >= 23 && hoursNow < 3) {
+    return '晚安！';
+  }
+});
+
+mitt.on('waringMessage', res => {
+  //监听报警信息
+  console.log('waringMessage--', res.data);
+  waringData.value = res.data;
+  res.data.map(item => {
+    // console.log(item.deviceName, item.alertSwitch);
+    if (item.alertSwitch === '1') {
+      // alarmRef.value.play();
+      // if (alarmRef.value) {
+      //   // 模拟用户点击事件
+      //   alarmRef.value.addEventListener('canplay', () => {
+      //     audioType.value = true;
+      //     alarmRef.value.play();
+      //     // alarmRef.value.muted = false;
+      //   });
+      //   const playPromise = alarmRef.value.play();
+      //   if (playPromise !== undefined) {
+      //     playPromise.catch(error => {
+      //       console.error(`Failed to play audio: ${error}`);
+      //     });
+      //   }
+      // }
+      canAutoPlay.audio().then(({ result }) => {
+        console.log('result--', result);
+        if (result === true) {
+          audioType.value = true;
+          alarmRef.value.play();
+          alarmRef.value.muted = false;
+        } else {
+          ElMessageBox.alert('检测到您的浏览器不支持媒体自动播放，是否同意播放提示音?', '提示', {
+            // if you want to disable its autofocus
+            // autofocus: false,
+            showClose: false,
+            confirmButtonText: '同意',
+            callback: action => {
+              audioType.value = true;
+              alarmRef.value.play();
+              alarmRef.value.muted = false;
+            }
+          });
+        }
+      });
+      return;
+    }
+  });
+  // waringData.value.push(res.data)
+  // console.log("waringData--", waringData.value);
+  // waringData.value = uniqueArrayObject(waringData.value, "id")
+  // console.log("waringData--", waringData.value);
+});
+
+function showClick() {
+  //显示/隐藏表格配置栏
+  emit('showModalClick', true);
+  //   showModal.value = true;
+}
+function returnBack() {
+  //返回首页
+  // router.replace('/dashboard');
+  // location.reload();
+  router.push({ path: '/dashboard' }).then(() => {
+    // 重新刷新页面
+    location.reload();
+  });
+}
+function waringClick() {
+  //点击报警按钮
+  // if (waringData.value.length === 0) {
+  //     ElNotification({
+  //         message: '暂没有报警信息！',
+  //         type: 'info',
+  //     })
+  // } else {
+  waringDrawer.value = true;
+  // }
+}
+
+function lineClick() {
+  //跳转图表
+  router.push({
+    path: '/details'
+  });
+}
+
+function handleCurrentChange(val) {
+  //点击分页
+  params.pageNum = val;
+  getwaringList();
+}
+
+function getWeatherData() {
+  //获取天气
+  getWeather().then(res => {
+    if (res.code === 200) {
+      if (isCurrentRoute.value) {
+        timer.value = setTimeout(async () => {
+          await (timer.value && clearTimeout(timer.value));
+          await getWeatherData();
+        }, 600000);
+      }
+      weatherData.value = res.data;
+    } else {
+      clearTimeout(timer.value);
+    }
+  });
+}
+
+function waringMore() {
+  //点击报警更多
+  waringDrawer.value = false;
+  waringModal.value = true;
+  getwaringList();
+}
+function getwaringList() {
+  //报警列表
+  const paramsr = {
+    beginTime: '',
+    endTime: '',
+    orgCode: sessionStorage.getItem('deptId') === null ? 0 : Number(sessionStorage.getItem('deptId')),
+    params
+  };
+  getWarList(paramsr).then(res => {
+    if (res.code === 200) {
+      waringList.value = res.rows;
+      params.total = res.total;
+      // page.pageSize = res.size;
+      // page.pageSize = res.current;
+    }
+  });
+}
+function alarrmChange(val, row) {
+  //关闭报警
+  const paramsr = {
+    id: row.id,
+    flag: val === true ? '1' : '0'
+  };
+  setAlarm(paramsr).then(res => {
+    if (res.code === 200) {
+      if (val === false) {
+        audioType.value = false;
+        alarmRef.value.pause();
+        alarmRef.value.muted = true;
+      }
+    }
+  });
+}
+function waringConfirm(item) {
+  //报警确认
+  ElMessageBox.confirm('是否确认操作?', '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(() => {
+      const params = item.id;
+      process(params).then(res => {
+        if (res.code === 200) {
+          waringList.value = res.data;
+          audioType.value = false;
+          alarmRef.value.pause();
+          alarmRef.value.muted = true;
+          // waringDrawer.value = false
+          // waringModal.value = false
+          getwaringList();
+          ElMessage({
+            message: res.msg,
+            grouping: true, //分组消息合并
+            type: 'success'
+          });
+        }
+      });
+    })
+    .catch(() => {});
+}
+function warClose() {
+  //报警列表关闭
+  waringModal.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  // height: 5.7rem;
+
+  .title {
+    width: 80%;
+    height: 70px;
+    line-height: 70px;
+    // background: url(@/assets/images/title-bg.png);
+    // background-size: 100%;
+    text-align: center;
+    // padding-bottom: 22px;
+    margin: 0 auto;
+
+    h3 {
+      font-size: 4.2rem;
+      font-family: 'YouSheBiaoTiHei';
+      font-weight: 400;
+      letter-spacing: 4px;
+      background: linear-gradient(180deg, #fefdff 0%, #1677b3 100%);
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      margin: 0;
+    }
+  }
+}
+
+.weather {
+  position: absolute;
+  top: 10px;
+  left: 7rem;
+  font-size: 1.6rem;
+  font-family: 'AlibabaPuHuiTiRegular';
+  .timeTips {
+    display: flex;
+    align-items: center;
+    // color: #b2d4ff;
+  }
+
+  .line {
+    width: 2px;
+    height: 2rem;
+    background: linear-gradient(to top, #000e38, #1ea8dd, #000e38);
+    margin: 0 1rem;
+  }
+
+  .forecast {
+    display: flex;
+    align-items: center;
+
+    .weatherSvg {
+      width: 1.5em !important;
+      height: 1.5em !important;
+      margin-left: 10px;
+    }
+
+    // img {
+    //     width: 25px;
+    //     margin-left: 10px;
+    // }
+  }
+}
+
+.seeting {
+  position: absolute;
+  top: 20px;
+  right: 7rem;
+
+  .warningbadge {
+    margin-top: -10px;
+  }
+
+  .tooltips {
+    width: 36px;
+    height: 36px;
+    // background: linear-gradient(180deg, #003269 1%, rgba(3, 79, 163, 0.2314) 56%, #003269 100%);
+    border-radius: 0px 0px 0px 0px;
+    opacity: 1;
+
+    // :deep(span) {
+    //   color: #5beff9;
+    // }
+
+    margin-left: 10px;
+  }
+}
+
+.waringModal {
+  .waringPagination {
+    justify-content: right;
+    margin-top: 5px;
+    :deep(button) {
+      color: #b1e3ff;
+      background: transparent;
+    }
+    :deep(.el-pager) {
+      .number,
+      .more {
+        color: #b1e3ff;
+        background: transparent;
+      }
+      .number.is-active {
+        color: #409eff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/monitoring/screenData/components/main.vue b/src/views/monitoring/screenData/components/main.vue
index cd77b5e..201f711 100644
--- a/src/views/monitoring/screenData/components/main.vue
+++ b/src/views/monitoring/screenData/components/main.vue
@@ -136,6 +136,7 @@ import mitt from '@/plugins/bus';
 // import socket from '@/utils/socket';
 import useStorage from '@/utils/useStorage';
 import { useUserStoreHook } from '@/store/modules/user';
+import { randomColor, endTime, debounce } from '@/utils/index';
 
 const sessionStorageIns = useStorage('sessionStorage');
 const { perms } = useUserStoreHook();
@@ -274,13 +275,12 @@ onMounted(() => {
 //     clearTimeout(timer.value);
 //   }
 // });
-
+onBeforeUnmount(() => {
+  clearTimeout(timer.value);
+});
 onBeforeRouteLeave((to, from) => {
-  //监听离开页面
   //组件注销前清除setTimeout
-  if (timer.value !== null || timer.value !== undefined) {
-    clearTimeout(timer.value);
-  }
+  clearTimeout(timer.value);
 });
 
 mitt.on('currentPageEmits', (res: any) => {
@@ -439,10 +439,13 @@ function tableMockDatas() {
       tablePage.total = res.total;
       // gridOptions.data = res.data;
       loadingShow.value = false;
-      asyncTableDatas();
+      tbleDataDebounce();
     }
   });
 }
+const tbleDataDebounce = debounce(() => {
+  asyncTableDatas();
+}, 10000);
 function asyncTableDatas() {
   //获取表格数据
   // const params = menuKey.value;
diff --git a/src/views/monitoring/screenData/components/menu.vue b/src/views/monitoring/screenData/components/menu.vue
index 1e79782..a371bcd 100644
--- a/src/views/monitoring/screenData/components/menu.vue
+++ b/src/views/monitoring/screenData/components/menu.vue
@@ -121,12 +121,12 @@ function menuUpdateValue(key: string, item: MenuOption) {
   sessionStorageIns.setUseStorage(props.menuType === '1' ? 'deptId' : 'id', key);
   sessionStorageIns.setUseStorage('currentPage', 1);
   if (props.menuType === '1') {
-    mitt.emit('currentPageEmits', 1);
+    mitt.emit('currentPageEmit', 1);
   }
   if (props.menuType === '2') {
     sessionStorageIns.setUseStorage('deptId', item.parentId);
   }
-  mitt.emit(props.menuType === '1' ? 'menuKey' : 'deviceMenuKey', key);
+  mitt.emit(props.menuType === '1' ? 'menuMockKeys' : 'deviceMenuKey', key);
   console.log(key, item);
 }
 </script>
diff --git a/src/views/monitoring/screenData/index.vue b/src/views/monitoring/screenData/index.vue
index 3a03bf6..fe3688f 100644
--- a/src/views/monitoring/screenData/index.vue
+++ b/src/views/monitoring/screenData/index.vue
@@ -90,7 +90,7 @@
 import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router';
 // import { useDateFormat, useNow } from '@vueuse/core';
 // import { Filter, Maximize, Settings, Power } from '@vicons/tabler';
-import Header from '../components/header.vue';
+import Header from './components/header.vue';
 import Menu from './components/menu.vue';
 import Main from './components/main.vue';
 import InfoPanel from './components/infoPanel.vue';