气象预警历史记录

ruoyi-ui/src/views/JiHeExpressway/pages/perception/meteorologyCheck/components/weatherWarning/components/infoWarning/index.vue

@@ -6,6 +6,8 @@
           <span class="text">当前气象预警信息数：</span>
           <span class="num">{{ warningList.length }}</span>
         </div>
+        <el-button type="primary" size="mini" class="btnSearch" @click="handleDialog" icon="el-icon-search">历史记录</el-button>
+
       </div>
       <div class="warningList" v-if="warningList.length > 0">
         <div class="itemWarning" v-for="item in warningList">
@@ -42,8 +44,64 @@
         </div>
       </div>
       <Empty v-else text="暂无数据..."></Empty>
+
+    <Dialog v-model="openDialog" title="气象预警历史记录" width="1000px" top="8%">
+      <!-- <Button style="margin: 10px 0 20px 20px; width: 100px;" @click.native="onAdd">添加</Button> -->
+      <div class="header">
+        <el-form ref="queryForm" :model="queryForm" label-width="80px" :inline="true">
+          <el-form-item label="站点" prop="stationId">
+            <el-select v-model="queryForm.stationName" placeholder="选择站点" clearable size="mini">
+              <el-option
+                v-for="(item,index) in stationList"
+                :key="index"
+                :label="item.name"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="日期范围" prop="dateRange">
+            <el-date-picker
+              v-model="queryForm.dateRange"
+              clearable
+              style="width: 300px;height:36px"
+              type="daterange"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="changeDateRange">
+            </el-date-picker>
+          </el-form-item>
+
+          <el-form-item>
+            <Button @click.native="handleQuery" type="info" style="margin-top: 8px;">查询</Button>
+          </el-form-item>
+          <el-form-item>
+            <Button type="primary" @click.native="handleExport" style="margin-top: 8px;">导出</Button>
+          </el-form-item>
+
+        </el-form>
+      </div>
+
+      <div >
+        <Table :data="tableList" height="500px">
+
+          <ElTableColumn label="预警标题" align="center" width="140"  prop="earlyWorningTitle" />
+          <ElTableColumn label="站点名称" align="center" width="80"  prop="stationName" />
+          <ElTableColumn label="预警发布时间" align="center" width="200"  prop="warningTime" />
+          <ElTableColumn label="预警内容" align="center"  prop="earlyWorningContent" />
+        </Table>
+      </div>
+
+      <div class="footer" v-if="total > 0">
+        <Pagination :total="total" :current-page.sync="queryForm.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="queryForm.pageSize"
+                    layout="total,sizes,prev, pager, next, jumper" @size-change="getWarningHistory"
+                    @current-change="getWarningHistory" />
+      </div>
+    </Dialog>
+
+
     </div>
-  
+
 </template>
 
 <script>
@@ -52,12 +110,21 @@ import WgtTitle from "../../../../../widgets/title";
 import { getMeteorologicalEarlyWarning } from "@/api/perception/meteorologyCheck";
 import moment from "moment";
 import request from '@/utils/request'
+import Dialog from "@screen/components/Dialog/index.vue";
+import Button from "@screen/components/Buttons/Button.vue";
+import Table from '@screen/components/Table.vue';
+import Pagination from "@screen/components/Pagination.vue";
+import { Loading } from 'element-ui';
 
 import {  mapState } from "vuex";
 export default {
   name: "infoWarning",
   components: {
     WgtTitle,
+    Dialog,
+    Button,
+    Table,
+    Pagination
   },
   computed: {
     ...mapState(["menu"]),
@@ -67,9 +134,33 @@ export default {
       moment,
       warningList: [],
       warningData: [],
+
+      openDialog:false,
+      queryForm:{
+        pageNum: 1,
+        pageSize: 10,
+        stationName:'',
+        dateRange:[],
+        startTime:'',
+        endTime:''
+      },
+      stationList:[
+        {name:'大学城收费站',value:'长清'},
+        {name:'长清收费站',value:'长清'},
+        {name:'孝里收费站',value:'长清'},
+        {name:'平阴北收费站',value:'平阴'},
+        {name:'平阴收费站',value:'平阴'},
+        {name:'平阴南收费站',value:'平阴'},
+        {name:'东平收费站',value:'东平'},
+        {name:'梁山东收费站',value:'梁山'},
+        {name:'梁山收费站',value:'梁山'},
+        {name:'嘉祥西收费站',value:'嘉祥'},
+      ],
+      tableList:[],
+      total:0,
     };
   },
- 
+
   created() {},
   methods: {
     getWarningData() {
@@ -80,19 +171,94 @@ export default {
           "earlyWorningLevel":"1|2|3"
         }
       }).then(res=>{
-        
+
         res.data.forEach(e=>{
             e.earlyWorningIssueDate = e.earlyWorningIssueDate.replace('T',' ')
           })
           this.warningList = res.data;
       })
     },
+
+    handleDialog(){
+      this.openDialog = true
+      this.handleQuery()
+    },
+    changeDateRange(value){
+      if (this.queryForm.dateRange && this.queryForm.dateRange.length == 2){
+        this.queryForm.startTime = this.queryForm.dateRange[0] + ' 00:00:00'
+        this.queryForm.endTime = this.queryForm.dateRange[1] + ' 23:59:59'
+      } else {
+        this.queryForm.startTime = ''
+        this.queryForm.endTime = ''
+      }
+    },
+    handleQuery(){
+      this.queryForm.pageNum = 1
+      this.queryForm.pageSize = 10
+      this.getWarningHistory()
+    },
+    getWarningHistory(){
+      request({url: '/weatherForecast/getHistory',
+        method: 'get',
+        params: this.queryForm
+      }).then(res=>{
+        this.total = res.total
+        this.tableList = res.rows;
+      })
+    },
+
+    handleExport(){
+      // this.download('weatherForecast/export', {
+      //   ...this.queryForm
+      // }, `气象预警历史记录.xlsx`)
+
+      const self = this;
+      this.$confirm("是否确认导出查询内容?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(function () {
+          let loadingInstance = Loading.service({
+            fullscreen: true,
+            background: "#00000052",
+            text: "文件正在下载...",
+          });
+          const _search = _.cloneDeep(self.queryForm);
+          delete _search.pageSize
+          delete _search.pageNum
+          request({
+            url: `/weatherForecast/export`,
+            method: "post",
+            data: _search,
+            responseType: 'blob',
+          }).then((res) => {
+            console.log(res)
+
+            const url = window.URL.createObjectURL(new Blob([res]));
+            let link = document.createElement("a");
+            link.style.display = "none";
+            link.href = url;
+            link.setAttribute("download", "气象预警历史记录.xlsx");
+            document.body.appendChild(link);
+            link.click();
+            URL.revokeObjectURL(link.href); // 释放URL 对象
+            document.body.removeChild(link);
+            link = null;
+            loadingInstance.close();
+          })
+            .catch((err) => {
+              self.$message.error(err);
+              loadingInstance.close();
+            });
+        })
+    },
   },
   mounted() {
     setTimeout(() => {
-      this.getWarningData();  
+      this.getWarningData();
     }, 500);
-    
+
   },
 };
 </script>
@@ -244,6 +410,7 @@ export default {
     width: 100%;
     height: 40px;
     margin: 10px 0px;
+    justify-content: space-between;
     .buttons {
       width: 100%;
       height: 38px;
@@ -381,5 +548,11 @@ export default {
     }
   }
 }
-
+.footer {
+  margin-top: 15px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>