From 70f7331e5029ffb8d229f1b37fd81f73321dab89 Mon Sep 17 00:00:00 2001
From: “dzb” <2632970487@qq.com>
Date: 星期四, 03 十一月 2022 10:58:47 +0800
Subject: [PATCH] 违规检索

---
 src/views/intelligentPatrol/illegalSearch/index.vue |  355 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 352 insertions(+), 3 deletions(-)

diff --git a/src/views/intelligentPatrol/illegalSearch/index.vue b/src/views/intelligentPatrol/illegalSearch/index.vue
index 3bcc678..133ebbe 100644
--- a/src/views/intelligentPatrol/illegalSearch/index.vue
+++ b/src/views/intelligentPatrol/illegalSearch/index.vue
@@ -1,15 +1,364 @@
 <template>
   <div class="illegal-search">
-    
+    <header>
+      <div class="headerContent">
+        <!-- 鏉′欢绛涢�� -->
+        <el-form ref="condition" :model="form" label-width="100px">
+          <el-form-item :label=item.label :key=item.id v-for="item in headerList">
+            <el-input v-model="item.value" :placeholder="item.placeholder"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </header>
+    <main>
+      <div class="mainContent">
+        <!-- 鎸夐挳鍖哄煙 -->
+        <div class="main-btns">
+          <div class="main-btns-left">
+            <el-button icon="el-icon-download">涓嬭浇鍥剧墖</el-button>
+            <el-button icon="el-icon-folder">瀵煎嚭</el-button>
+          </div>
+          <div class="main-btns-right">
+            <el-button icon="el-icon-search">鏌ヨ</el-button>
+            <el-button icon="el-icon-delete-solid" @click="handleReset">閲嶇疆</el-button>
+          </div>
+        </div>
+        <!-- 鏁版嵁灞曠ず -->
+        <el-table ref="multipleTable"
+          :header-cell-style="{ background: '#06122c', 'font-size': '12px', color: '#4b9bb7', 'font-weight': '650', 'line-height': '45px' }"
+          :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
+          <el-table-column type="selection" min-width="5">
+          </el-table-column>
+          <el-table-column prop="number" label="浜嬩欢缂栧彿" min-width="10">
+          </el-table-column>
+          <el-table-column prop="type" label="杩濊绫诲瀷" min-width="10">
+          </el-table-column>
+          <el-table-column prop="source" label="浜嬩欢鏉ユ簮" min-width="10">
+          </el-table-column>
+          <el-table-column prop="level" label="浜嬩欢绛夌骇" min-width="10">
+          </el-table-column>
+          <el-table-column prop="point" label="鎶ヨ鐐逛綅" min-width="10">
+          </el-table-column>
+          <el-table-column prop="org" label="鎵�灞炵粍缁�" min-width="10">
+          </el-table-column>
+          <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="12">
+          </el-table-column>
+          <el-table-column prop="continueTime" label="鎸佺画鏃堕棿" min-width="12">
+          </el-table-column>
+          <el-table-column prop="carNumber" label="杞︾墝鍙风爜" min-width="10">
+          </el-table-column>
+          <el-table-column prop="state" label="瀹℃牳鐘舵��" min-width="10">
+          </el-table-column>
+          <el-table-column prop="advice" label="澶勭悊鎰忚" min-width="10">
+          </el-table-column>
+          <el-table-column prop="operation" label="鎿嶄綔" min-width="15">
+            <template slot-scope="scope">
+              <div class="operation">
+                <span>鏌ョ湅</span>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </main>
   </div>
 </template>
-
 <script>
