LED屏配置管理开发

dev_xd
lj7788 2026-01-06 15:49:31 +08:00
parent d9b6afdc80
commit 62995a851d
4 changed files with 159 additions and 155 deletions

View File

@ -26,7 +26,6 @@ public class SysLedscreen extends BaseEntity
private Long projectId;
/** 分区ID */
@Excel(name = "分区ID")
private Long workareaId;
/** 设备名称 */
@ -46,6 +45,15 @@ public class SysLedscreen extends BaseEntity
private Long height;
private String workAreaAncestors;
public String getWorkAreaAncestors() {
return workAreaAncestors;
}
public void setWorkAreaAncestors(String workAreaAncestors) {
this.workAreaAncestors = workAreaAncestors;
}
/** LED绘图模式 */
@Excel(name = "LED绘图模式")

View File

@ -40,16 +40,17 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
<if test="projectId != null "> and sl.project_id = #{projectId}</if>
<if test="workareaId != null "> and sl.workarea_id = #{workareaId}</if>
<if test="deviceName != null and deviceName != ''"> and sl.device_name like concat('%', #{deviceName}, '%')</if>
<if test="deviceSn != null and deviceSn != ''"> and sl.device_sn = #{deviceSn}</if>
<if test="workAreaAncestors != null "> and (sl.work_area_id = #{workAreaAncestors} or FIND_IN_SET(#{workAreaAncestors}, wa.ancestors) > 0)</if>
<if test="deviceSn != null and deviceSn != ''"> and sl.device_sn like concat('%',#{deviceSn},'%') </if>
<if test="width != null "> and sl.width = #{width}</if>
<if test="height != null "> and sl.height = #{height}</if>
<if test="drawType != null "> and sl.draw_type = #{drawType}</if>
<if test="title != null and title != ''"> and sl.title = #{title}</if>
<if test="title != null and title != ''"> and sl.title like concat('%',#{title},'%')</if>
<if test="enabled != null "> and sl.enabled = #{enabled}</if>
<if test="isDel != null "> and sl.is_del = #{isDel}</if>
<if test="state != null "> and sl.state = #{state}</if>
</where>
</select>
<if test="deviceSn != null and deviceSn != ''"> and sl.device_sn like concat('%', #{deviceSn}, '%') <if test="deviceSn != null and deviceSn != ''"> and sl.device_sn like concat('%', #{deviceSn}, '%') <if test="deviceSn != null and deviceSn != ''"> and sl.device_sn like concat('%', #{deviceSn}, '%')</if></if></if></select>
<select id="selectSysLedscreenById" parameterType="Long" resultMap="SysLedscreenResult">
<include refid="selectSysLedscreenVo"/>

View File

@ -1,86 +1,28 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="项目ID" prop="projectId">
<el-input
v-model="queryParams.projectId"
placeholder="请输入项目ID"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="分区ID" prop="workareaId">
<el-input
v-model="queryParams.workareaId"
placeholder="请输入分区ID"
clearable
@keyup.enter="handleQuery"
/>
<el-form-item label="所属工区" prop="workAreaAncestors">
<el-tree-select v-model="queryParams.workAreaAncestors" :data="data.workAreaOptions"
:props="{ value: 'id', label: 'title', children: 'children' }" value-key="id" placeholder="请选择工区" clearable
style="width: 240px" check-strictly />
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input
v-model="queryParams.deviceName"
placeholder="请输入设备名称"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="设备序列号" prop="deviceSn">
<el-input
v-model="queryParams.deviceSn"
placeholder="请输入设备序列号"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="宽" prop="width">
<el-input
v-model="queryParams.width"
placeholder="请输入宽"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="高" prop="height">
<el-input
v-model="queryParams.height"
placeholder="请输入高"
clearable
@keyup.enter="handleQuery"
/>
<el-form-item label="序列号" prop="deviceSn">
<el-input v-model="queryParams.deviceSn" placeholder="请输入设备序列号" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="标题" prop="title">
<el-input
v-model="queryParams.title"
placeholder="请输入标题"
clearable
@keyup.enter="handleQuery"
/>
<el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter="handleQuery" />
</el-form-item>
<el-form-item label="启停1-启用 0-停用" prop="enabled">
<el-input
v-model="queryParams.enabled"
placeholder="请输入启停1-启用 0-停用"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="${comment}" prop="isDel">
<el-input
v-model="queryParams.isDel"
placeholder="请输入${comment}"
clearable
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item label="${comment}" prop="state">
<el-input
v-model="queryParams.state"
placeholder="请输入${comment}"
clearable
@keyup.enter="handleQuery"
/>
<el-form-item label="状态" prop="enabled">
<el-select v-model="queryParams.enabled" placeholder="请选择状态" clearable>
<el-option label="启用" value="1"></el-option>
<el-option label="停用" value="0"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery"></el-button>
<el-button icon="Refresh" @click="resetQuery"></el-button>
@ -89,85 +31,71 @@
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Plus"
@click="handleAdd"
v-hasPermi="['system:ledscreen:add']"
>新增</el-button>
<el-button type="primary" plain icon="Plus" @click="handleAdd"
v-hasPermi="['system:ledscreen:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="Edit"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['system:ledscreen:edit']"
>修改</el-button>
<el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
v-hasPermi="['system:ledscreen:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="Delete"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['system:ledscreen:remove']"
>删除</el-button>
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
v-hasPermi="['system:ledscreen:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="warning"
plain
icon="Download"
@click="handleExport"
v-hasPermi="['system:ledscreen:export']"
>导出</el-button>
<el-col :span="1.5" v-if="1 == 2">
<el-button type="warning" plain icon="Download" @click="handleExport"
v-hasPermi="['system:ledscreen:export']">导出</el-button>
</el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="ledscreenList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="${comment}" align="center" prop="id" />
<el-table-column label="项目ID" align="center" prop="projectId" />
<el-table-column label="分区ID" align="center" prop="workareaId" />
<el-table-column label="工区" align="center" prop="workareaName" />
<el-table-column label="设备名称" align="center" prop="deviceName" />
<el-table-column label="设备序列号" align="center" prop="deviceSn" />
<el-table-column label="宽" align="center" prop="width" />
<el-table-column label="高" align="center" prop="height" />
<el-table-column label="LED绘图模式" align="center" prop="drawType" />
<el-table-column label="设备序列号" align="center" prop="deviceSn" width="200px" />
<el-table-column label="尺寸" align="center" prop="width">
<template #default="scope">
{{ scope.row.width }} x {{ scope.row.height }}
</template>
</el-table-column>
<el-table-column label="LED绘图模式" align="center" prop="drawType">
<template #default="scope">
<el-tag>
{{(led_draw_type.find(item => item.value == scope.row.drawType) || {}).label || scope.row.drawType}}
</el-tag>
</template>
</el-table-column>
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="启停1-启用 0-停用" align="center" prop="enabled" />
<el-table-column label="${comment}" align="center" prop="isDel" />
<el-table-column label="${comment}" align="center" prop="state" />
<el-table-column label="${comment}" align="center" prop="remark" />
<el-table-column label="启停状态" align="center" prop="enabled">
<template #default="scope">
<el-tag :type="scope.row.enabled == 1 ? 'success' : 'danger'">
{{ scope.row.enabled == 1 ? "启用" : "停用" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:ledscreen:edit']"></el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:ledscreen:remove']"></el-button>
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
v-hasPermi="['system:ledscreen:edit']">修改</el-button>
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
v-hasPermi="['system:ledscreen:remove']">删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" @pagination="getList" />
<!-- 添加或修改LED屏配置对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="ledscreenRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="项目ID" prop="projectId">
<el-input v-model="form.projectId" placeholder="请输入项目ID" />
</el-form-item>
<el-form-item label="分区ID" prop="workareaId">
<el-input v-model="form.workareaId" placeholder="请输入分区ID" />
<el-dialog :title="title" v-model="open" width="500px" append-to-body :close-on-click-modal="false"
:close-on-press-escape="false" class="dlg-hide-form-hidden-scroll">
<el-form ref="ledscreenRef" :model="form" :rules="rules" label-width="120px">
<el-form-item label="所属工区" prop="workareaId">
<el-tree-select v-model="form.workareaId" :data="data.workAreaOptions"
:props="{ value: 'id', label: 'title', children: 'children' }" value-key="id" placeholder="请选择工区" clearable
style="width: 240px" />
</el-form-item>
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="form.deviceName" placeholder="请输入设备名称" />
@ -184,17 +112,16 @@
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item label="启停1-启用 0-停用" prop="enabled">
<el-input v-model="form.enabled" placeholder="请输入启停1-启用 0-停用" />
<el-form-item label="LED绘图模式" prop="drawType">
<el-select v-model="form.drawType" placeholder="请选择LED绘图模式">
<el-option v-for="item in led_draw_type" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="${comment}" prop="isDel">
<el-input v-model="form.isDel" placeholder="请输入${comment}" />
</el-form-item>
<el-form-item label="${comment}" prop="state">
<el-input v-model="form.state" placeholder="请输入${comment}" />
</el-form-item>
<el-form-item label="${comment}" prop="remark">
<el-input v-model="form.remark" placeholder="请输入${comment}" />
<el-form-item label="启停" prop="enabled">
<el-radio-group v-model="form.enabled">
<el-radio label="1">启用</el-radio>
<el-radio label="0">停用</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
@ -208,9 +135,16 @@
</template>
<script setup name="Ledscreen">
import { ref, reactive, toRefs, getCurrentInstance } from 'vue';
import { listLedscreen, getLedscreen, delLedscreen, addLedscreen, updateLedscreen } from "@/api/system/ledscreen";
import { workAreaTree, transformTreeData } from '@/api/system/workAarea';
import useUserStore from '@/store/modules/user';
import { useDict } from '@/utils/dict';
const { led_draw_type } = useDict('led_draw_type');
const { proxy } = getCurrentInstance();
const userStore = useUserStore();
const ledscreenList = ref([]);
const open = ref(false);
@ -227,7 +161,8 @@ const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
projectId: null,
projectId: userStore.currentPrjId,
workAreaAncestors: '',
workareaId: null,
deviceName: null,
deviceSn: null,
@ -240,14 +175,69 @@ const data = reactive({
state: null,
},
rules: {
}
workareaId: [
{ required: true, message: '请选择所属工区', trigger: 'change' }
],
deviceName: [
{ required: true, message: '请输入设备名称', trigger: 'blur' }
],
deviceSn: [
{ required: true, message: '请输入设备序列号', trigger: 'blur' }
],
width: [
{ required: true, message: '请输入宽度', trigger: 'blur' },
{ pattern: /^\d+$/, message: '宽度必须为数字', trigger: 'blur' }
],
height: [
{ required: true, message: '请输入高度', trigger: 'blur' },
{ pattern: /^\d+$/, message: '高度必须为数字', trigger: 'blur' }
],
title: [
{ required: true, message: '请输入标题', trigger: 'blur' }
],
drawType: [
{ required: true, message: '请选择LED绘图模式', trigger: 'change' }
]
},
workAreaOptions: []
});
const { queryParams, form, rules } = toRefs(data);
/** 查询工区树结构 */
function getWorkAreaTree() {
workAreaTree(userStore.currentPrjId).then(response => {
data.workAreaOptions = transformTreeData(response.data);
console.log(data.workAreaOptions);
});
}
/** 查找树节点 */
function findTreeNode(nodes, id) {
for (let node of nodes) {
if (node.id === id) {
return node;
}
if (node.children && node.children.length > 0) {
const found = findTreeNode(node.children, id);
if (found) return found;
}
}
return null;
}
/** 查询LED屏配置列表 */
function getList() {
loading.value = true;
queryParams.value.projectId = userStore.currentPrjId;
if (queryParams.value.workareaId) {
const selectedNode = findTreeNode(data.workAreaOptions, queryParams.value.workareaId);
if (selectedNode && selectedNode.ancestors) {
queryParams.value.workAreaAncestors = selectedNode.ancestors;
}
} else {
delete queryParams.value.workAreaAncestors;
}
listLedscreen(queryParams.value).then(response => {
ledscreenList.value = response.rows;
total.value = response.total;
@ -265,16 +255,16 @@ function cancel() {
function reset() {
form.value = {
id: null,
projectId: null,
projectId: userStore.currentPrjId,
workareaId: null,
deviceName: null,
deviceSn: null,
width: null,
height: null,
drawType: null,
drawType: "1",
title: null,
enabled: null,
isDel: null,
enabled: "1",
isDel: 0,
state: null,
remark: null,
createBy: null,
@ -288,6 +278,7 @@ function reset() {
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
@ -317,6 +308,8 @@ function handleUpdate(row) {
const _id = row.id || ids.value
getLedscreen(_id).then(response => {
form.value = response.data;
form.value.drawType = "" + form.value.drawType;
form.value.enabled = "" + form.value.enabled;
open.value = true;
title.value = "修改LED屏配置";
});
@ -346,7 +339,7 @@ function submitForm() {
/** 删除按钮操作 */
function handleDelete(row) {
const _ids = row.id || ids.value;
proxy.$modal.confirm('是否确认删除LED屏配置编号为"' + _ids + '"的数据项?').then(function() {
proxy.$modal.confirm('是否确认删除已选择的LED屏数据项').then(function () {
return delLedscreen(_ids);
}).then(() => {
getList();
@ -362,4 +355,5 @@ function handleExport() {
}
getList();
getWorkAreaTree();
</script>

View File

@ -34,6 +34,7 @@
<!-- LED屏幕列表 -->
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="24">
<el-card class="box-card" shadow="never">
<template #header>
@ -65,7 +66,7 @@
{{ row.width }} × {{ row.height }}
</template>
</el-table-column>
<el-table-column label="状态" align="center" width="100">
<el-table-column label="运行状态" align="center" width="100">
<template #default="{ row }">
<el-tag :type="row.online ? 'success' : 'warning'">
{{ row.online ? "在线" : "离线" }}