1.历史报警记录筛选条件(日期)添加

src/components/headerBox/dialog/headerDialog.vue

@@ -10,9 +10,53 @@
 <template>
   <div>
     <el-dialog v-model="is_Show" title="历史报警记录" ref="" destroy-on-close>
-      <el-table :data="tableData" v-loading="dialogLoading" size="large" max-height="600px" stripe>
-        <el-table-column type="index" :index="indexMethod" label="序号"  min-width="10px" header-align="center" align="center"/>
-        <el-table-column property="context" label="报警详情"  header-align="center"/>
+      <div style="margin-bottom: 20px;">
+        <el-row :gutter="20">
+        <el-col :span="15">
+          <span style="margin-right: 10px;">日期：</span>
+          <el-date-picker
+            v-model="selectTime"
+            type="datetimerange"
+            :shortcuts="shortcuts"
+            range-separator="至"
+            format="YYYY/MM/DD HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+          />
+        </el-col>
+        <el-col :span="6">
+         
+        </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">搜索</el-button>
+        </el-col>
+      </el-row>
+      </div>
+      
+      <el-table
+        :data="tableData"
+        v-loading="dialogLoading"
+        size="large"
+        max-height="600px"
+        stripe
+      >
+        <el-table-column
+          type="index"
+          :index="(searchConfig.pageNum - 1) * searchConfig.pageSize + 1"
+          label="序号"
+          min-width="10px"
+          header-align="center"
+          align="center"
+        />
+        <el-table-column
+          property="context"
+          label="报警详情"
+          header-align="center"
+        />
       </el-table>
       <div class="pagination-class">
         <el-pagination
@@ -23,18 +67,18 @@
           :disabled="disabled"
           :background="background"
           layout="  prev, pager, next, jumper,sizes"
-      :total="searchConfig.total"
+          :total="props.total"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
         />
       </div>
-      
     </el-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue";
