照明控制面板

6 months ago · 14a7c158bc
5 changed files with 590 additions and 1 deletions
--- a/hx-ai-intelligent/src/main.ts
+++ b/hx-ai-intelligent/src/main.ts
@ -5,6 +5,8 @@ import { apiModule } from '/@/api';
 import { appConfig } from '/@/config';
 import './theme/global.less';
 import { LeftOutlined } from '@ant-design/icons-vue';
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 const app = createApp(App);
 app.component('LeftOutlined', LeftOutlined);
 saasInit({
@ -12,4 +14,5 @@ saasInit({
  apiModule,
  appConfig,
 });
 app.use(ElementPlus)
 app.mount('#app');
--- a/hx-ai-intelligent/src/router/organizationManage.ts
+++ b/hx-ai-intelligent/src/router/organizationManage.ts
@ -62,6 +62,25 @@ const organizationManage = {
        },
      ],
    },
    {
      path: 'lightManage',
      name: 'LightManage',
      meta: { title: '智能照明', hideChildren: true, icon: 'dicizhishou' },
      component: Base,
      redirect: { name: 'lightManageIndex' },
      children: [
        {
          path: 'index',
          name: 'lightManageIndex',
          component: () => import('/@/view/organizationManage/lightingManage/index.vue'),
          meta: {
            title: '部门/权限',
            keepAlive: true,
            // backApi: [],
          },
        },
      ],
    },
  ],
 };
 export default organizationManage;