+import helper from "@/utils/mydate.js"
 export default {
+  components: {
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          number: '123456',
+          type: '浜烘皯璺彸浜�',
+          source: '瑙嗛涓婃姤',
+          level: '涓�鑸簨浠�',
+          point: '123.123,123.233',
+          org: '浜烘皯閮�',
+          alarmTime: '2022-02-12 12:00:00',
+          continueTime: '2灏忔椂30鍒嗛挓06绉�',
+          carNumber: '娴橞245CM',
+          state: '寰呭鏍�',
+          advice: '闇�鍙婃椂澶勭悊'
+        },
+        {
+          number: '123457',
+          type: '浜烘皯璺乏浜�',
+          source: '瑙嗛涓婃姤',
+          level: '楂樺彂浜嬩欢',
+          point: '123.123,123.233',
+          org: '浜烘皯閮�',
+          alarmTime: '2022-02-12 12:00:00',
+          continueTime: '2灏忔椂30鍒嗛挓06绉�',
+          carNumber: '娴橞245CM',
+          state: '寰呭鏍�',
+          advice: '闇�鍙婃椂澶勭悊'
+        },
+        {
+          number: '123458',
+          type: '浜哄璺彸浜�',
+          source: '瑙嗛涓婃姤',
+          level: '涓�鑸簨浠�',
+          point: '123.123,123.233',
+          org: '浜烘皯閮�',
+          alarmTime: '2022-02-12 12:00:00',
+          continueTime: '2灏忔椂30鍒嗛挓06绉�',
+          carNumber: '娴橞245CM',
+          state: '寰呭鏍�',
+          advice: '闇�鍙婃椂澶勭悊'
+        },
+        {
+          number: '123459',
+          type: '浜烘皯璺彸浜�',
+          source: '瑙嗛涓婃姤',
+          level: '涓�鑸簨浠�',
+          point: '123.123,123.233',
+          org: '浜烘皯閮�',
+          alarmTime: '2022-02-12 12:00:00',
+          continueTime: '2灏忔椂30鍒嗛挓06绉�',
+          carNumber: '娴橞245CM',
+          state: '寰呭鏍�',
+          advice: '闇�鍙婃椂澶勭悊'
+        },
+        {
+          number: '123460',
+          type: '浜烘皯璺彸浜�',
+          source: '瑙嗛涓婃姤',
+          level: '涓�鑸簨浠�',
+          point: '123.123,123.233',
+          org: '浜烘皯閮�',
+          alarmTime: '2022-02-12 12:00:00',
+          continueTime: '2灏忔椂30鍒嗛挓06绉�',
+          carNumber: '娴橞245CM',
+          state: '寰呭鏍�',
+          advice: '闇�鍙婃椂澶勭悊'
+        }
+      ],
+      context: "",
+      dialogView: false,
+      userInfo: '',
+      headerList: [
+        {
+          id: 1,
+          label: '鎵�灞炵粍缁�:',
+          value: '',
+          placeholder: '璇疯緭鍏ユ墍灞炵粍缁�'
+        },
+        {
+          id: 2,
+          label: '鎶ヨ鏃堕棿:',
+          value: '',
+          placeholder: '璇疯緭鍏ユ姤璀︽椂闂�'
+        },
+        {
+          id: 3,
+          label: '杩濊绫诲瀷:',
+          value: '',
+          placeholder: '璇疯緭鍏ヨ繚瑙勭被鍨�'
+        },
+        {
+          id: 4,
+          label: '浜嬩欢缂栧彿:',
+          value: '',
+          placeholder: '璇疯緭鍏ヤ簨浠剁紪鍙�'
+        },
+        {
+          id: 5,
+          label: '鐩戞帶鐐瑰悕绉�:',
+          value: '',
+          placeholder: '璇疯緭鍏ョ洃鎺х偣鍚嶇О'
+        },
+        {
+          id: 6,
+          label: '瀹℃牳鐘舵��:',
+          value: '',
+          placeholder: '璇疯緭鍏ュ鏍哥姸鎬�'
+        },
+        {
+          id: 7,
+          label: '杞︾墝鍙�:',
+          value: '',
+          placeholder: '璇疯緭鍏ヨ溅鐗屽彿'
+        },
+        {
+          id: 8,
+          label: '澶勭悊鎰忚:',
+          value: '',
+          placeholder: '璇疯緭鍏ヤ簨浠剁瓑绾�'
+        },
+        {
+          id: 9,
+          label: '鎶ヨ鏃堕棿:',
+          value: '',
+          placeholder: '璇疯緭鍏ユ墍灞炵粍缁�'
+        },
+      ],
+      form:{
 
+      }
+    }
+  },
+  created() {
+  },
+  methods: {
+    changeTime({ createTime }) {
+      return helper(createTime);
+    },
+    // 璁剧疆琛ㄦ牸鏂戦┈绾�
+    tableRowClassName({ row, rowIndex }) {
+      if ((rowIndex + 1) % 2 == 0) {
+        return 'warning-row';
+      } else {
+        return 'success-row';
+      }
+      return '';
+    },
+    // 琛ㄥ崟閲嶇疆
+    handleReset(){
+      this.headerList.forEach(item=>{
+        item.value = ''
+      })
+    }
+  }
 }
 </script>
+<style lang="scss" scoped>
+.illegal-search {
+  text-align: left;
+  margin: 10px 20px;
+  color: #4b9bb7;
 
-<style>
+  header {
+    background-color: #09152f;
+    border: 1pox solid #fff;
 
+    .headerContent {
+      padding: 20px 40px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      ::v-deep .el-form{
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .el-form-item{
+          width: 30%;
+        }
+        .el-form-item__label{
+          color: #4b9bb7;
+        }
+      }
+    }
+  }
+
+  main {
+    background-color: #09152f;
+    margin-top: 20px;
+    padding-bottom: 50px;
+    border: 1pox solid #fff;
+
+    .mainTitle {
+      line-height: 60px;
+    }
+    .main-btns{
+      display: flex;
+      justify-content: space-between;
+      line-height: 60px;
+      padding: 0 20px;
+      .el-button{
+        background-color: #17324c;
+        border: 1px solid #17324c;
+        color: #4b9bb7;
+      }
+    }
+    .tools {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+
+      .funs-sp {
+        border: 1px solid #17324c;
+      }
+
+      .funs {
+        display: flex;
+
+        .funsItem {
+          line-height: 28px;
+          display: flex;
+          align-items: center;
+          border-radius: 4px;
+          font-size: 12px;
+          margin-left: 10px;
+
+          .el-checkbox {
+            width: 80px;
+            padding: 0 10px;
+          }
+
+          .el-select {
+            width: 120px;
+          }
+
+          &::v-deep .el-input__inner {
+            border: none;
+            background-color: #09152f;
+          }
+
+          &:hover {
+            border: 1px solid #4b9bb7;
+          }
+
+          &:hover .el-checkbox {
+            color: #4b9bb7;
+          }
+        }
+
+      }
+
+      .pagination {
+        margin-top: 50px;
+        display: flex;
+        line-height: 50px;
+        justify-content: center;
+
+        .el-pagination {
+
+          &::v-deep li,
+          &::v-deep .btn-prev,
+          &::v-deep .btn-next {
+            background-color: #071f39;
+            color: #4b9bb7;
+          }
+
+          &::v-deep .active {
+            background-color: #409eff;
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .el-table {
+      color: #4b9bb7;
+      font-size: 10px;
+
+      .operation {
+        display: flex;
+
+        .line {
+          padding: 0 5px;
+        }
+
+        span:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file

--
Gitblit v1.8.0