From b76fd2fa93c2036d66e5142654cf66cf1e371531 Mon Sep 17 00:00:00 2001 From: 龚焕茏 <2842157468@qq.com> Date: 星期二, 30 四月 2024 17:12:34 +0800 Subject: [PATCH] 改为连表查询 --- src/views/system/data-manage/index.vue | 236 ++++++++++++++++++++++++++++++++++++++++++++--------------- 1 files changed, 176 insertions(+), 60 deletions(-) diff --git a/src/views/system/data-manage/index.vue b/src/views/system/data-manage/index.vue index 43b150b..c4268bc 100644 --- a/src/views/system/data-manage/index.vue +++ b/src/views/system/data-manage/index.vue @@ -1,80 +1,196 @@ <template> <div> <div class="container"> - <el-row type="flex" justify="center"> - <el-col :span="24"> - <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">浜鸿劯鏁版嵁寮傚父妫�娴�</h3> - </el-col> - </el-row> + <el-row type="flex" justify="center"> + <el-col :span="24"> + <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">瑙嗛杩愯鐩戞帶</h3> + </el-col> + </el-row> - <el-row type="flex" justify="center"> - <el-col :span="6" v-for="(item, index) in faceData" :key="index"> - <el-link @click="handleDetail(item)"> - <el-card style="width:150px;height: 150px;text-align: center;"> - <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i> - <div>{{ item.name }}</div> - </el-card> - </el-link> - </el-col> - </el-row> + <el-row type="flex" justify="center"> + <el-col :span="6" v-for="(item, index) in videoData" :key="index"> + <el-link @click="handleDetail(item)"> + <el-card style="width:150px;height: 150px;text-align: center;"> + <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i> + <div>{{ item.name }}</div> + </el-card> + </el-link> + </el-col> + </el-row> + <br/> + <el-row type="flex" justify="center"> + <el-col :span="6" v-for="(item, index) in videoData2" :key="index"> + <el-link @click="handleDetail(item)" :style="item.name == '' ? 'display:none' : ''"> + <el-card style="width:150px;height: 150px;text-align: center;"> + <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i> + <div>{{ item.name }}</div> + </el-card> + </el-link> + </el-col> + </el-row> </div> - <div class="container"> - <el-row type="flex" justify="center"> - <el-col :span="24"> - <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">杞︿咯鏁版嵁寮傚父妫�娴�</h3> - </el-col> - </el-row> + <div class="container"> + <el-row type="flex" justify="center"> + <el-col :span="24"> + <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">杞﹁締杩愯鐩戞帶</h3> + </el-col> + </el-row> - <el-row type="flex" > - <el-col :span="6" v-for="(item, index) in carData" :key="index"> - <el-link @click="handleDetail(item)"> - <el-card style="width:150px;height: 150px;text-align: center;"> - <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i> - <div>{{ item.name }}</div> - </el-card> - </el-link> - </el-col> - </el-row> - </div> + <el-row type="flex"> + <el-col :span="6" v-for="(item, index) in carData" :key="index"> + <el-link @click="handleDetail(item)"> + <el-card style="width:150px;height: 150px;text-align: center;"> + <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i> + <div>{{ item.name }}</div> + </el-card> + </el-link> + </el-col> + </el-row> + <br/> + <el-row type="flex" justify="center"> + <el-col :span="6" v-for="(item, index) in carData2" :key="index"> + <el-link @click="handleDetail(item)" :style="item.name == '' ? 'display:none' : ''"> + <el-card style="width:150px;height: 150px;text-align: center;"> + <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i> + <div>{{ item.name }}</div> + </el-card> + </el-link> + </el-col> + </el-row> + </div> + + <div class="container"> + <el-row type="flex" justify="center"> + <el-col :span="24"> + <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">浜鸿劯杩愯鐩戞帶</h3> + </el-col> + </el-row> + + <el-row type="flex" justify="center"> + <el-col :span="6" v-for="(item, index) in faceData" :key="index"> + <el-link @click="handleDetail(item)"> + <el-card style="width:150px;height: 150px;text-align: center;"> + <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i> + <div>{{ item.name }}</div> + </el-card> + </el-link> + </el-col> + </el-row> + <br/> + <el-row type="flex" justify="center"> + <el-col :span="6" v-for="(item, index) in faceData2" :key="index"> + <el-link @click="handleDetail(item)" :style="item.name == '' ? 'display:none' : ''"> + <el-card style="width:150px;height: 150px;text-align: center;"> + <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i> + <div>{{ item.name }}</div> + </el-card> + </el-link> + </el-col> + </el-row> + </div> + + <div class="container"> + <el-row type="flex" justify="center"> + <el-col :span="24"> + <h3 style="color: rgb(104,104,103);padding-top: 20px;padding-bottom: 20px;">璧勪骇绠$悊</h3> + </el-col> + </el-row> + + <el-row type="flex" justify="center"> + <el-col :span="6" v-for="(item, index) in equipment" :key="index"> + <el-link @click="handleDetail(item)" :style="item.name == '' ? 'display:none' : ''"> + <el-card style="width:150px;height: 150px;text-align: center;"> + <i style="font-size: 40px;padding: 15px;" :class="item.icon"></i> + <div>{{ item.name }}</div> + </el-card> + </el-link> + </el-col> + </el-row> + <br/> + </div> + <br/><br/><br/><br/> </div> </template> <script> export default { - data() { - return { - faceData: [ - { name: '浜鸿劯璇嗗埆鏃堕挓鍑嗙‘鎬�', icon: 'el-icon-alarm-clock', description: '鎻忚堪淇℃伅', routerUrl: '/face/index' }, - { name: '浜鸿劯鎶撴媿鏁版嵁鐩戞祴', icon: 'el-icon-user', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' }, - { name: '浜鸿劯鏁版嵁瓒嬪娍鍒嗘瀽', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' }, - { name: '浜鸿劯鎶撴媿璁惧娲昏穬鎬�', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' }, - { name: '浜鸿劯鎶撴媿涓婁紶鍙婃椂鎬�', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' }, - { name: '浜鸿劯鎶撴媿澶у浘鍙敤鎬�', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', routerUrl: '/face/faceClock' }, - ], - carData: [ - { name: '鍗″彛杩囪溅鏁版嵁涓�鑷存��', icon: 'el-icon-alarm-clock', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, - - ] - } - }, - methods: { - handleDetail(item) { - this.$router.push({ - path: item.routerUrl, - params: { - id: item.id - } - }) - } + data() { + return { + videoData: [ + { name: '骞冲彴鍦ㄧ嚎', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '涓�鏈轰竴妗�', icon: 'el-icon-folder', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '鐐逛綅鍦ㄧ嚎', icon: 'el-icon-search', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '褰曞儚鍙敤', icon: 'el-icon-turn-off', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '瑙嗛鏍囨敞', icon: 'el-icon-place', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '閲嶇偣鎸囨尌鍥惧儚鍦ㄧ嚎鐜�', icon: 'el-icon-film', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + ], + videoData2: [ + { name: '瑙嗛鍥惧儚璧勬簮瀹夊叏绠$悊', icon: 'el-icon-house', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '瑙嗛鍥惧儚璐ㄩ噺', icon: 'el-icon-set-up', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-connection', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' } + ], + carData: [ + { name: '瑙嗗浘搴撳鎺ョǔ瀹氭��', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '鐐逛綅鍦ㄧ嚎鐜�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '鑱旂綉鍗″彛璁惧鐩綍涓�鑷寸巼', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '杞﹁締鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁瀹屾暣鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁鍑嗙‘鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' } + ], + carData2: [ + { name: '杞﹁締鍗″彛璁惧鏃堕挓鍑嗙‘鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁涓婁紶鍙婃椂鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '杞﹁締鍗″彛璁惧url鍙敤鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '杞﹁締鍗″彛璁惧鎶撴媿鏁版嵁澶у浘鍙敤鎬�', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-truck', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' } + ], + faceData: [ + { name: '瑙嗗浘搴撳鎺ョǔ瀹氭��', icon: 'el-icon-alarm-clock', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '鐐逛綅鍦ㄧ嚎鐜�', icon: 'el-icon-user', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '鐩綍涓�鑷寸巼', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '浜鸿劯鍗″彛淇℃伅閲囬泦鍑嗙‘鐜�', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '璁惧鎶撴媿鍥剧墖鍚堟牸鎬�', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '璁惧鎶撴媿鍥剧墖鏃堕挓鍑嗙‘鎬�', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + ], + faceData2: [ + { name: '鎶撴媿浜鸿劯鏁版嵁涓婁紶鍙婃椂鎬�', icon: 'el-icon-thumb', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '浜鸿劯鍗″彛璁惧鎶撴媿鏁版嵁澶у浘鍙敤鎬�', icon: 'el-icon-pie-chart', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + ], + equipment: [ + { name: '璧勪骇绠$悊', icon: 'el-icon-wallet', description: '鎻忚堪淇℃伅', routerUrl: '/car/equipment/index' }, + { name: '', icon: 'el-icon-pie-chart', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-data-line', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-timer', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-money', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + { name: '', icon: 'el-icon-data-analysis', description: '鎻忚堪淇℃伅', routerUrl: '/car/vehicle-data-monitor/index' }, + ] } + }, + methods: { + handleDetail(item) { + this.$router.push({ + path: item.routerUrl, + params: { + id: item.id + } + }) + } + } } </script> <style scoped> .container { - margin-left: 100px; - margin-right: 100px; - margin-top: 10px; + width: 90%; + margin: 10px auto; } </style> -- Gitblit v1.8.0