From 5672f352d0ba114e2ae96c8cefad6c74ae6d2934 Mon Sep 17 00:00:00 2001
From: unknown <280848880@qq.com>
Date: 星期一, 23 十月 2023 10:38:28 +0800
Subject: [PATCH] 苏州-web:智能安全帽提交
---
web/src/views/SecureManage/SmartHelmet/PhoneManage.vue | 253 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 250 insertions(+), 3 deletions(-)
diff --git a/web/src/views/SecureManage/SmartHelmet/PhoneManage.vue b/web/src/views/SecureManage/SmartHelmet/PhoneManage.vue
index f377ec1..300e799 100644
--- a/web/src/views/SecureManage/SmartHelmet/PhoneManage.vue
+++ b/web/src/views/SecureManage/SmartHelmet/PhoneManage.vue
@@ -1,3 +1,250 @@
-<template>
- <div>照片管理</div>
-</template>
\ No newline at end of file
+<template>
+ <!-- 安全管理 ==> 智能安全帽 => 照片管理 -->
+ <div class="main">
+ <!-- main_left -->
+ <div class="main_left">
+ <div class="main_left_search">
+ <div class="search_item">
+ <span>姓名:</span>
+ <el-input size="mini" v-model="queryInfo.userName" placeholder="请输入姓名" clearable></el-input>
+ </div>
+ <div class="search_item">
+ <span>设备编号:</span>
+ <el-input size="mini" v-model="queryInfo.deviceNum" placeholder="请输入设备编号" clearable></el-input>
+ <el-button icon="el-icon-search" @click="queryTable">查询</el-button>
+ </div>
+ </div>
+ <div class="main_left_table">
+ <cpnTable :table-loading="loading" :table-data="dataList" :table-columns="tableColumns"
+ :row-click="rowClick">
+ </cpnTable>
+ </div>
+ </div>
+ <!-- main_right -->
+ <div class="main_right">
+ <div class="search_item">
+ <span>日期:</span>
+ <el-date-picker type="daterange" v-model="pics.date" value-format="yyyy-MM-dd" start-placeholder="开始日期"
+ end-placeholder="结束日期" clearable></el-date-picker>
+ <!-- <el-select v-model="pics.type">
+ <el-option :value="1">所有照片</el-option>
+ <el-option :value="2">安全带取证</el-option>
+ </el-select> -->
+ <el-button icon="el-icon-search" @click="queryPic">查询</el-button>
+ </div>
+ <div class="pic_wrap">
+ <div class="pic_item" v-for="item in pics.data" :key="item.iid">
+ <el-image :src="item.imageUrl" :preview-src-list="[item.imageUrl]" lazy></el-image>
+ <div class="pic_item_info">
+ <div class="pic_item_info_time">{{ item.smTime }}</div>
+ <div class="pic_item_info_des"></div>
+ <div class="pic_item_info_btn">
+ </div>
+ </div>
+ </div>
+ <div class="nopic" v-if="!pics.data.length">暂无图片</div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import cpnTable from '@/components/element/Table'
+export default {
+ data() {
+ return {
+ loading: false,
+ queryInfo: {
+ pageNum: 1,
+ pageSize: 9999,
+ userName: '',
+ deviceNum: '',
+ },
+ dataList: [],
+ tableColumns: [],
+ userId: '', // 用户id
+ pics: {
+ date: [],
+ type: '',
+ data: [],
+ },
+ $http: '', // 接口api路径
+ }
+ },
+ components: {
+ cpnTable
+ },
+ created() {
+ this.$http = this.$api.Safety.SmartHelmet.pic
+ this.setTableColumn()
+ this.getLists()
+ },
+ methods: {
+ setTableColumn() {
+ this.tableColumns = [
+ {selection: true},
+ {name: "用户ID", key: "userId"},
+ {name: "姓名", key: "userName"},
+ {name: "设备编号", key: "deviceNum"},
+ ]
+ },
+ getLists() {
+ this.loading = true
+ this.$api.Safety.SmartHelmet.getLists(this.queryInfo).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.dataList = res.data.list
+ }
+ }).finally(() => this.loading = false)
+ },
+ getPics() {
+ const params = {
+ userId: this.userId,
+ pageNum: 1,
+ pageSize: 9999,
+ strTime: this.pics.date?.[0],
+ endTime: this.pics.date?.[1],
+ }
+ this.$http.getPics(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.pics.data = res.data.list
+ }
+ })
+ },
+ rowClick(row) {
+ this.userId = row.userId
+ this.getPics()
+ },
+ queryTable() {
+ this.getLists()
+ },
+ queryPic() {
+ this.getPics()
+ },
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/style/layout-main.scss';
+
+.main {
+ display: flex;
+ flex-direction: row;
+ color: #EBEBEB;
+
+ .main_left {
+ display: flex;
+ flex-direction: column;
+ width: 380px;
+ padding: 14px;
+ margin-right: 18px;
+ border: 1px solid #39B5FE;
+ border-radius: 10px;
+ box-shadow: rgba(0, 145, 255, 0.7) 0 0 18px inset;
+ box-sizing: content-box;
+
+ .search_item {
+ span {
+ display: inline-block;
+ min-width: 54px;
+ margin-right: 6px;
+ text-align: right;
+ }
+
+ .el-input {
+ width: 220px;
+ margin: 0 28px 16px 0;
+ }
+ }
+
+ ::v-deep.main_left_table {
+ overflow: hidden;
+
+ .el-table__row {
+ cursor: pointer
+ }
+
+ .el-table {
+ display: flex;
+ flex-direction: column;
+
+ .el-table__body-wrapper {
+ overflow-y: auto;
+ flex: 1;
+ }
+ }
+ }
+ }
+
+ .main_right {
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 20px;
+ border: 1px solid #39B5FE;
+ background-color: rgba(0, 52, 121, 0.3);
+ border-radius: 10px;
+ box-shadow: rgba(0, 145, 255, 0.7) 0 0 18px inset;
+ box-sizing: content-box;
+
+ .search_item {
+
+ .el-button,
+ .el-input,
+ .el-select {
+ margin: 0 12px 14px 6px;
+ }
+ }
+
+ .pic_wrap {
+ flex: 1;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ overflow-y: auto;
+
+ .nopic {
+ width: 100%;
+ text-align: center;
+ font-size: 28px;
+ }
+
+ .pic_item {
+ display: flex;
+ flex-direction: column;
+ width: 380px;
+ height: 300px;
+ border: 1px solid green;
+ margin: 10px;
+
+ .el-image {
+ border: 1px solid #4EA7DD;
+ }
+
+ .pic_item_info {
+ position: relative;
+ flex: 1;
+ margin-top: 3px;
+ border: 1px solid #3DC8FF;
+ background: rgba(21, 66, 107, .6);
+
+ .pic_item_info_time {
+ position: absolute;
+ top: 40%;
+ font-size: 13px;
+ text-indent: 20px;
+ }
+
+ .pic_item_info_btn {
+ position: absolute;
+ top: 34px;
+ right: 20px;
+ }
+ }
+ }
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3