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

<template>
  <table class="custom-table table1">
    <thead>
      <tr :style="{ background: 'rgba(35,45,69)' }">
        <th>序号</th>
        <th>执行时间</th>
        <th>操作内容</th>
        <th>操作人</th>
      </tr>
    </thead>
    <tbody>
      <tr
        v-for="(row, index) in dataSource1"
        :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>
      </tr>
    </tbody>
  </table>

  <div class="out-dialog" :class="{ showDialog: logModalVisible }" v-if="logModalVisible">
    <div class="content" v-if="logModalVisible">
      <div>
        <div class="div-operation"></div>
        <span class="text-operation">操作日志 </span>
      </div>
      <div class="j-box" v-for="item in cxList" :key="item.id">
        <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
              >
            </div>
          </div>
          <div class="btn-box">
            <div class="btn-item">
              <div class="left">控制模式</div>
              <div class="right">
                <span>手动</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>自动</span>
              </div>
            </div>
            <div class="btn-item">
              <div class="left"> 亮度 </div>
              <div class="right">
                <span>100lux</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>30lux</span>
              </div>
            </div>
            <div class="btn-item">
              <div class="left"> 控制场景 </div>
              <div class="right">
                <span>手动</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>自动</span>
              </div>
            </div>
            <div class="btn-item">
              <div class="left"> 色温 </div>
              <div class="right">
                <span>4000k</span>
                <img src="/asset/image/bulbLogo/22406.png" alt="" />
                <span>3800k</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 60px"></div>
    <div class="button-box">
      <button class="cancel" @click="logModalVisible = false">取消</button>
    </div>
  </div>
  <div class="div-add">
    <button class="add">刷新</button>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';

  // 初始化
  onMounted(() => {});

  // 与父组件的交互  ===================================================================
  const props = defineProps({
    // 分区结构（照明区域 > 照明回路）
    treeData: {
      type: Array,
    },
  });
  const emit = defineEmits(['changeArea']);

  // 表格数据
  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');
    }
    // 显示模态框
    logModalVisible.value = true;
  };
</script>
<style lang="less" scoped>
  @import './dialogStyle.less';

  // 右下角添加按钮
  .div-add {
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    margin-right: 20px;
    .add {
      width: 74px;
      height: 40px;
      opacity: 1;
      border-radius: 4px;
      background: rgba(67, 136, 251, 1);
      border: rgba(67, 136, 251, 1);
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }
  }

  // 表格
  .custom-table {
    border-collapse: collapse;
    width: 416px;
    height: 60px;
    color: rgba(255, 255, 255, 1);
  }

  .custom-table th,
  .custom-table td {
    border: 1px solid rgba(163, 192, 243, 1);
    text-align: left;
    padding: 8px;
    text-align: center;
  }

  .table1 {
    margin-top: 20px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);

    .tabReboot,
    .tabDelete {
      border: none;
      background-color: rgba(0, 0, 0, 0);
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0;
      line-height: 20px;
      color: rgba(67, 136, 251, 1);
    }

    .tabReboot {
      margin-right: 8px;
    }

    .isTrIndex {
      background: rgba(67, 136, 251, 1);
    }
  }

  ::v-deep(.ant-transfer) {
    // 屏蔽自带的hover效果
    .ant-transfer-list-content-item:hover {
      background: black;
    }
  }
</style>