From 5a1874080ae2a058db35a05778a5aa4d3cf3f541 Mon Sep 17 00:00:00 2001
From: “dzb” <2632970487@qq.com>
Date: 星期四, 03 十一月 2022 11:42:16 +0800
Subject: [PATCH] 页面导航框架搭建
---
src/views/intelligentPatrol/illegalSearch/viewInfo/index.vue | 14 +
src/views/layout/components/Main/index.vue | 109 +++++++++++--
src/views/intelligentPatrol/illegalSearch/index.vue | 321 +++++++++++++++++++++++++++++++++++++++
3 files changed, 424 insertions(+), 20 deletions(-)
diff --git a/src/views/intelligentPatrol/illegalSearch/index.vue b/src/views/intelligentPatrol/illegalSearch/index.vue
index 3bcc678..80129ec 100644
--- a/src/views/intelligentPatrol/illegalSearch/index.vue
+++ b/src/views/intelligentPatrol/illegalSearch/index.vue
@@ -1,15 +1,332 @@
<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 @click="handleView(scope.row)">鏌ョ湅</span>
+ </div>
+ </template>
+ </el-table-column>
+ </el-table>
+ </div>
+ </main>
+ <footer>
+ <!-- 鏌ョ湅鍏蜂綋淇℃伅 -->
+ <el-dialog title="鎻愮ず" :visible.sync="dialogView" width="30%" :before-close="handleClose">
+ <ViewInfo :info="info"></ViewInfo>
+ </el-dialog>
+ </footer>
</div>
</template>
<script>
+import helper from "@/utils/mydate.js"
+import ViewInfo from './viewInfo'
export default {
+ components: {
+ ViewInfo
+ },
+ 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,
+ info: '',
+ 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: {
+ }
+ }
+ },
+ 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 = ''
+ })
+ },
+ // 鍏抽棴寮圭獥
+ handleClose(done) {
+ done();
+ },
+ // 鎵撳紑寮圭獥
+ handleView(data) {
+ console.log(data)
+ }
+ }
}
</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;
+ }}}}}}
</style>
\ No newline at end of file
diff --git a/src/views/intelligentPatrol/illegalSearch/viewInfo/index.vue b/src/views/intelligentPatrol/illegalSearch/viewInfo/index.vue
new file mode 100644
index 0000000..919c332
--- /dev/null
+++ b/src/views/intelligentPatrol/illegalSearch/viewInfo/index.vue
@@ -0,0 +1,14 @@
+<template>
+ <div class="view-info"></div>
+</template>
+<script>
+export default{
+ data(){
+ return{
+
+ }
+ }
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/layout/components/Main/index.vue b/src/views/layout/components/Main/index.vue
index 666f922..0436431 100644
--- a/src/views/layout/components/Main/index.vue
+++ b/src/views/layout/components/Main/index.vue
@@ -4,22 +4,12 @@
<div class="content">
<!-- 椤甸潰瀵艰埅鍖哄煙 -->
<div class="page-nav" v-if="navFlag">
- <div>
- <h1>绯荤粺璁剧疆</h1>
- <div>
- <span >鍩烘湰璁剧疆</span>
- <span >闂ㄦ埛璁剧疆</span>
- </div>
- <div>
- <span >璁惧绠＄悊</span>
- <span>鎺ュ叆绠＄悊</span>
- </div>
-
-
+ <div class="nav-item" v-for="item in navList" :key="item.id">
+ <div class="nav-title">{{item.title}}</div>
+ <div class="nav-child" v-if="item.children && item.children.length!==0">
+ <el-link :underline="false" class="child-item" v-for="child in item.children" @click="handleJump(child.link)" :key="child.id">{{child.label}}</el-link>
+ </div>
</div>
- <div>杩愯惀绠＄悊</div>
- <div>瑙嗛宸℃煡</div>
- <div>鏅鸿兘宸℃煡</div>
</div>
<router-view v-else></router-view>
<!-- 搴曢儴鍖哄煙 -->
@@ -39,12 +29,56 @@
},
data() {
return {
- navFlag:true
+ navFlag: true,
+ navList:[
+ {
+ id:1,
+ title:'绯荤粺璁剧疆',
+ children:[
+ {
+ id:2,
+ label:'閮ㄩ棬绠＄悊',
+ link:'',
+ },
+ {
+ id:3,
+ label:'璐︽埛绠＄悊',
+ link:'',
+ },
+ {
+ id:4,
+ label:'瑙掕壊绠＄悊',
+ link:'',
+ },
+ {
+ id:5,
+ label:'鏉冮檺绠＄悊',
+ link:'',
+ },
+ {
+ id:6,
+ label:'鏃ュ織绠＄悊',
+ link:'',
+ },
+ ]
+ },
+ {
+ id:7,
+ title:'杩愯惀绠＄悊'
+ }
+ ]
}
},
- watch:{
- '$route.path'(newPath,oldPath){
+ watch: {
+ '$route.path'(newPath, oldPath) {
newPath === '/home' ? this.navFlag = true : this.navFlag = false
+ }
+ },
+ methods:{
+ handleJump(url){
+ console.log(url)
+ // 璺敱璺宠浆
+ // this.$router.push({path:url})
}
}
};
@@ -53,9 +87,48 @@
.el-main {
min-width: 1024px;
padding: 0;
+
.content {
padding: 11px;
height: 100%;
+ .page-nav{
+ padding: 40px 100px;
+ text-align: left;
+ .nav-item{
+ line-height: 60px;
+ .nav-title{
+ color: #4b9bb7;
+ }
+ .nav-child{
+ display: flex;
+ // justify-content: space-between;
+ flex-wrap: wrap;
+ .el-link{
+ justify-content: flex-start;
+ padding-left: 30px;
+ }
+ .child-item{
+ width: 24%;
+ text-align: left;
+ margin-bottom: 22px;
+ margin-right: 1%;
+ border: 1px solid #17324c;
+ color: #4b9bb7;
+ position: relative;
+ &::after{
+ content: '';
+ display: block;
+ position: absolute;
+ left: 15px;
+ height: 8px;
+ width: 8px;
+ border-radius: 50%;
+ background-color: #4b9bb7;
+ }
+ }
+ }
+ }
+ }
}
}
</style>
--
Gitblit v1.8.0