+import { computed, onMounted, reactive, ref, watch } from "vue";
+import { gettime } from "@/utils/time";
 const props = defineProps({
   tableData: {
     type: Array,
@@ -50,7 +94,7 @@ const props = defineProps({
   },
   type: {
     type: String,
-    default: '',
+    default: "",
   },
   total: {
     type: Number,
@@ -60,38 +104,92 @@ const props = defineProps({
 //总页数、每页数量、当前页
 const searchConfig = reactive({
   type: props.type,
-  total:props.total,
+  startTime: "",
+  endTime: "",
   pageSize: 10,
-  pageNum:1
-})
-let small=ref(false)
-let disabled=ref(false)
-let background=ref(false)
-const emits = defineEmits(["update:dialogTableVisible",'getDialogdatafun']);
-const indexMethod = (index: number) => {
-  return index + 1
-}
+  pageNum: 1,
+});
+const selectTime = ref("");
+let small = ref(false);
+let disabled = ref(false);
+let background = ref(false);
+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(
+  () => selectTime,
+  (newVal, oldVal) => {
+    //监听父组件宽高变化，随时重置本组件尺寸
+    console.log(newVal.value);
+    
+    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
+  searchConfig.pageSize = val;
+
   emits("getDialogdatafun", searchConfig);
-}
+};
 const handleCurrentChange = (val: number) => {
-  searchConfig.pageNum=val
+  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);
 }
-onMounted(() => {
-
-  
-})
+onMounted(() => {});
 </script>
 
 <style scoped>
 .pagination-class {
-  margin-top: 10px;
-}</style>
+  margin-top: 20px;
+}
+</style>

src/components/headerBox/header2.vue

@@ -100,7 +100,7 @@ import useNowTime from "@/hook/nowTime";
 import { ClickOutside as vClickOutside } from "element-plus";
 import { useRoute, useRouter } from "vue-router";
 import { devListType } from "@/type/InPlantProducts";
-import { getAlarmListData } from "@/http/index";
+import { getAlarmListData,getAlarmListHistoryData } from "@/http/index";
 import {
   onMounted,
   onUnmounted,
@@ -132,7 +132,7 @@ let popoverliDom = ref();
 let Abnormalpopovervisible = ref(false);
 let AbnormalpopovervisibleCtrl = ref(false); //解决点击历史报警数据弹窗外部关闭再打开问题
 //dialog
-let dialogdata = reactive([]);
+let dialogdata = ref([]);
 let dialogTableVisible = ref(false);
 let dialogLoading = ref(true);
 let dialogtotal=ref(0)
@@ -224,7 +224,7 @@ function langJudge() {
 }
 function showDialog() {
   if (dialogTableVisible.value == false) {
-    dialogdata.length = 0;
+    
     getDialogdatafun({
       type: AbnormalType.type,
       pageSize: 10,
@@ -235,12 +235,13 @@ function showDialog() {
   dialogTableVisible.value = true;
 }
 async function getDialogdatafun(config) {
+  // dialogdata.length = 0;
   dialogLoading.value = true;
-  let result: any = await getAlarmListData(config);
+  let result: any = await getAlarmListHistoryData(config);
 
   if (result.code == 200) {
     dialogtotal.value=result.total
-    dialogdata.push(...result.rows)
+    dialogdata.value=result.rows
     dialogLoading.value = false;
   }else{
     setTimeout(() => {
@@ -249,6 +250,7 @@ async function getDialogdatafun(config) {
     }
   }, 0);
   }
+ console.log(dialogdata);
  
 
 }

src/http/index.ts

@@ -1,5 +1,5 @@
 /*
- * @FilePath: \wwwd:\code\screenFront\src\http\index.ts
+ * @FilePath: \code\gitscreenFront\src\http\index.ts
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-03-14 11:14:41
@@ -13,3 +13,7 @@ import {get,post} from "@/utils/http"
 export function getAlarmListData(data:any){
     return get('/alarm/getAlarmList',data)
 }
+//报警历史数据查询
+export function getAlarmListHistoryData(data:any){
+    return get('/alarm/getAlarmListHistory',data)
+}

src/main.ts

@@ -12,6 +12,8 @@ import App from './App.vue'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import 'element-plus/theme-chalk/dark/css-vars.css'
+import 'dayjs/locale/zh-cn'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 // import echarts from '@/utils/echarts.js'
 import echarts from '@/utils/echarts'
 import {createPinia} from 'pinia'
@@ -26,4 +28,4 @@ const store = createPinia()
 app.config.globalProperties.$echarts = echarts;//vue3的挂载方式
 app.use(store)
 app.use(i18n)
-app.use(router).use(ElementPlus).use(dataV).mount('#app')
+app.use(router).use(ElementPlus, {locale: zhCn,}).use(dataV).mount('#app')

src/utils/time.ts

@@ -1,5 +1,5 @@
 /*
- * @FilePath: \daping\src\utils\time.ts
+ * @FilePath: \code\gitscreenFront\src\utils\time.ts
  * @Author: 王路平
  * @文件版本: V1.0.0
  * @Date: 2023-02-07 13:43:31
@@ -9,10 +9,10 @@
  */
 
 import { getStoredLanguage } from "../utils/languageStorage";
-export function gettime(data = null) {
+export function gettime(data = null,type = 1) {
         var time
         if (data) {
-                time = new Date(data);
+                data instanceof Date? time=data : time = new Date(data);
         } else {
                 time = new Date();
         }
@@ -38,7 +38,14 @@ export function gettime(data = null) {
         if (minutes < 10) minutes = "0" + minutes;
         if (seconds < 10) seconds = "0" + seconds;
 
+        if(type==1){
                 return year + "-" + month + "-" + dates + " " + hours + ':' + minutes + ':' + seconds + ' ' + arr[day];
+        }else if (type == 2){
+                return year + "-" + month + "-" + dates + " " + hours + ':' + minutes + ':' + seconds;
+        }else{
+                return year + "-" + month + "-" + dates + " " + hours + ':' + minutes + ':' + seconds + ' ' + arr[day];
+        }
+       
 }
 export function clacendTime(endtime, nowtime) {
         let newDate = Math.abs(endtime - nowtime)