add:增加照明系统前端交互

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

@@ -0,0 +1,216 @@
+<template>
+  <div class="div-add">
+    <button class="add" @click="addModal">添加</button>
+  </div>
+  <table class="custom-table table1">
+    <thead>
+      <tr :style="{ background: 'rgba(35,45,69)' }">
+        <th>序号</th>
+        <th>执行时间</th>
+        <th>计划名称</th>
+        <th>状态</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, index) in dataSource" :key="index">
+        <td>{{ row.key }}</td>
+        <td>{{ row.data }}</td>
+        <td>{{ row.planName }}</td>
+        <td v-if="row.status === '待执行'">
+          <button
+            style="
+              font-size: 12px;
+              background: rgba(57, 215, 187, 0.1);
+              color: rgb(57, 215, 187);
+              border: 1px solid rgb(57, 215, 187);
+            ">
+            {{ row.status }}
+          </button>
+        </td>
+        <td v-if="row.status !== '待执行'">
+          <button
+            style="
+              font-size: 12px;
+              background: rgba(243, 97, 99, 0.1);
+              border: 1px solid rgba(243, 97, 99);
+              color: rgba(243, 97, 99);
+            ">
+            {{ row.status }}
+          </button>
+        </td>
+        <td>
+          <button class="tabReboot" @click="handleRefClick1">重启</button>
+          <button class="tabDelete">删除</button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <div class="out-dialog" v-if="addVisible">
+    <div class="content" v-if="addVisible">
+      <div class="div-operation"></div>
+      <span class="text-operation">计划库</span>
+    </div>
+    <div style="margin-top: 20px">
+      <a-transfer
+        v-model:target-keys="targetKeys"
+        :data-source="mockData"
+        show-search
+        :filter-option="filterOption"
+        :render="(item) => item.title"
+        @change="handleChange"
+        :style="{ color: 'rgba(255,255,255,1)' }"
+        @search="handleSearch"
+        :listStyle="{ border: '2px solid rgba(25,74,125,1)', height: 'calc(100vh - 200px)' }" />
+    </div>
+    <div style="width: 100%; height: 60px;"></div>
+    <div class="button-box">
+      <button class="cancel" @click="addVisible = false">取消</button>
+      <button class="execute">确定</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+
+// 初始化
+onMounted(() => {
+  
+})
+
+// 表格数据
+const dataSource = ref([
+  {
+    key: '1',
+    data: '2024-05-01',
+    planName: '劳动节',
+    status: '暂停中',
+  },
+  {
+    key: '2',
+    data: '2024-05-01',
+    planName: '国庆节',
+    status: '待执行',
+  },
+  {
+    key: '3',
+    data: '2024-05-01',
+    planName: '元旦',
+    status: '待执行',
+  },
+]);
+const addVisible = ref<boolean>(false);
+// 操作日志
+const handleRefClick1 = () => {
+  alert(111)
+};
+const addModal = () => {
+  addVisible.value = true;
+};
+const handleChange = (keys: string[], direction: string, moveKeys: string[]) => {
+  console.log(keys, direction, moveKeys);
+};
+const handleSearch = (dir: string, value: string) => {
+  console.log('search:', dir, value);
+};
+
+// 穿梭框 相关业务
+interface MockData {
+  key: string;
+  title: string;
+  description: string;
+  chosen: boolean;
+}
+const mockData = ref([
+  {
+    key: '1',
+    title: '计划再开',
+  },
+  {
+    key: '2',
+    title: '检修模式',
+  },
+  {
+    key: '3',
+    title: '设备变更',
+  },
+]);
+const targetKeys = ref<string[]>([]);
+const filterOption = (inputValue: string, option: MockData) => {
+  console.log(option.description);
+
+  return option.description.indexOf(inputValue) > -1;
+};
+
+
+</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);
+  }
+}
+// 表格
+.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;
+  }
+}
+::v-deep(.ant-transfer) {
+  // 屏蔽自带的hover效果
+  .ant-transfer-list-content-item:hover {
+    background: black;
+  }
+}
+  
+
+</style>