From 7c906b4acf785180132f91db5d70c3a29fa85cd3 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 21 六月 2023 09:39:13 +0800
Subject: [PATCH] 新增页面和配置，对接口
---
src/components/Home/Projecting.vue | 123 +++++++++++++++++++++++++----------------
1 files changed, 75 insertions(+), 48 deletions(-)
diff --git a/src/components/Home/Projecting.vue b/src/components/Home/Projecting.vue
index 84dba18..6f4557b 100644
--- a/src/components/Home/Projecting.vue
+++ b/src/components/Home/Projecting.vue
@@ -1,69 +1,89 @@
<template>
<a-card title="近期通知" class="projecting">
- <a slot="extra" href="#" style="color: rgb(19, 194, 194)">全部通知</a>
- <a-card-grid style="width:33.33%;text-align:center" v-for="(item, index) in lists" :key="'projecting' + index">
+ <a slot="extra" href="release" class="tapBtn">全部通知</a>
+ <a-card-grid style="width:33.33%;text-align:center" v-for="(item, index) in lists" :key="'projecting' + index" @click="openDetails(item.id)">
<div class="title">
- <img :src="item.img" :alt="item.title">
- <span>{{ item.title }}</span>
+ <img :src="img" :alt="item.title">
+ <span>{{ getRiskName(item.disasterType)}} {{getLevelName(item.warningLevel)}}</span>
</div>
<p>{{ item.content }}</p>
<div class="project-item">
- <b>{{ item.name }}</b>
- <span>{{ item.created | filterTime }}</span>
+ <b>{{ item.publishingUnit }}</b>
+ <span>{{ item.publishingTime | filterTime }}</span>
</div>
</a-card-grid>
+ <msg-detail-mod ref="msgDetail"></msg-detail-mod>
</a-card>
</template>
<script>
+import {getPublishRecord} from "@/api/list";
+import msgDetailMod from "@/views/Admin/components/msgDetailMod";
export default {
name: 'projecting',
+ components: { msgDetailMod },
data () {
return {
- lists: [
- {
- img: require('@/assets/user.png'),
- title: '气象 红色预警',//显示灾害种类和对应颜色级别
- content: '根据中央气象台消息，全疆近日气温将……',
- name: '自治区',
- created: '2020-10-12 12:12:12'
- },
- {
- img: require('@/assets/user.png'),
- title: '气象 红色预警',
- content: '今日阿勒泰地区将持续低温，请各单位……',
- name: '阿勒泰地区',
- created: '2021-08-21 12:12:12'
- },
- {
- img: require('@/assets/user.png'),
- title: '气象 黄色预警',
- content: '根据中央气象台消息，全疆近日气温将……',
- name: '自治区',
- created: '2022-10-12 12:12:12'
- },
- {
- img: require('@/assets/user.png'),
- title: '气象 红色预警',
- content: '根据中央气象台消息，全疆近日气温将……',
- name: '自治区',
- created: '2022-08-21 12:12:12'
- },
- {
- img: require('@/assets/user.png'),
- title: '气象 红色预警',
- content: '根据中央气象台消息，全疆近日气温将……',
- name: '自治区',
- created: '2022-10-12 12:12:12'
- },
- {
- img: require('@/assets/user.png'),
- title: '气象 红色预警',
- content: '根据中央气象台消息，全疆近日气温将……',
- name: '自治区',
- created: '2022-08-25 12:12:12'
+ search:{
+ pageIndex: 1,
+ pageSize: 6,
+ searchParams:{
+ emergType: null,
+ startTime: '',
+ endTime: ''
}
+ },
+ lists: [],
+ img: require('@/assets/user.png'),
+ riskOptions: [
+ {name: '地震',value: 1},
+ {name: '洪涝',value: 2},
+ {name: '气象',value: 3},
+ {name: '泥石流',value: 4},
+ {name: '水旱',value: 5},
+ {name: '森林草原火灾',value: 6}
+ ],
+ levelOptions: [
+ {name: '红色预警',value: 1},
+ {name: '橙色预警',value: 2},
+ {name: '黄色预警',value: 3},
+ {name: '蓝色预警',value: 4}
]
+ // lists: [
+ // {
+ // img: require('@/assets/user.png'),
+ // title: '气象 红色预警',//显示灾害种类和对应颜色级别
+ // content: '根据中央气象台消息，全疆近日气温将……',
+ // name: '自治区',
+ // created: '2020-10-12 12:12:12'
+ // }
+ // ]
+ }
+ },
+ created() {
+ this.getData()
+ },
+ methods:{
+ async getData(){
+ const t = this
+ const res = await getPublishRecord(t.search)
+ if(res.data.code == 100){
+ t.lists = res.data.data
+ }else{
+ this.$message.error(res.data.msg)
+ }
+ },
+ getRiskName(disasterType){
+ return this.riskOptions.find(i => i.value === disasterType)?.name;
+ },
+
+ getLevelName(warningLevel){
+ return this.levelOptions.find(i => i.value === warningLevel)?.name;
+ },
+ openDetails(id){
+ const t = this
+ t.$refs.msgDetail.getDetails(id)
+ t.$refs.msgDetail.visible = true
}
}
}
@@ -71,6 +91,13 @@
<style lang="less" scoped>
.projecting {
+ .tapBtn{
+ color: #333;
+ &:hover{
+ color: @link;
+ }
+ }
+
.title {
text-align: left;
margin-bottom: 10px;
--
Gitblit v1.9.2