事件警告文字提示

src/components/alarm.vue

@@ -1,5 +1,5 @@
 <!--
- * @LastEditors: wangcc
+ * @LastEditors: gcz
 -->
 <template>
   <div class="alarm-wrap">
@@ -8,7 +8,9 @@
         <img src="../assets/img/gaojing.png" alt />
         <div class="g-container">
           <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
-            <li v-for="(item,index) in data" :key="index" @click="jumpMap(item)">{{item.content}}</li>
+            <li v-for="(item,index) in data" :key="index" @click="jumpMap(item)">
+            {{item.countyName}}{{item.townName}}{{item.villageName}}{{item.createTime.slice(11)}}发现[{{item.eventType|filterEventType}}]，请尽快处理！
+            </li>
           </ul>
         </div>
       </div>
@@ -293,7 +295,11 @@ ul li {
 @media only screen and (max-width : 1200px) {
   .alarm{
     width: 35vw;
-    
+    ul{
+      li{
+        font-size: 14px;
+      }
+    }
   }
 }
 </style>

src/main.js

@@ -17,6 +17,10 @@ import "@/assets/scss/index.scss";
 import { Select, Option, Input } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 
+//main.js添加
+import filters from './utils/filters'
+filters(Vue);
+
 Vue.use(Select);
 Vue.use(Option);
 Vue.use(Input);

src/utils/filters.js

@@ -0,0 +1,22 @@
+/*
+ * @LastEditors: gcz
+ */
+// utils新建文件内容如下
+const filters = {
+    filterEventType: function (val) {
+        if (val == 1) {
+            return '火灾';
+        } else if (val == 2) {
+            return '砍伐';
+        } else if (val == 3) {
+            return '病虫害';
+        } else {
+            return '未知';
+        }
+    },
+}
+export default (vm) => {
+    Object.keys(filters).forEach(key => {
+        vm.filter(key, filters[key])
+    })
+}