LED屏配置管理开发

yanzhu-common/yanzhu-common-mapper/src/main/java/com/yanzhu/system/domain/SysLedscreen.java

@@ -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绘图模式")

yanzhu-common/yanzhu-common-mapper/src/main/resources/mapper/system/SysLedscreenMapper.xml

@@ -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"/>

yanzhu-ui-vue3/src/views/system/ledscreen/index.vue

@@ -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-form-item label="所属工区" prop="workAreaAncestors">
-        <el-input
+        <el-tree-select v-model="queryParams.workAreaAncestors" :data="data.workAreaOptions"
-          v-model="queryParams.projectId"
+          :props="{ value: 'id', label: 'title', children: 'children' }" value-key="id" placeholder="请选择工区" clearable
-          placeholder="请输入项目ID"
+          style="width: 240px" check-strictly />
-          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>
       <el-form-item label="设备名称" prop="deviceName">
-        <el-input
+        <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
-          v-model="queryParams.deviceName"
-          placeholder="请输入设备名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
-      <el-form-item label="设备序列号" prop="deviceSn">
+      <el-form-item label="序列号" prop="deviceSn">
-        <el-input
+        <el-input v-model="queryParams.deviceSn" placeholder="请输入设备序列号" clearable @keyup.enter="handleQuery" />
-          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>
+
       <el-form-item label="标题" prop="title">
-        <el-input
+        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable @keyup.enter="handleQuery" />
-          v-model="queryParams.title"
-          placeholder="请输入标题"
-          clearable
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
-      <el-form-item label="启停1-启用 0-停用" prop="enabled">
+      <el-form-item label="状态" prop="enabled">
-        <el-input
+        <el-select v-model="queryParams.enabled" placeholder="请选择状态" clearable>
-          v-model="queryParams.enabled"
+          <el-option label="启用" value="1"></el-option>
-          placeholder="请输入启停1-启用 0-停用"
+          <el-option label="停用" value="0"></el-option>
-          clearable
+        </el-select>
-          @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>
+
       <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
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
-          type="primary"
+          v-hasPermi="['system:ledscreen:add']">新增</el-button>
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['system:ledscreen:add']"
-        >新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
-          type="success"
+          v-hasPermi="['system:ledscreen:edit']">修改</el-button>
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['system:ledscreen:edit']"
-        >修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
-          type="danger"
+          v-hasPermi="['system:ledscreen:remove']">删除</el-button>
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['system:ledscreen:remove']"
-        >删除</el-button>
       </el-col>
-      <el-col :span="1.5">
+      <el-col :span="1.5" v-if="1 == 2">
-        <el-button
+        <el-button type="warning" plain icon="Download" @click="handleExport"
-          type="warning"
+          v-hasPermi="['system:ledscreen:export']">导出</el-button>
-          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="工区" align="center" prop="workareaName" />
-      <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="deviceName" />
-      <el-table-column label="设备序列号" align="center" prop="deviceSn" />
+      <el-table-column label="设备序列号" align="center" prop="deviceSn" width="200px" />
-      <el-table-column label="宽" align="center" prop="width" />
+      <el-table-column label="尺寸" align="center" prop="width">
-      <el-table-column label="高" align="center" prop="height" />
+        <template #default="scope">
-      <el-table-column label="LED绘图模式" align="center" prop="drawType" />
+          {{ 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="启停状态" align="center" prop="enabled">
-      <el-table-column label="${comment}" align="center" prop="isDel" />
+        <template #default="scope">
-      <el-table-column label="${comment}" align="center" prop="state" />
+          <el-tag :type="scope.row.enabled == 1 ? 'success' : 'danger'">
-      <el-table-column label="${comment}" align="center" prop="remark" />
+            {{ 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="Edit" @click="handleUpdate(scope.row)"
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:ledscreen:remove']">删除</el-button>
+            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
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-      v-show="total>0"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
-      :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-dialog :title="title" v-model="open" width="500px" append-to-body :close-on-click-modal="false"
-      <el-form ref="ledscreenRef" :model="form" :rules="rules" label-width="80px">
+      :close-on-press-escape="false" class="dlg-hide-form-hidden-scroll">
-        <el-form-item label="项目ID" prop="projectId">
+      <el-form ref="ledscreenRef" :model="form" :rules="rules" label-width="120px">
-          <el-input v-model="form.projectId" placeholder="请输入项目ID" />
+
-        </el-form-item>
+        <el-form-item label="所属工区" prop="workareaId">
-        <el-form-item label="分区ID" prop="workareaId">
+          <el-tree-select v-model="form.workareaId" :data="data.workAreaOptions"
-          <el-input v-model="form.workareaId" placeholder="请输入分区ID" />
+            :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-form-item label="LED绘图模式" prop="drawType">
-          <el-input v-model="form.enabled" placeholder="请输入启停1-启用 0-停用" />
+          <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-form-item label="启停" prop="enabled">
-          <el-input v-model="form.isDel" placeholder="请输入${comment}" />
+          <el-radio-group v-model="form.enabled">
-        </el-form-item>
+            <el-radio label="1">启用</el-radio>
-        <el-form-item label="${comment}" prop="state">
+            <el-radio label="0">停用</el-radio>
-          <el-input v-model="form.state" placeholder="请输入${comment}" />
+          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="${comment}" prop="remark">
-          <el-input v-model="form.remark" placeholder="请输入${comment}" />
         </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,
+    enabled: "1",
-    isDel: null,
+    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,12 +339,12 @@ 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();
     proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+  }).catch(() => { });
 }
 
 /** 导出按钮操作 */
@@ -362,4 +355,5 @@ function handleExport() {
 }
 
 getList();
+getWorkAreaTree();
 </script>

yanzhu-ui-vue3/src/views/system/ledscreen/ledRunInfo.vue

@@ -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 ? "在线" : "离线" }}