add:样式修改/素材修改/交互逻辑修改/增加日志功能

hx-ai-intelligent/src/view/equipmentControl/lightingManage/tabs3.vue

@@ -6,37 +6,47 @@
         <th>执行时间</th>
         <th>操作内容</th>
         <th>操作人</th>
+        <th>状态</th>
       </tr>
     </thead>
     <tbody>
       <tr
-        v-for="(row, index) in dataSource1"
+        :style="{ color: row.ctrlResult == 0 ? 'red' : 'white' }"
+        v-for="(row, index) in dataSource"
         :key="index"
-        @click="handleRowClick(row.key)"
-        :class="row.key === trIndex ? 'isTrIndex' : ''">
-        <td>{{ row.key }}</td>
-        <td>{{ row.data }}</td>
-        <td>{{ row.planName }}</td>
-        <td>{{ row.status }}</td>
+        @click="handleRowClick(row.id, index)"
+        :class="index === trIndex ? 'isTrIndex' : ''">
+        <td>{{ index + 1 }}</td>
+        <td>{{ row.startTime }}</td>
+        <td>{{ row.operationContent }}</td>
+        <td>{{ row.createUser }}</td>
+        <td>{{ row.ctrlResult ? '成功' : '失败' }}</td>
       </tr>
     </tbody>
   </table>
+  <a-pagination
+    style="margin-top: 10px; text-align: right"
+    v-model:current="pagination.pageNum"
+    v-model:pageSize="pagination.pageSize"
+    show-size-changer
+    :total="pagination.total"
+    @change="getTable(true)" />
 
   <div class="out-dialog" :class="{ showDialog: logModalVisible }" v-if="logModalVisible">
-    <div class="content" v-if="logModalVisible">
+    <div class="content">
       <div>
         <div class="div-operation"></div>
-        <span class="text-operation">操作日志 </span>
+        <span class="text-operation">变更内容 </span>
       </div>
-      <div class="j-box" v-for="item in cxList" :key="item.id">
+      <div class="j-box" v-for="(item, index) in cxList" :key="index">
         <div class="journal" style="margin-top: 20px">
           <div class="imgText">
             <div class="zjzm">
               <img class="title-img" src="/asset/image//bulbLogo/21961.png" alt="" />&nbsp;
               <span
                 class="title-text"
-                style="font-size: 20px; font-weight: 500; color: rgba(255, 255, 255, 1)"
-                >{{ item.name }}</span
+                style="font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, 1)"
+                >{{ item.regionName + ' > ' + item.deviceGroupName }}</span
               >
             </div>
           </div>
@@ -46,134 +56,151 @@
               <div class="right">
                 <span>手动</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                <span>自动</span>
-              </div>
+                <span>自动</span></div
+              >
             </div>
             <div class="btn-item">
               <div class="left"> 亮度 </div>
               <div class="right">
-                <span>100lux</span>
+                <!-- 由于数字0也会被判为false，故只判断undefined 和 null -->
+                <span>{{ item.brightnessBefore != null ? item.brightnessBefore : '--' }}</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                <span>30lux</span>
+                <span>{{ item.brightnessAfter != null ? item.brightnessAfter : '--' }}</span>
               </div>
             </div>
             <div class="btn-item">
               <div class="left"> 控制场景 </div>
               <div class="right">
-                <span>手动</span>
+                <span>{{ item.sceneBefore.label }}</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                <span>自动</span>
+                <span>{{ item.sceneAfter.label }}</span>
               </div>
             </div>
             <div class="btn-item">
               <div class="left"> 色温 </div>
               <div class="right">
-                <span>4000k</span>
+                <span>{{ item.colorBefore != null ? item.colorBefore : '--' }}</span>
                 <img src="/asset/image/bulbLogo/22406.png" alt="" />
-                <span>3800k</span>
+                <span>
+                  {{ item.colorAfter != null ? item.colorAfter : '--' }}
+                </span>
+              </div>
+            </div>
+            <div class="btn-item">
+              <div class="left"> 启用状态 </div>
+              <div class="right">
+                <span>{{ item.lockStatusAfter ? '启用' : '禁用' }}</span>
+                <img src="/asset/image/bulbLogo/22406.png" alt="" />
+                <span>
+                  {{ item.lockStatusBefore ? '启用' : '禁用' }}
+                </span>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div style="height: 60px"></div>
+    <div style="width: 100%; height: 80px"></div>
     <div class="button-box">
-      <button class="cancel" @click="logModalVisible = false">取消</button>
+      <button class="cancel" @click="logModalVisible = false">关闭</button>
     </div>
   </div>
   <div class="div-add">
-    <button class="add">刷新</button>
+    <button class="add" @click="reset">刷新</button>
   </div>
 </template>
 
 <script setup lang="ts">
   import { ref, onMounted } from 'vue';
