国检大屏update

src/http/guojian/index.ts

@@ -3,4 +3,9 @@ import {get,post} from "@/utils/http"
 //国检24小时趋势
 export function getGuoJian24Trend(){
     return get('/guoJian/getGuoJian24Trend')
-}
+}
+
+export function getAirWind(data:any){
+    return get('/guoJian/getAirWind',data)
+}
+

src/views/Hazardous/components/Card.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="card-container">
-        <div class="title">
+        <div class="title" :class="{ 'red-color':prop.config.value>=prop.config.limit }">
             {{ porptitle }}
         </div>
-        <div class="content" :class="{ noborder }">
+        <div class="card-content" :class="{ noborder,'red-bg':prop.config.value>=prop.config.limit }">
             <div v-if="prop.config.type == 1" class="type1">
                 <div class="img">
                     <img :src="prop.config.image">
@@ -23,7 +23,7 @@
             </div>
             <div v-if="prop.config.type == 3" class="type3">
                 <div class="img3">
-                    <img :src="prop.config.image" v-if="prop.config.value<1">
+                    <img :src="prop.config.image" v-if="prop.config.value<prop.config.limit">
                     <img :src="prop.config.image1" v-else>
                 </div>
             </div>
@@ -80,13 +80,21 @@ const porptitle = computed(() => {
     font-weight: 700;
     color: #66ffff;
 }
+.red-color {
+    color: #E43961;
+}
 
-.content {
+.card-content {
     width: 100%;
     height: 65%;
     border-right: 2px solid #53FFC3;
     font-size: 14px;
     color: #53FFC3;
+    padding: 2px;
+    box-sizing: border-box;
+}
+.red-bg {
+    background-color: #2C273A;
 }
 
 .noborder {

src/views/Hazardous/components/HDialog.vue

@@ -0,0 +1,215 @@
+<!--
+ * @FilePath: \code\gitscreenFront\src\components\headerBox\dialog\headerDialog.vue
+ * @Author: 王路平
+ * @文件版本: V1.0.0
+ * @Date: 2023-06-06 09:23:12
+ * @Description: 
+ * 
+ * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
+-->
+<template>
+  <div>
+    <el-dialog :title="props.title" v-model="is_Show" ref="" destroy-on-close>
+      <div style="margin-bottom: 20px">
+        <el-row :gutter="20">
+          <el-col :span="15">
+            <span style="margin-right: 10px; font-size: 18px;">日期：</span>
+            <el-date-picker v-model="selectTime" type="datetimerange" :shortcuts="shortcuts" range-separator="至"
+              format="YYYY/MM/DD HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" size="large"
+              style="font-size: 18px;" />
+          </el-col>
+          <el-col :span="9">
+            <span style="margin-right: 10px; font-size: 18px;">状态：</span>
+            <el-select v-model="searchConfig.status" clearable placeholder="请选择状态" style="font-size: 18px;" size="large">
+              <el-option v-for="item in alarmTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-col>
+
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="18"> </el-col>
+          <el-col :span="6">
+            <el-button type="primary" plain @click="searchpartData" size="large">搜索</el-button>
+            <el-button type="primary" plain @click="searchpartReset" size="large">重置</el-button>
+          </el-col>
+
+        </el-row>
+      </div>
+
+      <el-table :data="tableData" v-loading="dialogLoading" size="large" max-height="650px" stripe
+        style="font-size: 18px;">
+        <el-table-column type="index" :index="(searchConfig.pageNum - 1) * searchConfig.pageSize + 1" label="序号"
+          min-width="10px" header-align="center" width="100" align="center" />
+        <el-table-column property="name" label="名称" header-align="center" align="center" />
+        <el-table-column property="time" label="时间" header-align="center" align="center" />
+        <el-table-column label="状态" header-align="center" align="center" width="120">
+          <template #default="scope">
+            <text> {{ scope.row.status == '0'?'离线':'在线' }}</text>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="pagination-class">
+        <el-pagination v-model:current-page="searchConfig.pageNum" v-model:page-size="searchConfig.pageSize"
+          :page-sizes="[5, 10, 50, 100]" :small="small" :disabled="disabled" :background="background"
+          layout="  prev, pager, next, jumper,sizes" :total="props.total" size="large" style="font-size: 18px;"
+          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { gettime } from "@/utils/time";
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
+  dialogTableVisible: {
+    type: Boolean,
+    default: false,
+  },
+  type: {
+    type: String,
+    default: "",
+  },
+  dialogLoading: {
+    type: Boolean,
+    default: true,
+  },
+  total: {
+    type: Number,
+    default: 0,
+  },
+});
+//总页数、每页数量、当前页
+const searchConfig = reactive({
+  type: props.type,
+  status: '',
+  startTime: "",
+  endTime: "",
+  pageSize: 10,
+  pageNum: 1,
+});
+const selectTime = ref("");
+let small = ref(false);
+let disabled = ref(false);
+let background = ref(false);
+//类型选项
+const alarmTypeOptions = [
+  {
+    value: '0',
+    label: '离线',
+  },
+  {
+    value: '1',
+    label: '在线',
+  },
+]
+const emits = defineEmits(["update:dialogTableVisible", "getDialogdatafun"]);
+const is_Show = computed({
+  get: () => props.dialogTableVisible,
+  set: (val) => {
+    emits("update:dialogTableVisible", val);
+  },
+});
+
+computed({
+  get: () => props.type,
+  set: (val) => {
+    searchConfig.type = val;
+  },
+});
+watch(() => props.type,
+  (newVal, oldVal) => {
+    searchConfig.type = newVal
+  }, { immediate: true, deep: true })
+watch(
+  () => selectTime,
+  (newVal, oldVal) => {
+    //监听日期数据
+    if (newVal.value) {
+      searchConfig.startTime = gettime(newVal.value[0], 2);
+      searchConfig.endTime = gettime(newVal.value[1], 2);
+    } else {
+      searchConfig.startTime = null;
+      searchConfig.endTime = null;
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const handleSizeChange = (val: number) => {
+  searchConfig.pageSize = val;
+
+  emits("getDialogdatafun", searchConfig);
+};
+const handleCurrentChange = (val: number) => {
+  searchConfig.pageNum = val;
+  emits("getDialogdatafun", searchConfig);
+};
+
+const shortcuts = [
+  {
+    text: "最近一周",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+      return [start, end];
+    },
+  },
+  {
+    text: "最近一个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      return [start, end];
+    },
+  },
+  {
+    text: "最近三个月",
+    value: () => {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+      return [start, end];
+    },
+  },
+];
+//搜索
+function searchpartData() {
+  emits("getDialogdatafun", searchConfig);
+}
+//重置
+function searchpartReset() {
+
+  searchConfig.status = ''
+  selectTime.value = ''
+  //需要重置startTime、endTime，因监听重置有延迟
+  searchConfig.startTime = null;
+  searchConfig.endTime = null;
+  emits("getDialogdatafun", searchConfig);
+}
+onMounted(() => { });
+</script>
+
+<style scoped>
+.pagination-class {
+  margin-top: 20px;
+}
+
+:deep(.el-dialog__title) {
+  font-size: 25px;
+}
+
+.el-row {
+  margin-bottom: 20px;
+}
+</style>

src/views/Hazardous/components/scrollBoard.vue

@@ -49,34 +49,6 @@ const dvMouseover = (value) => {
     }
 
 };
-/**
- * 点击表格事件
- */
-const dvClick = (value) => {
-    if (value.row) {
-        let id = {
-            '精加车间': 1,
-            '机加车间': 2,
-            '大件车间': 3,
-            '精饰车间': 4,
-            '焊接车间': 5,
-        }
-
-        prop.config.rawData.forEach((res, index) => {
-
-            if (index == value.row[0] - 1) {
-                router.push({
-                    name: "Mechanicsson",
-                    params: {
-                        id: id[value.row[2]],
-                        dev: res.id
-                    },
-                });
-            }
-        });
-    }
-
-}
 /**
  * @函数功能:  鼠标移出组件方法
  * @出口参数: 

src/views/Hazardous/index.vue

@@ -15,11 +15,11 @@
                 <div class="card" style="width: 200px;">
                     <Card :title="'温度'" :config="config.wendu"></Card>
                 </div>
-                <div class="card" style="width: 400px;">
+                <div class="card" style="width: 400px;cursor: pointer;">
-                    <Card :title="'空调状态'" :type="2" :config="config.kongtiao"></Card>
+                    <Card :title="'空调状态'" :type="2" :config="config.kongtiao" @click="showDialog('kongtiao')"></Card>
                 </div>
-                <div class="card" style="width: 400px;">
+                <div class="card" style="width: 400px;cursor: pointer;">
-                    <Card :title="'排风状态'" :type="2" :config="config.paifeng"></Card>
+                    <Card :title="'排风状态'" :type="2" :config="config.paifeng" @click="showDialog('paifeng')"></Card>
                 </div>
                 <div class="card" style="width: 240px;">
                     <Card :title="'泄露监测'" :type="3" :config="config.xielou"></Card>
@@ -38,24 +38,30 @@
                     </Border>
                 </div>
                 <div class="box2">
-                    <Border :title="'报警记录'"></Border>
+                    <Border :title="'报警记录'">
+                        <scrollBoard ref="scrollBoardRef" :config="board_config"></scrollBoard>
+                    </Border>
                 </div>
             </div>
 
         </div>
+        <HDialog :tableData="dialogdata" :title="DialogTitle" v-model:dialogTableVisible="dialogTableVisible" :dialogLoading="dialogLoading"
+            @getDialogdatafun="getDialogdatafun" :total="dialogtotal" :type="dialogType"></HDialog>
     </div>
 </template>
 
 <script setup lang='ts'>
-import { ref, reactive, onMounted, onUnmounted } from 'vue';
+import { ref, reactive, onMounted, onUnmounted,computed } from 'vue';
 
 
 import header2 from '@/components/headerBox/header2.vue'
 import Border from './components/Border.vue';
 import Card from './components/Card.vue';
 import LineChart from './components/LineChart.vue';
+import scrollBoard from './components/scrollBoard.vue';
+import HDialog from './components/HDialog.vue';
 
-import { getGuoJian24Trend } from '@/http/guojian/index'
+import { getGuoJian24Trend, getAirWind } from '@/http/guojian/index'
 
 let timer = null
 let titleTip = [
@@ -79,6 +85,7 @@ const config = reactive({
         type: 1,
         classArr: [],
         value: 0,
+        limit: 70,
         unit: '%RH'
     },
     wendu: {
@@ -87,6 +94,7 @@ const config = reactive({
         type: 1,
         classArr: [],
         value: 0,
+        limit: 30,
         unit: '℃'
     },
     kongtiao: {
@@ -95,6 +103,7 @@ const config = reactive({
         type: 2,
         classArr: ['kongtiao'],
         value: 0,
+        limit: 2,
         unit: ''
     },
     paifeng: {
@@ -103,6 +112,7 @@ const config = reactive({
         type: 2,
         classArr: ['paifeng'],
         value: 0,
+        limit: 2,
         unit: ''
     },
     xielou: {
@@ -111,6 +121,7 @@ const config = reactive({
         type: 3,
         classArr: [],
         value: 0,
+        limit: 1,
         unit: ''
     },
     yanwu: {
@@ -119,6 +130,7 @@ const config = reactive({
         type: 3,
         classArr: [],
         value: 0,
+        limit: 1,
         unit: ''
     },
     ranqi: {
@@ -127,6 +139,7 @@ const config = reactive({
         type: 3,
         classArr: [],
         value: 0,
+        limit: 1,
         unit: ''
     },
 })
@@ -136,6 +149,18 @@ const calc = reactive({
     data: [],
     xAxis: [],
 })
+let scrollBoardRef = ref()
+let board_config = reactive({
+    header: ['报警时间', '名称', '状态', '持续时长'],
+    headerBGC: '#081B56',
+    oddRowBGC: '#000F1D',
+    evenRowBGC: '#000F1D',
+    wrap: [true, true, true, true],
+    columnWidth: [131, 175, 120, 140],
+    align: ['center', 'center', 'center', 'center'],
+    rowNum: 8,
+    waitTime: 3000,
+})
 const getGuoJian24TrendData = async () => {
     const res: any = await getGuoJian24Trend()
     if (res.code == 200) {
@@ -185,6 +210,50 @@ const getGuoJian24TrendData = async () => {
     }
 }
 
+//历史报警数据弹窗显示
+let Abnormalpopovervisible = ref(false);
+let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
+//dialog
+let dialogdata = ref([]);
+let dialogTableVisible = ref(false);
+let dialogLoading = ref(true);
+let dialogtotal = ref(0)
+let dialogType = ref("");
+let DialogTitle = computed(() => {
+    if (dialogType.value == "kongtiao") {
+        return "空调状态历史记录";
+    } else if (dialogType.value == "paifeng") {
+        return "排风状态历史记录";
+    }
+});
+function showDialog(type) {
+    if (dialogTableVisible.value == false) {
+    dialogType.value = type;
+        getDialogdatafun({
+            type: type,
+            pageSize: 10,
+            pageNum: 1,
+        });
+    }
+    Abnormalpopovervisible.value = false;
+    dialogTableVisible.value = true;
+}
+async function getDialogdatafun(config) {
+    dialogLoading.value = true;
+    let result: any = await getAirWind(config);
+
+    if (result.code == 200) {
+        dialogtotal.value = result.total
+        dialogdata.value = result.rows
+        dialogLoading.value = false;
+    } else {
+        setTimeout(() => {
+            if (dialogLoading.value) {
+                dialogLoading.value = false;
+            }
+        }, 0);
+    }
+}
 onMounted((() => {
     getGuoJian24TrendData()
     timer = setInterval(() => {