iot-ui-plus/src/views/monitoring/devicemanage/components/header.vue

<template>
  <div class="title">
    <h3>{{ titleData }}</h3>
  </div>
  <div class="weather">
    <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 class="seeting">
    <n-tooltip trigger="hover">
      <template #trigger>
        <n-button class="tooltips" circle quaternary @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 quaternary @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 quaternary @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 quaternary @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">
            <span>{{ item.deviceName }}</span>
            <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-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>
</template>
<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router';
import { getWeather } from '@/api/user/index';
import { getWarList, process } 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 mitt from '@/plugins/bus';
import calendar from '@/utils/lunar';

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 routerType = ref('');
const deptId = ref(0);
const params = reactive({
  total: 10,
  pageSize: 10,
  pageNum: 1
});

const weatherData = ref({ city: '', weather: '', temperature: '', weatherImg: '' });

const lunarDay: any = 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();
});

mitt.on('waringMessage', (res: any) => {
  //监听报警信息
  console.log('waringMessage--', res.data);
  waringData.value = res.data;
  // 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() {
  //返回首页
  // emit('returnClick', '');
  if (routerType.value === '1' && route.path != '/screen') {
    router.push({
      path: '/screen',
      query: { id: sessionStorage.getItem('id') }
    });
  } else {
    router.replace('/dashboard');
  }
}
function waringClick() {
  //点击报警按钮
  // if (waringData.value.length === 0) {
  //     ElNotification({
  //         message: '暂没有报警信息！',
  //         type: 'info',
  //     })
  // } else {
  waringDrawer.value = true;
  // }
}

function lineClick() {
  //跳转图表
  router.push({
    path: '/details'
  });
}

function handleCurrentChange(val: any) {
  //点击分页
  params.pageNum = val;
  getwaringList();
}

function getWeatherData() {
  //获取天气
  getWeather().then((res: any) => {
    if (res.code === 200) {
      if (isCurrentRoute) {
        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: any) => {
    if (res.code === 200) {
      waringList.value = res.rows;
      params.total = res.total;
      // page.pageSize = res.size;
      // page.pageSize = res.current;
    }
  });
}
function waringConfirm(item: any) {
  //报警确认
  ElMessageBox.confirm('是否确认操作?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      const params = item.id;
      process(params).then((res: any) => {
        if (res.code === 200) {
          waringList.value = res.data;
          // waringDrawer.value = false
          // waringModal.value = false
          getwaringList();
          ElMessage({
            message: res.msg,
            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%;
    background: url(@/assets/images/title-bg.png);
    background-size: 100%;
    text-align: center;
    padding-bottom: 38px;
    margin: 0 auto;

    h3 {
      height: 57px;
      font-size: 3.8rem;
      font-family: 'YouSheBiaoTiHei';
      font-weight: 400;
      letter-spacing: 4px;
      background: linear-gradient(180deg, #fefdff 0%, #95daff 97%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0;
    }
  }
}

.weather {
  display: flex;
  align-items: center;
  position: absolute;
  top: 2.5rem;
  left: 7rem;
  color: #b2d4ff;
  font-size: 1.8rem;
  line-height: 2.2rem;
  font-family: 'AlibabaPuHuiTiRegular';

  .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: 2.5rem;
  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>