--- a/hx-ai-intelligent/src/view/organizationManage/lightingManage/index.vue
+++ b/hx-ai-intelligent/src/view/organizationManage/lightingManage/index.vue
@ -0,0 +1,566 @@
 <template>
  <div class="main">
    <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
      open
    </el-button>
    <el-drawer v-model="drawer" :with-header="false">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="控制面板" name="first">
          <!-- 照明区域 -->
          <div class="lightarea">
            <div class="lightareatab"></div>
            <span class="lightareatext"> 照明区域 </span>
            <button class="plan">计划启用</button>
          </div>
          <!-- button部分 -->
          <div class="area">
            <button v-for="(button, index) in buttons" :key="index"
              :class="{ btn: true, selected: button === selectedButton }" @click="selectButton(button)">
              {{ button.label }}
            </button>
          </div>
          <!-- 照明回路 -->
          <div class="circuitarea">
            <div class="circuittab"></div>
            <span class="circuittext">照明回路</span>
            <button class="plan">计划启用</button>
            <button class="batch" @click="toggleSelectionMode">
              {{ selectionModeText }}
            </button>
            <button v-if="showSelectAll" class="both" @click="selectAll">全选</button>
          </div>
          <!-- button部分 -->
          <div class="btnarea">
            <button v-for="(button2, index) in buttons2" :key="index" :class="{ btn: true, selected: button2.selected }"
              @click="toggleSelection(button2)">
              {{ button2.label }}
            </button>
          </div>
          <!-- 控制模式 -->
          <div class="controlarea">
            <div class="controltab"></div>
            <span class="controltext"> 控制模式 </span>
          </div>
          <!-- 控制模式按钮部分 -->
          <div class="controlmodebtnarea">
            <button v-for="(button3, index) in controlbutton" :key="index"
              :class="{ btn: true, selected: button3 === selectedButton3 }" @click="selectButton3(button3)">
              {{ button3.label }}
            </button>
          </div>
          <!-- 控制场景 -->
          <div class="controlscenearea">
            <div class="controlscenetab"></div>
            <span class="controlscenetext"> 控制场景 </span>
          </div>
          <!-- 控制场景按钮部分 -->
          <div class="controlscenebtnarea">
            <button v-for="(button4, index) in controlscenebuttons" :key="index"
              :class="{ btn: true, selected: button4 === selectedButton4 }" @click="selectButton4(button4)">
              {{ button4.label }}
            </button>
          </div>
          <!-- 灯具参数 -->
          <div class="lightparametersarea">
            <div class="lightparameterstab"></div>
            <span class="lightparameterstext"> 灯具参数 </span>
          </div>
          <div class="lightparameterstextarea">
            <p>开启数量</p>
            <p>亮度</p>
            <p>色温</p>
            <p>8/10</p>
            <p>100lux</p>
            <p>4200k</p>
          </div>
          <div class="bottom">
            <button class="flushed">刷新</button>
            <button class="execute">执行</button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="计划列表" name="second">
          <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
            <el-table-column prop="id" label="序号" width="60" />
            <el-table-column prop="date" label="执行时间" width="100" />
            <el-table-column prop="planname" label="计划名称" width="90" />
            <el-table-column prop="status" label="状态" width="70" />
            <el-table-column label="操作">
              <span class="tabreboot">重启</span>
              <span class="tabdelete">删除</span>
            </el-table-column>
          </el-table>
          <div class="divadd">
            <button class="add">添加</button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="日志" name="third">
          <el-table :data="tableData2" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
            <el-table-column prop="id" label="序号" />
            <el-table-column prop="date" label="执行时间" />
            <el-table-column prop="planname" label="操作内容" />
            <el-table-column prop="status" label="操作人"  />
          </el-table>
          <div class="divadd">
            <button class="add">刷新</button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
 </template>
 <script lang="ts" setup>
 import { ref } from "vue";
 import { Timer } from "@element-plus/icons-vue";
 // 照明区域按钮单选
 interface Button {
  label: string;
  selected: boolean;
 }
 const buttons = ref<Button[]>([
  { label: "A区", selected: false },
  { label: "B区", selected: false },
  { label: "C区", selected: false },
  { label: "D区", selected: false },
  { label: "计划启用", selected: false },
 ]);
 const selectedButton = ref<Button | null>(null);
 const selectButton = (button: Button) => {
  selectedButton.value = button;
 };
 // 照明回路按钮
 interface Button {
  label: string;
  selected: boolean;
 }
 const buttons2 = ref<Button[]>([
  { label: "1区", selected: false },
  { label: "2区", selected: false },
  { label: "3区", selected: false },
  { label: "4区", selected: false },
 ]);
 const showSelectAll = ref(false);
 const bt = ref(false);
 const selectionModeText = ref("批量");
 const toggleSelection = (button2: Button) => {
  if (!showSelectAll.value) {
    // 单选模式
    for (const button of buttons2.value) {
      button.selected = false;
    }
    button2.selected = true;
  } else {
    // 批量选择模式
    button2.selected = !button2.selected;
    bt.value = false;
  }
 };
 const toggleSelectionMode = () => {
  showSelectAll.value = !showSelectAll.value;
  selectionModeText.value = showSelectAll.value ? "单选" : "批量";
 };
 const selectAll = () => {
  if (bt.value == false) {
    for (const button of buttons2.value) {
      button.selected = true;
      bt.value = true;
    }
  } else {
    for (const button of buttons2.value) {
      button.selected = false;
      bt.value = false;
    }
  }
 };
 // 控制模式按钮
 interface Button {
  label: string;
  selected: boolean;
 }
 const controlbutton = ref<Button[]>([
  { label: "A区", selected: false },
  { label: "B区", selected: false },
  { label: "C区", selected: false },
 ]);
 const selectedButton3 = ref<Button | null>(null);
 const selectButton3 = (button3: Button) => {
  selectedButton3.value = button3;
 };
 // 控制场景按钮
 interface Button {
  label: string;
  selected: boolean;
 }
 const controlscenebuttons = ref<Button[]>([
  { label: "检修", selected: false },
  { label: "午休", selected: false },
  { label: "疏散", selected: false },
  { label: "客流高峰", selected: false },
 ]);
 const selectedButton4 = ref<Button | null>(null);
 const selectButton4 = (button4: Button) => {
  selectedButton4.value = button4;
 };
 const drawer = ref(true);
 import type { TabsPaneContext } from "element-plus";
 const activeName = ref("first");
 const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
 };
 //计划列表
 interface User {
  id: number;
  date: string;
  planname: string;
  status: string;
 }
 const tableData: User[] = [
  {
    id: 1,
    date: "2016-05-03",
    planname: "劳动节",
    status: "暂停中",
  },
  {
    id: 2,
    date: "2016-05-02",
    planname: "国庆节",
    status: "待执行",
  },
  {
    id: 3,
    date: "2016-05-04",
    planname: "元旦",
    status: "待执行",
  }
 ];
 const tableData2: User[] = [
  {
    id: 1,
    date: "2016-05-03",
    planname: "计划再开",
    status: "张三",
  },
  {
    id: 2,
    date: "2016-05-02",
    planname: "检修模式",
    status: "李四",
  },
  {
    id: 3,
    date: "2016-05-04",
    planname: "设备变更",
    status: "王五",
  }
 ];
 </script>
 <style scoped>
 .main {
  left: 0px;
  top: 0px;
  height: 100%;
  opacity: 0.5;
  background: rgba(0, 0, 0, 1);
  border: 1px solid rgba(112, 112, 112, 1);
 }
 .drawer-content {
  width: 5%;
  background-color: paleturquoise;
  display: flex;
  /*justify-content: center;  水平居中 */
  align-items: center;
  /* 垂直居中 */
 }
 el-tabs {
  width: 95%;
  background-color: blueviolet;
 }
 .demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
 }
 .lightarea {
  left: 51px;
  width: 100%;
 }
 .lightareatab,
 .lightareatext {
  display: inline-block;
 }
 .lightareatab,
 .circuittab,
 .controltab,
 .controlscenetab,
 .lightparameterstab {
  left: 0px;
  top: 5px;
  width: 3px;
  height: 13px;
  opacity: 1;
  border-radius: 1px;
  background: rgba(67, 136, 251, 1);
 }
 .lightareatext,
 .circuittext,
 .controltext,
 .controlscenetext,
 .lightparameterstext {
  margin-left: 11px;
  font-size: 16px;
 }
 .plan {
  width: 88px;
  height: 32px;
  opacity: 1;
  border: 1px solid rgba(67, 136, 251, 1);
  color: rgba(67, 136, 251, 1);
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 1);
  margin-left: 11px;
 }
 .area,
 .btnarea,
 .controlmodebtnarea,
 .controlscenearea,
 .lightparametersarea {
  margin-top: 20px;
 }
 .area {
  margin-left: -17px;
 }
 .btn {
  padding: 12px 28px;
  margin-top: 10px;
  margin-left: 17px;
  /* width: 80px; */
  /* height: 40px; */
  font-size: 14px;
  font-weight: 400;
  opacity: 1;
  border: 1px solid rgba(207, 212, 219, 1);
  line-height: 20.27px;
  color: rgba(102, 102, 102, 1);
  text-align: center;
  vertical-align: top;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 1);
 }
 .selected {
  background-color: rgba(39, 120, 255, 1);
  color: rgba(255, 255, 255, 1);
 }
 .btn:hover {
  background-color: rgba(207, 212, 219, 1);
 }
 .btn:active {
  background-color: rgba(102, 102, 102, 1);
  color: white;
 }
 .circuitarea {
  left: 51px;
  width: 100%;
  margin-top: 20px;
 }
 .circuittab,
 .controltab {
  left: 0px;
  top: 5px;
  width: 3px;
  height: 13px;
  opacity: 1;
  border-radius: 1px;
  background: rgba(67, 136, 251, 1);
 }
 .circuittab,
 .circuittext {
  display: inline-block;
 }
 .batch {
  width: 60px;
  height: 32px;
  opacity: 1;
  border: 1px solid rgba(67, 136, 251, 1);
  color: rgba(67, 136, 251, 1);
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 1);
  margin-left: 11px;
 }
 .both {
  width: 60px;
  height: 32px;
  opacity: 1;
  border: 1px solid rgba(255, 118, 2, 1);
  color: rgba(255, 255, 255, 1);
  border-radius: 5px;
  background-color: rgba(255, 118, 2, 1);
  margin-left: 11px;
 }
 .controlarea {
  left: 51px;
  width: 100%;
  margin-top: 20px;
 }
 .controltab,
 .controltext {
  display: inline-block;
 }
 .controlscenetab,
 .controlscenetext {
  display: inline-block;
 }
 :deep(.el-drawer__body) {
  padding-top: 75px;
  height: 100%;
 }
 :deep(.el-tabs__content) {
  height: 100%;
 }
 :deep(.cell) {
  text-align: center;
 }
 :deep(#pane-first) {
  height: 100%;
 }
 .controlscenetab,
 .controlscenetext {
  display: inline-block;
 }
 .controlmodebtnarea {
  margin-top: 20px;
  height: 100%;
 }
 .lightparameterstab,
 .lightparameterstext {
  display: inline-block;
 }
 .lightparameterstextarea {
  border: 1px solid rgba(236, 239, 245, 1);
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  /* grid-column-gap: 10px; */
  /* grid-row-gap: 10px; */
 }
 .lightparameterstextarea>p {
  height: 100%;
  display: flex;
  border: 1px solid rgba(236, 239, 245, 1);
  justify-content: center;
  align-items: center;
 }
 .bottom {
  width: 100%;
  height: 64px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-bottom: 10px;
 }
 .execute {
  margin-right: 20px;
  width: 74px;
  height: 40px;
  opacity: 1;
  border-radius: 4px;
  background: rgba(67, 136, 251, 1);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  border: 0;
  margin-left: 10px;
 }
 .flushed {
  width: 74px;
  height: 40px;
  opacity: 1;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(193, 197, 204, 1);
 }
 .tabreboot,
 .tabdelete {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 20px;
  color: rgba(67, 136, 251, 1);
 }
 .tabreboot {
  margin-right: 8px;
 }
 .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);
 }
 .divadd{
  width: 100%;
  height: 64px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-bottom: 10px;
  margin-right: 20px
 }
 </style>
--- a/hx-ai-intelligent/vite.config.ts
+++ b/hx-ai-intelligent/vite.config.ts
@ -12,7 +12,7 @@ const proxy = {
    changeOrigin: true,
  },
  '/carbon-smart': {
-    target: 'http://192.168.112.144:8224',
+    target: 'http://123.60.103.97:8224',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/carbon-smart/, ''),
  },
--- a/package.json
+++ b/package.json
@ -34,6 +34,7 @@
    "dayjs": "^1.11.2",
    "echarts": "^5.3.2",
    "echarts-gl": "^2.0.9",
    "element-plus": "^2.7.4",
    "element-resize-detector": "^1.2.4",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",