+  import { message } from 'ant-design-vue';
+  import { Pagination } from 'ant-design-vue';
+  import { http } from '/nerv-lib/util/http';
+  import { lightingManage } from '/@/api/IlluminationInfo';
 
-  // 初始化
-  onMounted(() => {});
+  // 初始化 =======================================================
 
-  // 与父组件的交互  ===================================================================
-  const props = defineProps({
-    // 分区结构（照明区域 > 照明回路）
-    treeData: {
-      type: Array,
+  // 组件
+  defineOptions({
+    components: {
+      'a-pagination': Pagination,
     },
   });
-  const emit = defineEmits(['changeArea']);
+  // 初始化
+  onMounted(() => {
+    getTable();
+  });
 
+  // 日志业务 ======================================================
+
+  // 分页设置
+  const pagination = ref({
+    pageSize: 10,
+    pageNum: 1,
+    total: 0,
+  });
   // 表格数据
-  const dataSource1 = ref([
-    {
-      key: '1',
-      data: '2024-05-01',
-      planName: '计划再开',
-      status: '张三111',
-    },
-    {
-      key: '2',
-      data: '2024-05-01',
-      planName: '检修模式',
-      status: '李四12',
-    },
-    {
-      key: '3',
-      data: '2024-05-01',
-      planName: '设备变更',
-      status: '王五33',
-    },
-  ]);
-  const cxList = ref([
-    {
-      id: '1',
-      name: '站厅照明  1区',
-      manual: '手动',
-      automatic: '自动',
-      brightness: '100lux',
-      brightness2: '30lux',
-      manual2: '手动',
-      automatic2: '自动',
-      brightness3: '4000k',
-      brightness4: '3800k',
-    },
-    {
-      id: '2',
-      name: '站厅照明  2区',
-      manual: '手动',
-      automatic: '自动',
-      brightness: '100lux',
-      brightness2: '30lux',
-      manual2: '手动',
-      automatic2: '自动',
-      brightness3: '4000k',
-      brightness4: '3800k',
-    },
-    {
-      id: '3',
-      name: '站厅照明  3区',
-      manual: '手动',
-      automatic: '自动',
-      brightness: '100lux',
-      brightness2: '30lux',
-      manual2: '手动',
-      automatic2: '自动',
-      brightness3: '4000k',
-      brightness4: '3800k',
-    },
-  ]);
-  let trIndex = ref('-1');
-  const logModalVisible = ref(false);
-  const handleRowClick = (index: any) => {
-    trIndex.value = index;
-    if (index === trIndex.value) {
-      console.log('tri');
+  const dataSource = ref([]);
+  // 当前选中表格行
+  let trIndex = ref(-1);
+  // 获得表格数据
+  const getTable = (changePage = false) => {
+    // 如果是切换页面，则清除当前序列、关闭弹窗
+    if (changePage) {
+      trIndex.value = -1;
+      logModalVisible.value = false;
+      cxList.value = [];
     }
-    // 显示模态框
-    logModalVisible.value = true;
+    http
+      .get(lightingManage.getLog, {
+        pageSize: pagination.value.pageSize,
+        pageNum: pagination.value.pageNum,
+      })
+      .then((res) => {
+        let data = res.data;
+        dataSource.value = data.records;
+        pagination.value.total = data.total;
+      });
   };
+  // 刷新功能（右下角）
+  const reset = () => {
+    pagination.value = {
+      pageSize: 10,
+      pageNum: 1,
+      total: 0,
+    };
+    getTable();
+  };
+  // 点击日志行事件
+  const handleRowClick = (id: any, index: any) => {
+    // 忽略无效点击
+    if (index === trIndex.value) {
+      return;
+    } else {
+      trIndex.value = index;
+      getLogDetail(id);
+    }
+  };
+
+  // 日志详情业务 ==================================================
+
+  // 日志详情显隐
+  const logModalVisible = ref(false);
+  const getLogDetail = (id: any) => {
+    http.get(lightingManage.getLogDetail, { logId: id }).then((res) => {
+      const data = res.data;
+      if (data && data.length) {
+        // 显示模态框
+        logModalVisible.value = true;
+        cxList.value = res.data;
+      } else {
+        return message.info('返回值无效');
+      }
+    });
+  };
+  const cxList = ref([]);
 </script>
 <style lang="less" scoped>
-  @import './dialogStyle.less';
+  @import '../style/dialogStyle.less';
 
   // 右下角添加按钮
   .div-add {
@@ -203,7 +230,10 @@
   .custom-table {
     border-collapse: collapse;
     width: 416px;
-    height: 60px;
+    min-height: 60px;
+    max-height: 500px;
+    overflow-y: auto;
+    cursor: pointer;
     color: rgba(255, 255, 255, 1);
   }