项目提交

ruoyi-admin/src/main/resources/application.yml

@@ -49,6 +49,7 @@ logging:
     org.mybatis.spring.mapper: error
   config: classpath:logback-plus.xml
 
+
 # 用户配置
 user:
   password:
@@ -268,23 +269,6 @@ websocket:
   # 设置访问源地址
   allowedOrigins: '*'
 
---- #flowable配置
-flowable:
-  async-executor-activate: false #关闭定时任务JOB
-  #  将databaseSchemaUpdate设置为true。当Flowable发现库与数据库表结构不一致时，会自动将数据库表结构升级至新版本。
-  database-schema-update: none
-  activity-font-name: 宋体
-  label-font-name: 宋体
-  annotation-font-name: 宋体
-  # 关闭各个模块生成表，目前只使用工作流基础表
-  idm:
-    enabled: false
-  cmmn:
-    enabled: false
-  dmn:
-    enabled: false
-  app:
-    enabled: false
 
 
 mqtt:

ruoyi-modules/ruoyi-traffic/src/main/java/org/dromara/controller/SenEventsController.java

@@ -217,4 +217,12 @@ public class SenEventsController extends BaseController {
     public TableDataInfo<Map<String,Object>> keyVehicleEventStat(SenEventsObjectBo bo, PageQuery pageQuery) {
         return senEventsService.keyVehicleEventStat(bo,pageQuery);
     }
+    /**
+     * 查询事件的照片列表
+     */
+    @SaCheckPermission("manage:events:list")
+    @GetMapping("/eventsMediaList")
+    public TableDataInfo<SenEventsVo> eventsMediaList(SenEventsBo bo, PageQuery pageQuery) {
+        return senEventsService.eventsMediaList(bo, pageQuery);
+    }
 }

ruoyi-modules/ruoyi-traffic/src/main/java/org/dromara/domain/SenEventsMedia.java

@@ -4,6 +4,8 @@ import org.dromara.common.mybatis.core.domain.BaseEntity;
 import com.baomidou.mybatisplus.annotation.*;
 import lombok.Data;
 import lombok.EqualsAndHashCode;
+
+import java.io.Serializable;
 import java.util.Date;
 
 import java.io.Serial;
@@ -16,9 +18,8 @@ import java.io.Serial;
  * @date 2024-09-19
  */
 @Data
-@EqualsAndHashCode(callSuper = true)
 @TableName("sen_events_media")
