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