事件列表新

src/views/IncidentNewList.vue

@@ -16,7 +16,10 @@
             :options="searchsState"
             @change="typeChange()"
           ></cube-select> -->
-          <div class="stateSearch" @click="typeChange(tab)" v-for="tab in tabTypes" :key="tab.id" :class="{active: tabTypeIdActive == tab.id}">{{ tab.text }}（{{ tab.num }}）</div>
+          <div class="stateSearch" @click="typeChange(tab)" v-for="tab in tabTypes" :key="tab.id" :class="{active: tabTypeIdActive == tab.id}">
+            {{ tab.text }}（{{ tab.num }}）
+            <div class="filter" v-if="tab.id == 2" @click.stop="showDrawer()" :class="{active: tabTypeIdActive == tab.id}"><i class="dash dash-shaixuan"></i></div>
+          </div>
         </div>
         <div class="scroll-list-wrap">
           <cube-scroll
@@ -195,9 +198,11 @@
         <source :src="audioSrc" type="audio/mpeg">
       </audio>
     </div>
+    <seiminDrawer v-if="isShowDrawer" @close="closeDrawer" @confirm="confirmDrawer" :evt="evt"></seiminDrawer>
   </div>
 </template>
 <script>
+import seiminDrawer from "../custom/seiminDrawer.vue";
 import showModel from "../components/showModel/showModel.vue";
 import CubePage from "../components/cube-page.vue";
 import SwitchOption from "../components/switch-option";
@@ -208,6 +213,8 @@ import LoadIng from "./../views/loading.vue";
 export default {
   data() {
     return {
+      evt: null,
+      isShowDrawer: false,
       tabTypeIdActive: 2,
       tabTypes: [
         {
@@ -275,7 +282,8 @@ export default {
     InputOption,
     SelectOption,
     LoadIng,
-    showModel
+    showModel,
+    seiminDrawer,
   },
   computed: {
     options() {
@@ -306,6 +314,24 @@ export default {
     }
   },
   methods: {
+    // 确认侧边筛选框
+    confirmDrawer(evt){
+      console.log(evt);
+      this.evt = evt;
+      this.loadShow = true;
+      this.items = [];
+      this.idx = 0;
+      this.sum = 10;
+      this.getData();
+    },
+    // 关闭侧边筛选框
+    closeDrawer(){
+      this.isShowDrawer = false;
+    },
+    // 打开侧边筛选框
+    showDrawer(){
+      this.isShowDrawer = true;
+    },
     qiangdan(incident){
       return this.menu.some(v => v.link == 'shijianliebiao_qiangdan');
     },
@@ -621,6 +647,14 @@ export default {
         sum: 1,
         incident: { temporary: true,statusId }
       };
+      if(this.evt && this.evt.category.id){
+        postData.incident.levelCategory = this.evt.category;
+      }
+      if(this.evt && this.evt.area.id){
+        postData.incident.place = {
+          area: this.evt.area
+        }
+      }
       if (this.isToday == "today") {
         postData.incident.acceptDate =
           formatDate(new Date(), "yyyy-MM-dd") + " 00:00:00";
@@ -665,8 +699,19 @@ export default {
         searchType: this.searchType,
         idx: this.idx,
         sum: this.sum,
-        incident: { temporary: true,statusId:this.searchState?this.searchState:undefined }
+        incident: {
+          temporary: true,
+          statusId:this.searchState?this.searchState:undefined,
+        }
       };
+      if(this.evt && this.evt.category.id){
+        postData.incident.levelCategory = this.evt.category;
+      }
+      if(this.evt && this.evt.area.id){
+        postData.incident.place = {
+          area: this.evt.area
+        }
+      }
       if (this.isToday == "today") {
         postData.incident.acceptDate =
           formatDate(new Date(), "yyyy-MM-dd") + " 00:00:00";
@@ -963,6 +1008,20 @@ export default {
   top: 0.88rem;
   z-index: 6;
   display: flex;
+  .filter{
+    color: #005395;
+    position: absolute;
+    width: 1rem;
+    height: 0.88rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    right: 0;
+    &.active{
+      color: #fff;
+    }
+  }
   .stateSearch {
     flex: 1;
     text-align: center;

static/css/fontnew/demo_index.html

@@ -55,6 +55,18 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon dash">&#xe74a;</span>
+                <div class="name">筛选</div>
+                <div class="code-name">&amp;#xe74a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon dash">&#xe784;</span>
+                <div class="name">展开</div>
+                <div class="code-name">&amp;#xe784;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon dash">&#xe601;</span>
                 <div class="name">点播回放</div>
                 <div class="code-name">&amp;#xe601;</div>
@@ -120,9 +132,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'dash';
-  src: url('iconfont.woff2?t=1681130959360') format('woff2'),
-       url('iconfont.woff?t=1681130959360') format('woff'),
-       url('iconfont.ttf?t=1681130959360') format('truetype');
+  src: url('iconfont.woff2?t=1682499572335') format('woff2'),
+       url('iconfont.woff?t=1682499572335') format('woff'),
+       url('iconfont.ttf?t=1682499572335') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -149,6 +161,24 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon dash dash-shaixuan"></span>
+            <div class="name">
+              筛选
+            </div>
+            <div class="code-name">.dash-shaixuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon dash dash-zhankai"></span>
+            <div class="name">
+              展开
+            </div>
+            <div class="code-name">.dash-zhankai
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon dash dash-dianbohuifang"></span>
             <div class="name">
               点播回放
@@ -249,6 +279,22 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#dash-shaixuan"></use>
+                </svg>
+                <div class="name">筛选</div>
+                <div class="code-name">#dash-shaixuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#dash-zhankai"></use>
+                </svg>
+                <div class="name">展开</div>
+                <div class="code-name">#dash-zhankai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#dash-dianbohuifang"></use>
                 </svg>
                 <div class="name">点播回放</div>

static/css/fontnew/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "dash"; /* Project id 2879659 */
-  src: url('iconfont.woff2?t=1681130959360') format('woff2'),
-       url('iconfont.woff?t=1681130959360') format('woff'),
-       url('iconfont.ttf?t=1681130959360') format('truetype');
+  src: url('iconfont.woff2?t=1682499572335') format('woff2'),
+       url('iconfont.woff?t=1682499572335') format('woff'),
+       url('iconfont.ttf?t=1682499572335') format('truetype');
 }
 
 .dash {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.dash-shaixuan:before {
+  content: "\e74a";
+}
+
+.dash-zhankai:before {
+  content: "\e784";
+}
+
 .dash-dianbohuifang:before {
   content: "\e601";
 }

static/css/fontnew/iconfont.json

@@ -6,6 +6,20 @@
   "description": "引入一个新的字体图标",
   "glyphs": [
     {
+      "icon_id": "577355",
+      "name": "筛选",
+      "font_class": "shaixuan",
+      "unicode": "e74a",
+      "unicode_decimal": 59210
+    },
+    {
+      "icon_id": "7404466",
+      "name": "展开",
+      "font_class": "zhankai",
+      "unicode": "e784",
+      "unicode_decimal": 59268
+    },
+    {
       "icon_id": "13159546",
       "name": "点播回放",
       "font_class": "dianbohuifang",