-public class SenEventsMedia extends BaseEntity {
+public class SenEventsMedia implements Serializable {
 
     @Serial
     private static final long serialVersionUID = 1L;
@@ -54,5 +55,9 @@ public class SenEventsMedia extends BaseEntity {
      */
     private Date duration;
 
+    /**
+     * 创建时间
+     */
+    private Date createTime;
 
 }

ruoyi-modules/ruoyi-traffic/src/main/java/org/dromara/domain/vo/SenEventsVo.java

@@ -1,5 +1,6 @@
 package org.dromara.domain.vo;
 
+import org.apache.poi.ss.formula.functions.T;
 import org.dromara.domain.SenEvents;
 import com.alibaba.excel.annotation.ExcelIgnoreUnannotated;
 import com.alibaba.excel.annotation.ExcelProperty;
@@ -11,6 +12,7 @@ import lombok.Data;
 import java.io.Serial;
 import java.io.Serializable;
 import java.util.Date;
+import java.util.List;
 
 
 /**
@@ -91,6 +93,11 @@ public class SenEventsVo implements Serializable {
     private String dealStatus;
 
     /**
+     * 媒介数据
+     */
+    private List<SenEventsMediaVo> mediaList;
+
+    /**
      * 创建时间
      */
     @ExcelProperty(value = "创建时间")

ruoyi-modules/ruoyi-traffic/src/main/java/org/dromara/mapper/SenEventsMediaMapper.java

@@ -3,6 +3,7 @@ package org.dromara.mapper;
 import org.dromara.domain.SenEventsMedia;
 import org.dromara.domain.vo.SenEventsMediaVo;
 import org.dromara.common.mybatis.core.mapper.BaseMapperPlus;
+import org.mapstruct.Mapper;
 
 /**
  * 事件媒介

ruoyi-modules/ruoyi-traffic/src/main/java/org/dromara/service/ISenEventsService.java

@@ -125,4 +125,6 @@ public interface ISenEventsService {
      * 重点车辆分析
      */
     TableDataInfo<Map<String, Object>> keyVehicleEventStat(SenEventsObjectBo bo, PageQuery pageQuery);
+
+    TableDataInfo<SenEventsVo> eventsMediaList(SenEventsBo bo, PageQuery pageQuery);
 }

ruoyi-modules/ruoyi-traffic/src/main/java/org/dromara/service/impl/SenEventsServiceImpl.java

@@ -8,8 +8,11 @@ import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import lombok.RequiredArgsConstructor;
+import org.dromara.domain.SenEventsMedia;
 import org.dromara.domain.bo.SenEventsObjectBo;
 import org.dromara.domain.SenEventsObject;
+import org.dromara.domain.vo.SenEventsMediaVo;
+import org.dromara.mapper.SenEventsMediaMapper;
 import org.dromara.system.domain.SysDictData;
 import org.dromara.system.mapper.SysDictDataMapper;
 import org.springframework.stereotype.Service;
@@ -38,6 +41,8 @@ public class SenEventsServiceImpl implements ISenEventsService {
 
     private final SysDictDataMapper dictMapper;
 
+    private final SenEventsMediaMapper mediaMapper;
+
     /**
      * 查询事件信息
      *
@@ -154,6 +159,7 @@ public class SenEventsServiceImpl implements ISenEventsService {
         result.put("latestData", baseMapper.selectVoPage(pageQuery.build(), lqw).getRecords());
         return result;
     }
+
     public LambdaQueryWrapper<SenEvents> buildDateWrapper(String dateType) {
         LocalDateTime now = LocalDateTime.now();
         Date startDate = null;
@@ -179,6 +185,7 @@ public class SenEventsServiceImpl implements ISenEventsService {
                 .le(SenEvents::getCreateTime, endDate);
         return queryWrapper;
     }
+
     @Override
     public List<HashMap<String, Object>> importantEventsStat(String dateType) {
         LambdaQueryWrapper<SenEvents> queryWrapper = buildDateWrapper(dateType);
@@ -197,13 +204,15 @@ public class SenEventsServiceImpl implements ISenEventsService {
         result.putAll(baseMapper.motorInLanesCount(queryWrapper));
         return result;
     }
+
     /**
      * 事件占比TOP10（%）
      */
     @Override
-    public List<Map<String,Object>> eventPercentTop10() {
+    public List<Map<String, Object>> eventPercentTop10() {
         return baseMapper.eventPercentTop10();
     }
+
     /**
      * 近30日事件统计
      */
@@ -211,6 +220,7 @@ public class SenEventsServiceImpl implements ISenEventsService {
     public List<Map<String, Object>> eventMonthCount() {
         return baseMapper.eventMonthCount();
     }
+
     /**
      * 每日事件统计
      */
@@ -220,6 +230,7 @@ public class SenEventsServiceImpl implements ISenEventsService {
         queryWrapper.eq(SysDictData::getDictType, "event_type");
         return baseMapper.eventDayCount();
     }
+
     /**
      * 监控点位违反统计
      */
@@ -228,6 +239,7 @@ public class SenEventsServiceImpl implements ISenEventsService {
         LambdaQueryWrapper<SenEvents> queryWrapper = buildDateWrapper(dateType);
         return baseMapper.pointEventsStat(queryWrapper);
     }
+
     /**
      * 区域违法分布
      */
@@ -235,15 +247,17 @@ public class SenEventsServiceImpl implements ISenEventsService {
     public List<HashMap<String, Object>> regionEventsStat(String dateType) {
         return baseMapper.regionEventsStat(dateType);
     }
+
     /**
      * 每分钟事件统计
      */
     @Override
     public List<HashMap<String, Object>> minuteEventsStat(String eventType) {
-        LambdaQueryWrapper<SenEvents> queryWrapper=new LambdaQueryWrapper<>();
+        LambdaQueryWrapper<SenEvents> queryWrapper = new LambdaQueryWrapper<>();
         queryWrapper.eq(SenEvents::getEventType, eventType);
         return baseMapper.minuteEventsStat(queryWrapper);
     }
+
     /**
      * 交通违法数据来源分析
      */
@@ -252,6 +266,7 @@ public class SenEventsServiceImpl implements ISenEventsService {
         LambdaQueryWrapper<SenEvents> queryWrapper = buildDateWrapper(dateType);
         return baseMapper.eventsDatasourceStat(queryWrapper);
     }
+
     /**
      * 交通违法分布式时间
      */
@@ -260,6 +275,7 @@ public class SenEventsServiceImpl implements ISenEventsService {
         LambdaQueryWrapper<SenEvents> queryWrapper = buildDateWrapper(dateType);
         return baseMapper.eventsHourStat(queryWrapper);
     }
+
     /**
      * 交通违法处置分析
      */
@@ -268,6 +284,7 @@ public class SenEventsServiceImpl implements ISenEventsService {
         LambdaQueryWrapper<SenEvents> queryWrapper = buildDateWrapper(dateType);
         return baseMapper.eventsDealRateStat(queryWrapper);
     }
+
     /**
      * 骑行违法分析
      */
@@ -275,11 +292,12 @@ public class SenEventsServiceImpl implements ISenEventsService {
     public TableDataInfo<Map<String, Object>> cycleEventStat(SenEventsBo senEventsBo, PageQuery pageQuery) {
         LambdaQueryWrapper<SenEvents> queryWrapper = new LambdaQueryWrapper<>();
         queryWrapper.like(StringUtils.isNotBlank(senEventsBo.getPointName()), SenEvents::getPointName, senEventsBo.getPointName());
-        queryWrapper.ge(StringUtils.isNotBlank((CharSequence) senEventsBo.getParams().get("startDate")),SenEvents::getCreateTime, senEventsBo.getParams().get("startDate"))
-                .le(StringUtils.isNotBlank((CharSequence) senEventsBo.getParams().get("endDate")),SenEvents::getCreateTime, senEventsBo.getParams().get("endDate"));
+        queryWrapper.ge(StringUtils.isNotBlank((CharSequence) senEventsBo.getParams().get("startDate")), SenEvents::getCreateTime, senEventsBo.getParams().get("startDate"))
+                .le(StringUtils.isNotBlank((CharSequence) senEventsBo.getParams().get("endDate")), SenEvents::getCreateTime, senEventsBo.getParams().get("endDate"));
         Page<Map<String, Object>> result = baseMapper.cycleEventStat(pageQuery.build(), queryWrapper);
-         return TableDataInfo.build(result);
+        return TableDataInfo.build(result);
     }
+
     /**
      * 重点车辆分析
      */
@@ -289,15 +307,33 @@ public class SenEventsServiceImpl implements ISenEventsService {
         queryWrapper.like(StringUtils.isNotBlank(bo.getObjectId()), SenEventsObject::getObjectId, bo.getObjectId());
         String startDate = null;
         String endDate = null;
-        if(StringUtils.isNotBlank((CharSequence) bo.getParams().get("startDate"))){
-            startDate= (String) bo.getParams().get("startDate");
+        if (StringUtils.isNotBlank((CharSequence) bo.getParams().get("startDate"))) {
+            startDate = (String) bo.getParams().get("startDate");
+        }
+        if (StringUtils.isNotBlank((CharSequence) bo.getParams().get("endDate"))) {
+            endDate = (String) bo.getParams().get("endDate");
         }
-        if(StringUtils.isNotBlank((CharSequence) bo.getParams().get("endDate"))){
-            endDate= (String) bo.getParams().get("endDate");
+        Page<Map<String, Object>> result = baseMapper.keyVehicleEventStat(pageQuery.build(), startDate, endDate, queryWrapper);
+        return TableDataInfo.build(result);
+    }
+
+    @Override
+    public TableDataInfo<SenEventsVo> eventsMediaList(SenEventsBo bo, PageQuery pageQuery) {
+        LambdaQueryWrapper<SenEvents> queryWrapper = new LambdaQueryWrapper<>();
+        queryWrapper.eq(bo.getPointId() != null, SenEvents::getPointId, bo.getPointId());
+        queryWrapper.eq(StringUtils.isNotBlank(bo.getEventCategory()), SenEvents::getEventCategory, bo.getEventCategory());
+        queryWrapper.eq(StringUtils.isNotBlank(bo.getDealStatus()), SenEvents::getDealStatus, bo.getDealStatus());
+        queryWrapper.in(StringUtils.isNotBlank(bo.getEventType()), SenEvents::getEventType, bo.getEventType());
+        queryWrapper.ge(StringUtils.isNotBlank((CharSequence) bo.getParams().get("startDate")), SenEvents::getCreateTime, bo.getParams().get("startDate"))
+                .le(StringUtils.isNotBlank((CharSequence) bo.getParams().get("endDate")), SenEvents::getCreateTime, bo.getParams().get("endDate"));
+        queryWrapper.orderByDesc(SenEvents::getCreateTime);
+        Page<SenEventsVo> result = baseMapper.selectVoPage(pageQuery.build(), queryWrapper);
+        for (SenEventsVo vo : result.getRecords()) {
+            LambdaQueryWrapper<SenEventsMedia> mediaWrapper = new LambdaQueryWrapper<>();
+            mediaWrapper.eq(SenEventsMedia::getEventId, vo.getId());
+            List<SenEventsMediaVo> mediaList = mediaMapper.selectVoList(mediaWrapper);
+            vo.setMediaList(mediaList);
         }
-//        queryWrapper.ge(StringUtils.isNotBlank((CharSequence) bo.getParams().get("startDate")),SenEventsObject::getCreateTime, bo.getParams().get("startDate"))
-//                .le(StringUtils.isNotBlank((CharSequence) bo.getParams().get("endDate")),SenEventsObject::getCreateTime, bo.getParams().get("endDate"));
-        Page<Map<String, Object>> result = baseMapper.keyVehicleEventStat(pageQuery.build(), startDate,endDate,queryWrapper);
         return TableDataInfo.build(result);
     }
 }

ruoyi-modules/ruoyi-traffic/src/main/java/org/dromara/task/DemoTask.java

@@ -1,8 +1,10 @@
 package org.dromara.task;
 
 import org.dromara.domain.SenEvents;
+import org.dromara.domain.SenEventsMedia;
 import org.dromara.domain.SenFlowDetail;
 import org.dromara.mapper.SenEventsMapper;
+import org.dromara.mapper.SenEventsMediaMapper;
 import org.dromara.mapper.SenFlowDetailMapper;
 import org.dromara.mapper.SenMonitorTaskMapper;
 import org.slf4j.Logger;
@@ -11,6 +13,7 @@ import org.springframework.scheduling.annotation.Scheduled;
 import org.springframework.stereotype.Component;
 import lombok.RequiredArgsConstructor;
 
+import java.util.Date;
 import java.util.List;
 
 @Component
@@ -21,6 +24,7 @@ public class DemoTask {
     private final SenMonitorTaskMapper taskMapper;
     private final SenEventsMapper eventMapper;
     private final SenFlowDetailMapper flowMapper;
+    private final SenEventsMediaMapper eventsMediaMapper;
 
             @Scheduled(cron = "0 0/30 * * * ?")
 //    @Scheduled(cron = "0 15 10 ? * *")
@@ -28,7 +32,16 @@ public class DemoTask {
     public void executeHourlyTask() {
         List<SenEvents> taskList = taskMapper.selectScheduledTask();
         for (SenEvents event : taskList) {
-            eventMapper.insert(event);
+            boolean flag = eventMapper.insert(event)>0;
+            if(flag){
+                SenEventsMedia senEventsMedia = new SenEventsMedia();
+                senEventsMedia.setEventId(event.getId());
+                senEventsMedia.setMediaType("1");
+                senEventsMedia.setFileName("event"+event.getEventType()+"_image.png");
+                senEventsMedia.setFilePath("/static/event"+event.getEventType()+".png");
+                senEventsMedia.setCreateTime(new Date());
+                eventsMediaMapper.insert(senEventsMedia);
+            }
         }
         List<SenFlowDetail> flowList = taskMapper.selectFlowTask();
         for (SenFlowDetail flowDetail : flowList) {

traffic-ui/src/api/sense/events/index.ts

@@ -214,3 +214,14 @@ export const keyVehicleEventStat = (params) => {
     params
   });
 };
+/**
+ *查询事件的照片列表
+ */
+
+export const eventsMediaList = (params) => {
+  return request({
+    url: '/manage/events/eventsMediaList',
+    method: 'get',
+    params
+  });
+};

traffic-ui/src/utils/index.ts

@@ -1,5 +1,28 @@
 import { parseTime } from '@/utils/ruoyi';
 
+export function dateFormat(date, format = 'yyyy-MM-dd HH:mm:ss') {
+  const o = {
+    'M+': date.getMonth() + 1, // 月份
+    'd+': date.getDate(), // 日
+    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
+    'H+': date.getHours(), // 小时
+    'm+': date.getMinutes(), // 分
+    's+': date.getSeconds(), // 秒
+    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
+    S: date.getMilliseconds(), // 毫秒
+    a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
+    A: date.getHours() < 12 ? 'AM' : 'PM' // AM/PM
+  };
+  if (/(y+)/.test(format)) {
+    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  for (let k in o) {
+    if (new RegExp('(' + k + ')').test(format)) {
+      format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
+    }
+  }
+  return format;
+}
 /**
  * 表格时间格式化
  */

traffic-ui/src/views/analysis/eventCategoryStat/index.vue

@@ -171,7 +171,7 @@ const lineOptions = computed(() => {
       type: 'category',
       axisLabel: {
         show: true,
-        interval: 0,//横轴信息全部显示
+        // interval: 0,//横轴信息全部显示
         // margin: 5, //刻度标签与轴线之间的距离
       },
       data: xData

traffic-ui/src/views/index.vue

@@ -143,7 +143,8 @@ const lineOptions = computed(() => {
   });
   const options = {
     tooltip: {
-      trigger: 'axis'
+      trigger: 'axis',
+      appendToBody: true
     },
     legend: {
       data: Object.keys(pointNames)

traffic-ui/src/views/sense/dealKeyEvents/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
+      :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="90px">
+            <el-form-item label="监控点名称" prop="pointId">
+              <el-select v-model="queryParams.pointId">
+                <el-option v-for="item in monitorPoints" :key="item.pointId" :label="item.pointName"
+                  :value="item.pointId"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="事件类型" prop="eventType">
+              <el-select v-model="queryParams.eventType" multiple collapse-tags collapse-tags-tooltip>
+                <el-option v-for="item in eventTypeOptions" :key="item.dictValue" :label="item.dictLabel"
+                  :value="item.dictValue" />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="时间范围" prop="params">
+              <el-date-picker v-model="queryParams.params.date" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange"
+                range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts"
+                @change="handleQuery" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+      <div class="table-list">
+        <div class="table-item" v-for="item in eventList">
+            <div class="table-item-content">
+              <img :src="`${imgSuffix}${item.mediaList[0].filePath}`" alt="">
+            </div>
+            <div class="table-item-footer">
+              <div>
+                <span>{{item.eventName}}</span>
+                <span class="">{{item.createTime}}</span>
+              </div>
+              <el-button type="primary" size="small">忽略</el-button>
+            </div>
+        </div>
+        <!-- <el-card v-for="item in eventList">
+          <template #header>
+            <div class="card-header">
+              <span>Card name</span>
+            </div>
+          </template>
+          <p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
+          <template #footer>
+            <div class="table-item-footer">
+              <div>车辆事故</div>
+              <div><el-button type="primary">忽略</el-button></div>
+            </div>
+          </template>
+        </el-card> -->
+      </div>
+
+
+      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+        v-model:limit="queryParams.pageSize" @pagination="getList" />
+    </el-card>
+  </div>
+</template>
+
+<script setup name="dealKeyEvents" lang="ts">
+import { eventsMediaList } from '@/api/sense/events';
+import { listMonitorPoint } from '@/api/manage/monitorPoint'
+import { getDicts } from '@/api/system/dict/data'
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import { dateFormat } from '@/utils/index'
+const eventList = ref([]);
+const eventTypeOptions = ref([])
+const loading = ref(true);
+const showSearch = ref(true);
+const total = ref(0);
+const monitorPoints = ref([])
+const queryFormRef = ref<ElFormInstance>();
+const imgSuffix = ref('http://127.0.0.1:8080')
+const shortcuts = [
+  {
+    text: '今天',
+    value: () => {
+      const now = new Date();
+      return getStartAndEndTimeForDate(now)
+    }
+  },
+  {
+    text: '昨天',
+    value: () => {
+      const now = new Date();
+      now.setDate(now.getDate() - 1);
+      return getStartAndEndTimeForDate(now)
+    }
+  },
+  {
+    text: '前天',
+    value: () => {
+      const now = new Date();
+      now.setDate(now.getDate() - 2);
+      return getStartAndEndTimeForDate(now)
+    }
+  }
+]
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 12,
+  pointId: undefined,
+  eventType: [],
+  eventCategory: '1',
+  params: {
+    date: [],
+    startDate: '',
+    endDate: ''
+  }
+})
+const getStartAndEndTimeForDate = (date) => {
+  let startOfDay = new Date(date);
+  startOfDay.setHours(0, 0, 0, 0); // 设置为当天的开始时间
+  let endOfDay = new Date(date);
+  endOfDay.setHours(23, 59, 59, 999); // 设置为当天的最后一秒
+  return [startOfDay, endOfDay];
+}
+const getList = async () => {
+  loading.value = true;
+  queryParams.value.params.startDate = ''
+  queryParams.value.params.endDate = ''
+  if (queryParams.value.params.date && queryParams.value.params.date.length) {
+    const [startDate, endDate] = queryParams.value.params.date
+    queryParams.value.params.startDate = startDate
+    queryParams.value.params.endDate = endDate
+  }
+  const res = await eventsMediaList(queryParams.value);
+  eventList.value = res.rows;
+  total.value = res.total;
+  loading.value = false;
+}
+
+
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields();
+  handleQuery();
+}
+
+const getMonitorPoints = () => {
+  listMonitorPoint().then(({ code, rows }) => {
+    if (code === 200) {
+      monitorPoints.value = rows
+    }
+  })
+}
+
+
+onMounted(() => {
+  getList();
+  getMonitorPoints();
+  getDicts('event_type').then(({ code, data }) => {
+    if (code === 200) {
+      eventTypeOptions.value = (data || []).filter((item, index) => index < 4)
+    }
+  })
+});
+</script>
+<style lang="scss" scoped>
+.table-list {
+  display: flex;
+  flex-wrap: wrap; // 换行
+  .table-item {
+    width: 24%;
+    padding: 10px;
+    margin: 0 10px 10px 0;
+    border-radius: 2px;
+    box-shadow: 0px 0px 12px rgba(0,0,0,0.12);
+  }
+  .table-item-content{
+    img{
+      height: 200px;
+      width: 100%;
+    }
+  }
+  .table-item-footer{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    >div:first-of-type{
+      display: flex;
+      align-items: center;
+      span:first-child{
+        font-size: 13px;
+      }
+      span:last-child{
+        font-size: 12px;
+        margin-left: 5px;
+      }
+    }
+  }
+}
+</style>