Browse Source

新增门禁记录,设备箱弹窗滑动问题

develop
wangsixiang 1 month ago
parent
commit
9752ebf0a5
  1. 6
      ruoyi-ui/src/common/menuData.js
  2. 8
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceParams.vue
  3. 22
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParams.vue
  4. 22
      ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue
  5. 138
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/door/data.js
  6. 244
      ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/door/index.vue

6
ruoyi-ui/src/common/menuData.js

@ -224,6 +224,12 @@ export default [
path: "/maintain/solar",
component: "maintenanceOperations/solar/index.vue",
},
{
title: "电子门禁记录",
name: "door",
path: "/maintain/smart/door",
component: "maintenanceOperations/smart/door/index.vue",
},
],
},
{

8
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/IntegratedCabinet/components/DeviceParams.vue

@ -24,7 +24,9 @@
<span>{{ data.text }}</span>
</template>
</Descriptions>
<div class="tips">
<p>当水浸监测值小于侵水电压阈值值浸水异常,当烟雾报警值大于烟雾报警阈值时烟雾异常</p>
</div>
</div>
</template>
@ -220,5 +222,9 @@
.DeviceParams {
height: 100%;
}
.tips {
padding: 10px;
color: rgb(231, 237, 244); /* 文字颜色 */
}
</style>

22
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/RemoteMachine/components/DeviceParams.vue

@ -1,6 +1,7 @@
<template>
<div class='DeviceParams'>
<div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div>
<div class="scroll-container">
<Descriptions :list="devicesList" style="gap: 18px;" column="5">
<template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }">
<span>{{ data.text }}</span>
@ -12,6 +13,7 @@
</template>
</Descriptions>
</div>
</div>
</template>
<script>
@ -195,5 +197,25 @@ export default {
<style lang='scss' scoped>
.DeviceParams {
height: 100%;
display: flex;
flex-direction: column;
.scroll-container {
flex: 1;
overflow-y: auto; //
padding-right: 8px; //
/* 自定义滚动条样式(可选) */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
}
}
</style>

22
ruoyi-ui/src/views/JiHeExpressway/pages/Home/components/Dialogs/SmartDevice/components/DeviceParams.vue

@ -1,6 +1,7 @@
<template>
<div class='DeviceParams'>
<div class="no-data" v-if="!devicesList.length" v-loading="secondLoading">暂无设备参数</div>
<div class="scroll-container">
<Descriptions :list="devicesList" style="gap: 18px;" column="5">
<template v-for="item in devicesList.slice(0, -1)" #[`content-${getSlotKey(item.key)}`]="{ data }">
<span>{{ data.text }}</span>
@ -12,6 +13,7 @@
</template>
</Descriptions>
</div>
</div>
</template>
<script>
@ -195,5 +197,25 @@ export default {
<style lang='scss' scoped>
.DeviceParams {
height: 100%;
display: flex;
flex-direction: column;
.scroll-container {
flex: 1;
overflow-y: auto; //
padding-right: 8px; //
/* 自定义滚动条样式(可选) */
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
}
}
</style>

138
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/door/data.js

@ -0,0 +1,138 @@
// import * as PresetFormItems from "@screen/pages/control/event/event/FormEvent/PresetFormItems.js";
import * as PresetFormItems from "@screen/common/PresetFormItems.js";
// import { merge, cloneDeep } from "lodash";
import {directionOptions} from '@screen/utils/enum.js';
import {cloneDeep, merge} from "lodash";
const station = {
label: "桩号:",
key: "stakeMark",
required: true,
type: "MultipleLabelItem",
options: {
options: [
{
prefix: {
text: "K",
style: {
color: "#3DE8FF",
},
},
key: "stakeMark[0]",
rules: [
{
message: "请补全桩号",
callback(value, data) {
if (value || data.stakeMark[1]){
return /^0\d{2}|\d{3}$/.test(value);
} else {
return true
}
},
}
],
},
{
prefix: {
text: "+",
style: {
color: "#3DE8FF",
},
},
key: "stakeMark[1]",
rules: [
{
message: "请补全桩号",
callback(value, data) {
if (value || data.stakeMark[0]){
return /^0\d{2}|\d{3}$/.test(value);
} else {
return true
}
},
}
],
},
],
},
};
export const searchFormList = [
{
label: "设备名称:",
key: "deviceName",
type: "input", // 假设这是一个普通的文本输入框
required: false, // 根据需要设置是否必填
clearable: true, // 如果需要清除输入的功能,可以设置这个属性(取决于您的UI库是否支持)
},
{
label: "发生时间:",
key: "createTime",
required: false,
type: "datePicker",
options: {
type: "daterange",
format: "yyyy-MM-dd HH:mm:ss",
valueFormat: "yyyy-MM-dd HH:mm:ss",
},
},
{
label: "设备类型:",
key: "deviceType",
type: "select",
clearable: true,
options: {
options: [
{ key: 13, label: "智能设备箱" },
// { key: 16, label: "远端机" },
{ key: 17, label: "一体机柜" },
],
},
},
{
...station,
label: "开始桩号:",
required: false,
},
merge(cloneDeep(station), {
options: {
options: [
{
key: "endStakeMark[0]",
rules: [
{
message: "请补全桩号",
callback(value, data) {
if (value || data.endStakeMark[1]){
return /^0\d{2}|\d{3}$/.test(value);
} else {
return true
}
},
}
],
},
{
key: "endStakeMark[1]",
rules: [
{
message: "请补全桩号",
callback(value, data) {
if (value || data.endStakeMark[0]){
return /^0\d{2}|\d{3}$/.test(value);
} else {
return true
}
},
}
],
},
],
},
label: "结束桩号:",
required: false,
}),
];

244
ruoyi-ui/src/views/JiHeExpressway/pages/maintenanceOperations/smart/door/index.vue

@ -0,0 +1,244 @@
<template>
<div class="board_record">
<!-- 搜索栏 -->
<div class="filter">
<div>
<ButtonGradient @click="onRefreshForm" class="refresh-btn">
<template #prefix>
<img src="@screen/images/refresh.svg" />
</template>
刷新
</ButtonGradient>
</div>
<InputSearch
ref="searchComp"
style="width: 400px"
:formList="searchFormList"
:formConfigOptions="{ dFormData: { eventState: '0' } }"
@handleSearch="handleSearch"
/>
</div>
<!-- 内容 -->
<div class="body">
<Table :data="tableData" height="75vh">
<el-table-column
label="序号"
type="index"
:index="indexMethod"
width="100"
align="center"
header-align="center"
/>
<ElTableColumn
label="设备名称"
show-overflow-tooltip
prop="deviceName"
header-align="center"
/>
<ElTableColumn label="设备类型" prop="deviceTypeName" />
<!-- <ElTableColumn label="方向" prop="directionName" /> -->
<ElTableColumn label="桩号" prop="stakeMark" />
<ElTableColumn label="时间" prop="warningTime" />
<ElTableColumn label="操作" width="300" prop="operate" />
</Table>
</div>
<!-- 分页 -->
<div class="footer">
<Pagination
@current-change="initData"
@size-change="onSizeChange"
width="'100%'"
:page-sizes="[10, 20, 30, 40, 50]"
:page-size="searchData.pageSize"
:current-page.sync="searchData.pageNum"
layout="total, sizes, prev, pager, next"
:total="total"
>
</Pagination>
</div>
</div>
</template>
<script>
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
import Pagination from '@screen/components/Pagination.vue';
import Table from '@screen/components/Table.vue';
import request from '@/utils/request'
import BoardRecordPreview from '@screen/components/infoBoard/BoardRecordPreview.vue'
import InputSearch from "@screen/components/InputSearch/index.vue";
import { searchFormList } from "./data";
import { Message } from "element-ui";
import Button from "@screen/components/Buttons/Button.vue";
import Form from "@screen/components/FormConfig";
import {deviceTypeOptions} from '@screen/utils/enum.js';
import DialogWarning from '@screen/components/HeaderMenu/dialogWarn/DialogWarning.vue'
export default {
name: 'boardRecord',
components: {
ButtonGradient,
Pagination,
Table,
Button,
Form,
DialogWarning,
BoardRecordPreview,
InputSearch
},
data() {
return {
isDiagnosing: false,
WarningType:{
1: '交通流预警',
2: '气象预警'
},
tableData: [],
searchFormList,
total: 20,
searchData: {
pageSize: 20,
pageNum: 1
},
dialogWarningVisible: false,
deviceTypeCount:"",
}
},
created() {
this.initData();
},
mounted(){
},
methods: {
onRefreshForm(){
this.searchData.pageNum = 1;
this.$refs.searchComp.handleResetForm();
},
handleSearch(data) {
let startTime = null;
let endTime = null;
if(data.warningTime && data.warningTime.length ===2){
startTime = data.warningTime[0]+' 00:00:00'
endTime = data.warningTime[1]+' 23:59:59'
}
let dStakeMark = data.stakeMark;
let time = data.createTime;
let dendStakeMark = data.endStakeMark;
let stakeMark = dStakeMark[0] ? `K${dStakeMark[0].padStart(3,'0')}+${dStakeMark[1].padStart(3,'0')}` : '';
let endStakeMark = '';
if (dendStakeMark) {
endStakeMark = dendStakeMark[0] ? `K${dendStakeMark[0].padStart(3,'0')}+${dendStakeMark[1].padStart(3,'0')}` : '';
}
this.searchData = {
...this.searchData,
status: (data.status===undefined||data.status===''?null:data.status),
startTime: (time===null||time===''?null: time[0]),
endTime: (time===null||time===''?null: time[1]),
deviceType: (data.deviceType===undefined||data.deviceType===''?null:data.deviceType),
deviceName: (data.deviceName===undefined||data.deviceName===''?null:data.deviceName),
stakeMark: stakeMark,
endStakeMark: endStakeMark,
};
this.initData();
},
indexMethod(index) {
return this.searchData.pageSize*(this.searchData.pageNum-1) + index + 1;
},
initData() {
request({
url: `/business/device/dcDoorList`,
method: "get",
params: this.searchData,
}).then((result) => {
if (result.code != 200) return Message.error(result?.msg);
console.log(result)
result.rows.forEach(e=>{
e.deviceTypeName = _.find(deviceTypeOptions,{value:parseInt(e.deviceType)}).label
e.directionName = e.direction === 1 ? '菏泽方向' :
(e.direction === 3 ? '济南方向' : '双向');
e.warningTime = moment(e.createTime).format('YYYY-MM-DD HH:mm:ss')
e.stateName = (e.status==='0'?'未处理':(e.status==='1'?'已处理':'自动处理'))
})
this.tableData = result.rows;
this.total = result.total;
});
},
onSizeChange(pageSize) {
this.tableData = [];
this.searchData.pageSize = pageSize;
this.searchData.pageNum = 1;
this.initData();
}
}
}
</script>
<style lang='scss' scoped>
.board_record {
padding: 0 14px 14px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.filter {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
> div {
display: flex;
gap: 6px;
}
}
.body {
flex: 1;
height: 0;
min-height: 0;
}
.footer {
margin-top: 15px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.board_shower {
margin: 4px;
}
::v-deep .el-carousel__indicators--horizontal {
line-height: 0;
height: 16px;
.el-carousel__indicator--horizontal {
padding: 7px 4px;
}
}
::v-deep .el-table__cell div.cell {
padding: 0 10px !important;
}
}
.upload-file {
width: 100%;
margin: 20px 0px;
background-color: #104c66 !important;
border: 1px solid #359cbc !important;
border-radius: 5px;
text-align: center;
padding: 5px 0px;
font-size: 14px;
cursor: pointer;
}
</style>
Loading…
Cancel
Save