Merge branch 'zdnew' into 'master'

Zdnew

See merge request tian-group/skyeye-admin-fe!4

.env.development

@@ -5,7 +5,7 @@ VITE_PORT = 8092
 VITE_PUBLIC_PATH = /
 
 # 是否开启mock
-VITE_USE_MOCK = true
+VITE_USE_MOCK = false
 
 # 网站前缀
 VITE_BASE_URL = /
@@ -15,7 +15,7 @@ VITE_DROP_CONSOLE = true
 
 # 跨域代理，可以配置多个，请注意不要换行
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
-VITE_PROXY=[["/temp","http://172.16.23.144:8800"],["/upload","http://172.16.23.144:8086"]]
+VITE_PROXY=[["/api","http://192.168.1.102:8800/api"]]
 
 # API 接口地址
 VITE_GLOB_API_URL = 

src/api/scene/sceneOperate.ts

@@ -0,0 +1,204 @@
+import { http } from '@/utils/http/axios';
+import { workShopTempleteType } from './secene-templet';
+
+// 传入参数类型    还缺个场景list
+export interface ComAddDatas {
+  code?: string; //公司编码
+  createdAt?: string; //创建时间
+  id?: number; //新增后返回的唯一com的id
+  isDeleted?: number; //是否删除
+  name?: string; //公司名字
+  parentId?: number; //上级公司id  无上级为0
+  remark?: string; //描述
+  status?: number; //状态  0-启动  1-禁用
+  updatedAt?: string;
+  serial?: number; //排序
+  // tag?: string; //场景标签   自定义  后面需要修改
+  labelList?: string[]; //创建的多个场景标签   自定义后面需要修改 这里没
+}
+
+/**
+ * @description: 添加公司
+ */
+export const addCompany = (data: ComAddDatas): Promise<number> => {
+  return http.request({
+    url: '/scene/saveCompany',
+    method: 'post',
+    data,
+  });
+};
+
+/**
+ * @description: 编辑公司
+ */
+export const editCompany = (data: ComAddDatas): Promise<number> => {
+  return http.request({
+    url: '/scene/updateCompany',
+    method: 'put',
+    data,
+  });
+};
+
+/**
+ * @description: 删除公司
+ */
+export const delCompany = (companyId: number) => {
+  return http.request({
+    url: `/scene/deleteCompany?companyId=${companyId}`,
+    method: 'DELETE',
+  });
+};
+
+// 传入参数类型
+export interface workshopAddDatas {
+  code?: string;
+  companyId?: number; //公司id
+  sceneLabelId?: number; //类型  1-车间  2-危险点  3-物流  4-生活园区
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  name?: string;
+  remark?: string;
+  status?: number;
+  updatedAt?: string;
+  // templete?: string; //车间模板
+  // tag?: string; //场景标签
+}
+
+/**
+ * @description: 添加车间
+ */
+export const addWorkshop = (data: workshopAddDatas): Promise<number> => {
+  return http.request({
+    url: '/scene/saveWorkshop',
+    method: 'post',
+    data,
+  });
+};
+
+/**
+ * @description: 编辑车间
+ */
+export const editWorkshop = (data: workshopAddDatas): Promise<number> => {
+  return http.request({
+    url: '/scene/updateWorkshop',
+    method: 'put',
+    data,
+  });
+};
+
+/**
+ * @description: 删除车间
+ */
+export const delWorkshop = (data: number): Promise<number> => {
+  return http.request({
+    url: '/scene/deleteWorkshop',
+    method: 'DELETE',
+    data,
+  });
+};
+
+// 传入参数类型
+export interface workspaceAddDatas {
+  code?: string;
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  name?: string;
+  principal?: string; //工位负责人
+  remark?: string;
+  status?: number;
+  serial: number;
+  updatedAt?: string;
+  workshopId?: number; //车间id
+  // tag?: string; //场景标签
+}
+
+/**
+ * @description: 添加工位
+ */
+export const addWorkspace = (data: workspaceAddDatas): Promise<number> => {
+  return http.request({
+    url: '/scene/saveWorkspace',
+    method: 'post',
+    data,
+  });
+};
+
+/**
+ * @description: 编辑工位
+ */
+export const editWorkspace = (data: workspaceAddDatas): Promise<number> => {
+  return http.request({
+    url: '/scene/updateWorkspace',
+    method: 'put',
+    data,
+  });
+};
+
+/**
+ * @description: 删除工位
+ */
+export const delWorkspace = (data: number): Promise<number> => {
+  return http.request({
+    url: '/scene/deleteWorkspace',
+    method: 'DELETE',
+    data,
+  });
+};
+
+//获取列表
+// 传入参数类型
+export interface sceneListType<T, S> {
+  code?: string;
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  name?: string;
+  parentId?: number;
+  remark?: string;
+  status?: number;
+  serial?: number;
+  updatedAt?: string;
+  children?: T[]; //车间-工位信息
+  labelList?: S[]; //创建的多个场景标签
+  moduleList?: S[]; //创建得多个模板
+}
+
+export interface labelModuleListType {
+  code?: string;
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  name?: string;
+  remark?: string;
+  status?: number;
+  updatedAt?: string;
+}
+
+export interface getListWorkshop<U, A> {
+  code?: string;
+  companyId?: number; //公司id
+  sceneLabelId?: number; //类型  1-车间  2-危险点  3-物流  4-生活园区
+  labelName?: string;
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  name?: string;
+  remark?: string;
+  serial?: number;
+  status?: number;
+  updatedAt?: string;
+  children?: U[]; //工位信息
+  workshopModule?: A; //车间模板
+  // tag?: string; //场景标签  自定义  后面需要修改
+}
+
+export const getSceneList = (): Promise<
+  sceneListType<getListWorkshop<workspaceAddDatas, workShopTempleteType>, labelModuleListType>[]
+> => {
+  return http.request({
+    url: '/scene/getList',
+    method: 'get',
+  });
+};

src/api/scene/secene-templet.ts

@@ -0,0 +1,129 @@
+import { http } from '@/utils/http/axios';
+
+//查询场景标签
+
+export interface sceneLabelType {
+  code?: string;
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  name?: string;
+  remark?: string;
+  status?: number;
+  updatedAt?: string;
+}
+
+export const querySceneLabel = (): Promise<sceneLabelType[]> => {
+  return http.request({
+    url: '/template/findSceneLabel',
+    method: 'get',
+  });
+};
+
+//查询场景模板
+
+export interface templateType {
+  code?: string;
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  name?: string;
+  remark?: string;
+  status?: number;
+  updatedAt?: string;
+}
+
+export const querytemplate = (): Promise<templateType[]> => {
+  return http.request({
+    url: '/template/findSceneModule',
+    method: 'get',
+  });
+};
+
+//查询车间模板
+
+export interface WorkshopModuleType {
+  code?: string;
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  name?: string;
+  remark?: string;
+  status?: number;
+  updatedAt?: string;
+}
+
+export const queryWorkshopModule = (): Promise<WorkshopModuleType[]> => {
+  return http.request({
+    url: '/template/getWorkshopModuleList',
+    method: 'get',
+  });
+};
+
+//根据公司ID查询场景标签
+export interface SceneLabelByCompanyType {
+  code?: string;
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  name?: string;
+  remark?: string;
+  status?: number;
+  updatedAt?: string;
+}
+
+export const querySceneLabelByCompany = (): Promise<SceneLabelByCompanyType[]> => {
+  return http.request({
+    url: '/template/findSceneLabelByCompany',
+    method: 'get',
+  });
+};
+
+//保存公司-场景标签-场景模板关系
+
+export interface SceneTempleteType {
+  companyId?: number;
+  createdAt?: string;
+  id?: number;
+  isDeleted?: number;
+  remark?: string;
+  sceneLabelId?: number;
+  sceneModuleId?: number;
+  updatedAt?: string;
+}
+
+export const addCompanyModuleLabel = (data: SceneTempleteType[]) => {
+  return http.request({
+    url: '/template/saveCompanyModuleLabelRel',
+    method: 'post',
+    data,
+  });
+};
+
+//编辑公司-场景标签-场景模板关系
+export const editCompanyModuleLabel = (data: SceneTempleteType[]) => {
+  return http.request({
+    url: '/template/updateCompanyModuleLabelRel',
+    method: 'put',
+    data,
+  });
+};
+
+//保存车间-车间模板关系
+export interface workShopTempleteType {
+  id?: number;
+  workshopId?: number;
+  workshopModuleId?: number;
+  remark?: string;
+  createdAt: string;
+  isDeleted?: number;
+  updatedAt?: string;
+}
+
+export const addWorkshopModuleLabel = (data: workShopTempleteType): Promise<number> => {
+  return http.request({
+    url: '/template/saveWorkshopModuleRel',
+    method: 'post',
+    data,
+  });
+};

src/components/Table/src/types/table.ts

@@ -45,6 +45,7 @@ export interface TableSetting {
   fullscreen?: boolean;
   striped?: boolean;
   query?: boolean;
+  order?: boolean;
 }
 
 export interface BasicTableProps {

src/views/dashboard/monitor/actionColomns.vue

@@ -0,0 +1,117 @@
+<template>
+  <div style="display: flex">
+    <div style="display: flex; margin-right: 7px">
+      <div
+        v-if="!props.subItem.parent"
+        @click="changeConig"
+        class="wordStyle"
+        style="margin-right: 10px"
+        >页面设置</div
+      >
+      <div v-else style="margin-right: 10px; width: 56px"></div>
+      <div @click="changeAdd" class="wordStyle" style="margin-right: 7px">添加下一级</div></div
+    >
+    <div style="width: 1px; height: 14px; color: #e9e9e9; margin-right: 14px">|</div>
+    <img
+      src="../../../assets/icons/edit.png"
+      @click="changeEdit"
+      style="margin-right: 10px; cursor: pointer"
+      alt=""
+    />
+    <img
+      src="../../../assets/icons/delete.png"
+      @click="changeDelete"
+      style="margin-right: 10px; cursor: pointer"
+      alt=""
+    />
+    <img
+      src="../../../assets/icons/up.png"
+      @click="changeUp"
+      style="margin-right: 10px; cursor: pointer"
+      alt=""
+    />
+    <img
+      src="../../../assets/icons/down.png"
+      @click="changeDown"
+      style="margin-right: 10px; cursor: pointer"
+      alt=""
+    />
+
+    <!-- <el-button class="otp-btn" type="primary" @click="changeSubscribe">预约</el-button>
+    <el-button class="otp-btn" type="danger" @click="changeSubscribe">取消</el-button> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  //   import { SubscribeItem } from '@/api/subscribe/subscribe';
+
+  interface User {
+    name?: string;
+    tag?: string;
+    code?: string;
+    hasChildren?: boolean;
+    children?: User[];
+  }
+
+  const props = defineProps<{
+    subItem: User;
+    handleConig: (row) => unknown;
+    handleAdd: (row) => unknown;
+    handleEdit: (row) => unknown;
+    handleDelete: (row) => unknown;
+    handleUp: (row) => unknown;
+    handleDown: (row) => unknown;
+  }>();
+
+  // const isBook = computed(() => (props.subscribeItem.booking === '0' ? true : false));
+
+  const changeConig = () => {
+    props.handleConig(props.subItem);
+  };
+
+  const changeAdd = () => {
+    props.handleAdd(props.subItem);
+  };
+
+  const changeEdit = () => {
+    props.handleEdit(props.subItem);
+  };
+
+  const changeDelete = () => {
+    props.handleDelete(props.subItem);
+  };
+
+  const changeUp = () => {
+    props.handleUp(props.subItem);
+  };
+
+  const changeDown = () => {
+    props.handleDown(props.subItem);
+  };
+</script>
+
+<style scoped>
+  .wordStyle {
+    height: 22px;
+    font-size: 14px;
+    color: #1890ff;
+    line-height: 22px;
+    cursor: pointer;
+  }
+  .otp-btn {
+    width: 52px;
+    height: 26px;
+  }
+
+  :deep(.el-button--primary) {
+    --el-button-bg-color: #3f9eff;
+    --el-button-hover-bg-color: #64b0fe;
+    --el-button-active-bg-color: #2f8ae7;
+  }
+  :deep(.el-button--danger) {
+    --el-button-bg-color: #f56c6c;
+    --el-button-hover-bg-color: #f68888;
+    --el-button-active-bg-color: #c35353;
+  }
+</style>

src/views/dashboard/monitor/addCompany.vue

@@ -0,0 +1,284 @@
+<template>
+  <div>
+    <el-drawer class="test" v-if="props.tableCom" with-header="true" size="35%">
+      <template #header="{ titleId }">
+        <p :id="titleId">{{ companyAddTitle }}</p>
+      </template>
+      <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="90px"
+        class="demo-ruleForm"
+        size="default"
+        status-icon
+      >
+        <el-form-item label="公司名称" prop="name">
+          <el-input v-model="ruleForm.name" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="上级场景" prop="seniorScene">
+          <el-input v-model="ruleForm.seniorScene" style="width: 200px" disabled />
+        </el-form-item>
+        <el-form-item label="公司代码" prop="code">
+          <el-input v-model="ruleForm.code" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="标签&模板" prop="sceneCode">
+          <div style="width: 200px; height: 30px"></div>
+          <div
+            v-for="(item, index) in selectItems"
+            :key="index"
+            style="margin-bottom: 16px; display: flex"
+          >
+            <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
+              <el-option
+                v-for="item1 in props.sceneList"
+                :key="item1.id"
+                :label="item1.name"
+                :value="item1.id"
+              />
+            </el-select>
+            <img
+              src="@/assets/icons/link.png"
+              alt=""
+              style="width: 16px; margin-left: 2px; margin-right: 2px" />
+            <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
+              <el-option
+                v-for="item2 in props.templateList"
+                :key="item2.id"
+                :label="item2.name"
+                :value="item2.id"
+              />
+            </el-select>
+            <img
+              src="@/assets/icons/close.png"
+              @click="deleScene(index)"
+              alt=""
+              style="
+                width: 13px;
+                height: 13px;
+                margin-top: 10px;
+                margin-left: 3px;
+                cursor: pointer;
+              "
+          /></div>
+          <div style="width: 200px">
+            <el-icon size="28px" @click="addChange" style="cursor: pointer"><CirclePlus /></el-icon
+          ></div>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="addEnable" active-value="0" inactive-value="1" class="switchUse" />
+        </el-form-item>
+      </el-form>
+      <div style="position: absolute; left: 108px; bottom: 67px">
+        <el-button v-if="companyAddTitle === '添加公司'" type="warning" @click="props.resetDraw"
+          >重置</el-button
+        >
+        <el-button type="primary" v-if="companyAddTitle === '添加公司'" @click="newCompanyAdd">
+          提交
+        </el-button>
+        <el-button type="primary" v-if="companyAddTitle !== '添加公司'" @click="props.editedSub">
+          提交
+        </el-button>
+      </div>
+    </el-drawer></div
+  >
+</template>
+
+<script setup lang="ts">
+  import { computed, reactive, ref, defineProps, defineEmits } from 'vue';
+  import { sceneLabelType, templateType } from '@/api/scene/secene-templet';
+  import { ENABLED } from './use-method';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { ElMessageBox } from 'element-plus';
+  //   import { SubscribeItem } from '@/api/subscribe/subscribe';
+
+  interface RuleForm {
+    name: string; //名称
+    seniorScene: string; //上级场景
+    code: string; //代码
+    sceneCode: string; //场景代码
+    tagCom?: string[]; //公司场景标签 可选多个
+    templateCom?: string[]; //公司场景模板 可选多个
+    tagWorkshop?: number; //场景标签  车间
+    templateWorkshop?: string; //车间模板
+    principal?: string; //负责人
+  }
+
+  interface SelectItemType {
+    tag: string;
+    template: string;
+  }
+
+  const props = defineProps<{
+    tableCom: boolean;
+    companyAddTitle: string;
+    sceneList: sceneLabelType[];
+    templateList: templateType[];
+    resetDraw: () => unknown;
+    addNewTypeCom: (formEl) => unknown;
+    editedSub: () => unknown;
+  }>();
+
+  const addEnable = ref(ENABLED.TRUE);
+  const selectItems = ref<SelectItemType[]>([{ tag: '', template: '' }]);
+
+  //将表单数据传至父组件
+  const emit = defineEmits(['upload-data']);
+  //表格中的规则
+  const ruleFormRef = ref<FormInstance>();
+
+  interface RuleForm {
+    name: string; //名称
+    seniorScene: string; //上级场景
+    code: string; //代码
+    sceneCode: string; //场景代码
+    tagCom?: string[]; //公司场景标签 可选多个
+    templateCom?: string[]; //公司场景模板 可选多个
+    tagWorkshop?: number; //场景标签  车间
+    templateWorkshop?: string; //车间模板
+    principal?: string; //负责人
+  }
+  const ruleForm = reactive<RuleForm>({
+    name: '',
+    seniorScene: '',
+    code: '',
+    sceneCode: '',
+    tagCom: [],
+    templateCom: [],
+    tagWorkshop: 0,
+    templateWorkshop: '',
+    principal: '',
+  });
+  const rules = reactive<FormRules<RuleForm>>({
+    name: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+    seniorScene: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    code: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    sceneCode: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    tagCom: [{ required: true, message: '', trigger: 'blur' }],
+    templateCom: [{ required: true, message: '', trigger: 'blur' }],
+    tagWorkshop: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    templateWorkshop: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    principal: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+  });
+
+  //增加空的场景&模板
+  const addChange = () => {
+    selectItems.value.push({
+      tag: '',
+      template: '',
+    });
+    console.log(selectItems.value);
+  };
+
+  //删除场景&模板
+  const deleScene = (index) => {
+    // console.log('row', index);
+    ElMessageBox.confirm('请确认是否关闭该场景？', '状态关闭', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+      .then(() => {
+        selectItems.value.splice(index, 1);
+      })
+      .catch(() => {
+        console.log('取消删除物件');
+      });
+  };
+
+  const formEl = ref<FormInstance>();
+
+  const newCompanyAdd = () => {
+    emit('upload-data', {
+      ruleFormCom: ruleForm,
+      selectItemsCom: selectItems,
+      addEnableCom: addEnable,
+    });
+    props.addNewTypeCom(formEl);
+  };
+
+  // //清空
+  // const resetDraw = () => {
+  //   ruleForm.name = '';
+  //   // ruleForm.seniorScene = '';
+  //   ruleForm.code = '';
+  //   ruleForm.sceneCode = '';
+  //   addEnable.value = 1;
+  //   selectItems.value = [{ tag: '', template: '' }];
+  //   ruleForm.principal = '';
+  //   ruleForm.templateWorkshop = '';
+  //   ruleForm.tagWorkshop = undefined;
+  // };
+
+  const isBook = computed(() => (props.subscribeItem.booking === '0' ? true : false));
+
+  const changeConig = () => {
+    props.handleConig(props.subItem);
+  };
+
+  const changeAdd = () => {
+    props.handleAdd(props.subItem);
+  };
+
+  const changeEdit = () => {
+    props.handleEdit(props.subItem);
+  };
+
+  const changeDelete = () => {
+    props.handleDelete(props.subItem);
+  };
+
+  const changeUp = () => {
+    props.handleUp(props.subItem);
+  };
+
+  const changeDown = () => {
+    props.handleDown(props.subItem);
+  };
+</script>
+
+<style scoped>
+  .wordStyle {
+    height: 22px;
+    font-size: 14px;
+    color: #1890ff;
+    line-height: 22px;
+    cursor: pointer;
+  }
+  .otp-btn {
+    width: 52px;
+    height: 26px;
+  }
+
+  :deep(.el-button--primary) {
+    --el-button-bg-color: #3f9eff;
+    --el-button-hover-bg-color: #64b0fe;
+    --el-button-active-bg-color: #2f8ae7;
+  }
+  :deep(.el-button--danger) {
+    --el-button-bg-color: #f56c6c;
+    --el-button-hover-bg-color: #f68888;
+    --el-button-active-bg-color: #c35353;
+  }
+</style>

src/views/dashboard/monitor/addWorkshop.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-drawer class="test" v-model="tableCom" with-header="true" size="35%">
+    <template #header="{ titleId }">
+      <p :id="titleId">{{ companyAddTitle }}</p>
+    </template>
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="90px"
+      class="demo-ruleForm"
+      size="default"
+      status-icon
+    >
+      <el-form-item label="公司名称" prop="name">
+        <el-input v-model="ruleForm.name" style="width: 200px" />
+      </el-form-item>
+      <el-form-item label="上级场景" prop="seniorScene">
+        <el-input v-model="ruleForm.seniorScene" style="width: 200px" disabled />
+      </el-form-item>
+      <el-form-item label="公司代码" prop="code">
+        <el-input v-model="ruleForm.code" style="width: 200px" />
+      </el-form-item>
+      <el-form-item label="标签&模板" prop="sceneCode">
+        <div style="width: 200px; height: 30px"></div>
+        <div
+          v-for="(item, index) in selectItems"
+          :key="index"
+          style="margin-bottom: 16px; display: flex"
+        >
+          <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
+            <el-option
+              v-for="item1 in options"
+              :key="item1.value"
+              :label="item1.label"
+              :value="item1.value"
+            />
+          </el-select>
+          <img
+            src="@/assets/icons/link.png"
+            alt=""
+            style="width: 16px; margin-left: 2px; margin-right: 2px" />
+          <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
+            <el-option
+              v-for="item2 in options"
+              :key="item2.value"
+              :label="item2.label"
+              :value="item2.value"
+            />
+          </el-select>
+          <img
+            src="../../../assets/icons/close.png"
+            @click="deleScene(index)"
+            alt=""
+            style="width: 13px; height: 13px; margin-top: 10px; margin-left: 3px; cursor: pointer"
+        /></div>
+        <div style="width: 200px">
+          <el-icon size="28px" @click="addChange" style="cursor: pointer"><CirclePlus /></el-icon
+        ></div>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-switch v-model="addEnable" active-value="1" inactive-value="0" class="switchUse" />
+      </el-form-item>
+    </el-form>
+    <div style="position: absolute; left: 108px; bottom: 67px">
+      <el-button v-if="companyAddTitle === '添加公司'" type="warning" @click="resetDraw"
+        >重置</el-button
+      >
+      <el-button type="primary" v-if="companyAddTitle === '添加公司'" @click="addNewTypeCom">
+        提交
+      </el-button>
+      <el-button type="primary" v-if="companyAddTitle !== '添加公司'" @click="editedSub">
+        提交
+      </el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  //   import { SubscribeItem } from '@/api/subscribe/subscribe';
+
+  interface User {
+    name?: string;
+    tag?: string;
+    code?: string;
+    hasChildren?: boolean;
+    children?: User[];
+  }
+
+  const props = defineProps<{
+    subItem: User;
+    handleConig: (row) => unknown;
+    handleAdd: (row) => unknown;
+    handleEdit: (row) => unknown;
+    handleDelete: (row) => unknown;
+    handleUp: (row) => unknown;
+    handleDown: (row) => unknown;
+  }>();
+
+  const isBook = computed(() => (props.subscribeItem.booking === '0' ? true : false));
+
+  const changeConig = () => {
+    props.handleConig(props.subItem);
+  };
+
+  const changeAdd = () => {
+    props.handleAdd(props.subItem);
+  };
+
+  const changeEdit = () => {
+    props.handleEdit(props.subItem);
+  };
+
+  const changeDelete = () => {
+    props.handleDelete(props.subItem);
+  };
+
+  const changeUp = () => {
+    props.handleUp(props.subItem);
+  };
+
+  const changeDown = () => {
+    props.handleDown(props.subItem);
+  };
+</script>
+
+<style scoped>
+  .wordStyle {
+    height: 22px;
+    font-size: 14px;
+    color: #1890ff;
+    line-height: 22px;
+    cursor: pointer;
+  }
+  .otp-btn {
+    width: 52px;
+    height: 26px;
+  }
+
+  :deep(.el-button--primary) {
+    --el-button-bg-color: #3f9eff;
+    --el-button-hover-bg-color: #64b0fe;
+    --el-button-active-bg-color: #2f8ae7;
+  }
+  :deep(.el-button--danger) {
+    --el-button-bg-color: #f56c6c;
+    --el-button-hover-bg-color: #f68888;
+    --el-button-active-bg-color: #c35353;
+  }
+</style>

src/views/dashboard/monitor/addWorkspace.vue

@@ -0,0 +1,151 @@
+<template>
+  <el-drawer class="test" v-model="tableCom" with-header="true" size="35%">
+    <template #header="{ titleId }">
+      <p :id="titleId">{{ companyAddTitle }}</p>
+    </template>
+    <el-form
+      ref="ruleFormRef"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="90px"
+      class="demo-ruleForm"
+      size="default"
+      status-icon
+    >
+      <el-form-item label="公司名称" prop="name">
+        <el-input v-model="ruleForm.name" style="width: 200px" />
+      </el-form-item>
+      <el-form-item label="上级场景" prop="seniorScene">
+        <el-input v-model="ruleForm.seniorScene" style="width: 200px" disabled />
+      </el-form-item>
+      <el-form-item label="公司代码" prop="code">
+        <el-input v-model="ruleForm.code" style="width: 200px" />
+      </el-form-item>
+      <el-form-item label="标签&模板" prop="sceneCode">
+        <div style="width: 200px; height: 30px"></div>
+        <div
+          v-for="(item, index) in selectItems"
+          :key="index"
+          style="margin-bottom: 16px; display: flex"
+        >
+          <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
+            <el-option
+              v-for="item1 in options"
+              :key="item1.value"
+              :label="item1.label"
+              :value="item1.value"
+            />
+          </el-select>
+          <img
+            src="@/assets/icons/link.png"
+            alt=""
+            style="width: 16px; margin-left: 2px; margin-right: 2px" />
+          <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
+            <el-option
+              v-for="item2 in options"
+              :key="item2.value"
+              :label="item2.label"
+              :value="item2.value"
+            />
+          </el-select>
+          <img
+            src="../../../assets/icons/close.png"
+            @click="deleScene(index)"
+            alt=""
+            style="width: 13px; height: 13px; margin-top: 10px; margin-left: 3px; cursor: pointer"
+        /></div>
+        <div style="width: 200px">
+          <el-icon size="28px" @click="addChange" style="cursor: pointer"><CirclePlus /></el-icon
+        ></div>
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-switch v-model="addEnable" active-value="1" inactive-value="0" class="switchUse" />
+      </el-form-item>
+    </el-form>
+    <div style="position: absolute; left: 108px; bottom: 67px">
+      <el-button v-if="companyAddTitle === '添加公司'" type="warning" @click="resetDraw"
+        >重置</el-button
+      >
+      <el-button type="primary" v-if="companyAddTitle === '添加公司'" @click="addNewTypeCom">
+        提交
+      </el-button>
+      <el-button type="primary" v-if="companyAddTitle !== '添加公司'" @click="editedSub">
+        提交
+      </el-button>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts">
+  import { computed } from 'vue';
+  //   import { SubscribeItem } from '@/api/subscribe/subscribe';
+
+  interface User {
+    name?: string;
+    tag?: string;
+    code?: string;
+    hasChildren?: boolean;
+    children?: User[];
+  }
+
+  const props = defineProps<{
+    subItem: User;
+    handleConig: (row) => unknown;
+    handleAdd: (row) => unknown;
+    handleEdit: (row) => unknown;
+    handleDelete: (row) => unknown;
+    handleUp: (row) => unknown;
+    handleDown: (row) => unknown;
+  }>();
+
+  const isBook = computed(() => (props.subscribeItem.booking === '0' ? true : false));
+
+  const changeConig = () => {
+    props.handleConig(props.subItem);
+  };
+
+  const changeAdd = () => {
+    props.handleAdd(props.subItem);
+  };
+
+  const changeEdit = () => {
+    props.handleEdit(props.subItem);
+  };
+
+  const changeDelete = () => {
+    props.handleDelete(props.subItem);
+  };
+
+  const changeUp = () => {
+    props.handleUp(props.subItem);
+  };
+
+  const changeDown = () => {
+    props.handleDown(props.subItem);
+  };
+</script>
+
+<style scoped>
+  .wordStyle {
+    height: 22px;
+    font-size: 14px;
+    color: #1890ff;
+    line-height: 22px;
+    cursor: pointer;
+  }
+  .otp-btn {
+    width: 52px;
+    height: 26px;
+  }
+
+  :deep(.el-button--primary) {
+    --el-button-bg-color: #3f9eff;
+    --el-button-hover-bg-color: #64b0fe;
+    --el-button-active-bg-color: #2f8ae7;
+  }
+  :deep(.el-button--danger) {
+    --el-button-bg-color: #f56c6c;
+    --el-button-hover-bg-color: #f68888;
+    --el-button-active-bg-color: #c35353;
+  }
+</style>

src/views/dashboard/monitor/monitor copy.vue

@@ -0,0 +1,919 @@
+<template>
+  <page-wrapper>
+    <el-card :bordered="false" class="proCard" style="position: relative">
+      <BasicTable
+        :columns="colomns"
+        :data-source="tableData"
+        :row-key="(row) => row.name"
+        :action-column="actionColumn"
+        :pagination="{ total: total, pageSize: pageSize }"
+        :tableSetting="{
+          width: 200,
+          size: false,
+          redo: false,
+          fullscreen: false,
+          striped: false,
+          setting: false,
+          order: false,
+        }"
+        ref="tableRef"
+        @checked-row-change="onCheckedRow"
+        @order-change="orderByItem"
+        @page-num-change="handlePageNumChange"
+        @page-size-change="handlePageSizeChange"
+        style="height: 800px"
+      >
+        <template #tableTitle>
+          <el-button type="primary" @click="companyAdd">
+            <template #icon>
+              <el-icon>
+                <Plus />
+              </el-icon>
+            </template>
+            添加
+          </el-button>
+        </template>
+      </BasicTable>
+      <div v-if="tableData.length === 0" class="data-none"
+        ><img src="../../../assets/icons/no-content.png" alt="" />
+        <div class="data-none-word">目前无内容，请先添加场景</div></div
+      >
+    </el-card>
+
+    <!-- 添加的抽屉内容 -->
+
+    <!-- 公司 -->
+    <el-drawer class="test" v-model="tableCom" with-header="true" size="35%">
+      <template #header="{ titleId }">
+        <p :id="titleId">{{ companyAddTitle }}</p>
+      </template>
+      <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="90px"
+        class="demo-ruleForm"
+        size="default"
+        status-icon
+      >
+        <el-form-item label="公司名称" prop="name">
+          <el-input v-model="ruleForm.name" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="上级场景" prop="seniorScene">
+          <el-input v-model="ruleForm.seniorScene" style="width: 200px" disabled />
+        </el-form-item>
+        <el-form-item label="公司代码" prop="workshopCode">
+          <el-input v-model="ruleForm.workshopCode" style="width: 200px" />
+        </el-form-item>
+        <el-form-item label="标签&模板" prop="sceneCode">
+          <div style="width: 200px; height: 30px"></div>
+          <div
+            v-for="(item, index) in selectItems"
+            :key="index"
+            style="margin-bottom: 16px; display: flex"
+          >
+            <el-select v-model="item.tag" placeholder="请选择标签" style="width: 126px">
+              <el-option
+                v-for="item1 in options"
+                :key="item1.value"
+                :label="item1.label"
+                :value="item1.value"
+              />
+            </el-select>
+            <img
+              src="../../../assets/icons/link.png"
+              alt=""
+              style="width: 16px; margin-left: 2px; margin-right: 2px" />
+            <el-select v-model="item.template" placeholder="请选择模板" style="width: 126px">
+              <el-option
+                v-for="item2 in options"
+                :key="item2.value"
+                :label="item2.label"
+                :value="item2.value"
+              />
+            </el-select>
+            <img
+              src="../../../assets/icons/close.png"
+              @click="deleScene(index)"
+              alt=""
+              style="
+                width: 13px;
+                height: 13px;
+                margin-top: 10px;
+                margin-left: 3px;
+                cursor: pointer;
+              "
+          /></div>
+          <div style="width: 200px">
+            <el-icon size="28px" @click="addChange" style="cursor: pointer"><CirclePlus /></el-icon
+          ></div>
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="addEnable" active-value="1" inactive-value="0" class="switchUse" />
+        </el-form-item>
+      </el-form>
+      <div style="position: absolute; left: 108px; bottom: 67px">
+        <el-button v-if="companyAddTitle === '添加公司'" type="warning" @click="resetDraw"
+          >重置</el-button
+        >
+        <el-button type="primary" v-if="companyAddTitle === '添加公司'" @click="addNewTypeCom">
+          提交
+        </el-button>
+        <el-button type="primary" v-if="companyAddTitle !== '添加公司'" @click="editedSub">
+          提交
+        </el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 车间和工位 -->
+
+    <el-drawer class="test" v-model="table" with-header="true" size="35%">
+      <template #header="{ titleId }">
+        <p :id="titleId">{{ addTitle }}</p>
+      </template>
+      <el-form
+        ref="ruleFormRef"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="120px"
+        class="demo-ruleForm"
+        size="default"
+        status-icon
+      >
+        <el-form-item :label="`${addName}`" prop="name">
+          <el-input v-model="ruleForm.name" />
+        </el-form-item>
+        <el-form-item label="上级场景" prop="seniorScene">
+          <el-input v-model="ruleForm.seniorScene" disabled />
+        </el-form-item>
+        <el-form-item label="车间代码" prop="workshopCode">
+          <el-input v-model="ruleForm.workshopCode" />
+        </el-form-item>
+        <el-form-item v-if="level === 0" label="场景标签" prop="tagWorkshop">
+          <el-radio-group
+            v-model="ruleForm.tagWorkshop"
+            size="10px"
+            style="display: flex; justify-content: space-between"
+          >
+            <el-radio-button :label="item" :key="item" v-for="item in tagList" class="tag-select" />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="level === 0" label="车间模板" prop="templateWorkshop">
+          <el-radio-group
+            v-model="ruleForm.templateWorkshop"
+            size="10px"
+            style="display: flex; justify-content: space-between"
+          >
+            <el-radio-button
+              :label="item"
+              :key="item"
+              v-for="item in templateList"
+              class="tag-select"
+            />
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item v-if="level === 1" label="负责人" prop="leader">
+          <el-input v-model="ruleForm.leader" />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch v-model="addEnable" active-value="1" inactive-value="0" class="switchUse" />
+        </el-form-item>
+      </el-form>
+      <div style="position: absolute; left: 108px; bottom: 67px">
+        <el-button
+          v-if="addTitle === '添加车间' || addTitle === '添加工位'"
+          type="warning"
+          @click="resetDraw"
+          >重置</el-button
+        >
+        <el-button
+          v-if="addTitle === '添加车间' || addTitle === '添加工位'"
+          type="primary"
+          @click="addNewType"
+        >
+          提交
+        </el-button>
+        <el-button
+          v-if="addTitle === '编辑车间' || addTitle === '编辑工位'"
+          type="primary"
+          @click="editedSub"
+        >
+          提交
+        </el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 编辑的抽屉内容 -->
+    <!-- <el-drawer class="test" v-model="editDrawerVisible" with-header="true" size="40%">
+      <template #header="{ titleId }">
+        <p :id="titleId">编辑场景</p>
+      </template>
+      <el-form
+        ref="ruleFormRef2"
+        :model="ruleForm2"
+        :rules="rules2"
+        label-width="120px"
+        class="demo-ruleForm"
+        size="default"
+        status-icon
+      >
+        <el-form-item label="场景名称" prop="name">
+          <el-input v-model="ruleForm2.name" />
+        </el-form-item>
+        <el-form-item v-if="level === 1" label="场景标签" prop="tag">
+          <el-input v-model="ruleForm2.tag" />
+        </el-form-item>
+        <el-form-item label="场景代码" prop="code">
+          <el-input v-model="ruleForm2.code" />
+        </el-form-item>
+      </el-form>
+      <div style="position: absolute; left: 108px; bottom: 67px">
+        <el-button type="primary" @click="editedSub"> 提交 </el-button>
+      </div>
+    </el-drawer> -->
+  </page-wrapper>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted, reactive, h, watch } from 'vue';
+  import { Plus, CirclePlus } from '@element-plus/icons-vue';
+  import { BasicTable, BasicColumn } from '@/components/Table';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { ElMessageBox } from 'element-plus';
+  import ActionColomn from './actionColomns.vue';
+  import {
+    User,
+    colomns,
+    dataSourceWithParent,
+    deleteTableRow,
+    editTableRow,
+    findItemLevel,
+    options,
+    tableData,
+    updateData,
+  } from './constant';
+  import {
+    ComAddDatas,
+    companyAdd,
+    companyEdit,
+    companyDel,
+    workshopAddDatas,
+    workshopAdd,
+    workshopEdit,
+    workshopDel,
+    workspaceAddDatas,
+    workspaceAdd,
+    workspaceEdit,
+    workspaceDel,
+    sceneListType,
+    getListWorkshop,
+    getSceneList,
+  } from '@/api/scene/sceneOperate';
+
+  const total = ref<number>(100);
+  const pageSize = ref<number>(10);
+
+  onMounted(() => {
+    //添加父级，主要用于排序功能
+    dataSourceWithParent(tableData.value, null);
+    // console.log(tableData.value);
+  });
+
+  //用于新增数据后，将新增数据加入父级
+  watch(
+    tableData.value,
+    () => {
+      dataSourceWithParent(tableData.value, null);
+      console.log(tableData.value);
+    },
+    { deep: true },
+  );
+
+  function onCheckedRow(rowKeys) {
+    console.log(rowKeys);
+  }
+
+  const orderByItem = () => {};
+  const handlePageNumChange = () => {};
+  const handlePageSizeChange = () => {};
+
+  //添加组件的添加功能
+  const table = ref(false); //添加公司级的场景
+  const tableCom = ref(false); //添加车间或者工位
+
+  //添加公司级场景
+
+  const companyAddTitle = ref('添加公司');
+
+  const companyAdd = () => {
+    tableCom.value = true;
+    resetDraw();
+    ruleForm.seniorScene = '顶级场景';
+    companyAddTitle.value = '添加公司';
+  };
+
+  //重置编辑框
+  const resetDraw = () => {
+    ruleForm.name = '';
+    // ruleForm.seniorScene = '';
+    ruleForm.workshopCode = '';
+    ruleForm.sceneCode = '';
+    addEnable.value = '1';
+    selectItems.value = [{ tag: '', template: '' }];
+    ruleForm.leader = '';
+    ruleForm.templateWorkshop = '';
+    ruleForm.tagWorkshop = '';
+  };
+
+  //用于新增场景
+  const selectItems = ref([{ tag: '', template: '' }] as { tag: string; template: string }[]);
+  const addChange = () => {
+    selectItems.value.push({
+      tag: '',
+      template: '',
+    });
+    console.log(selectItems.value);
+  };
+
+  //删除顶级场景的场景
+  const deleScene = (index) => {
+    // console.log('row', index);
+    ElMessageBox.confirm('请确认是否关闭该场景？', '状态关闭', {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+      .then(() => {
+        selectItems.value.splice(index, 1);
+      })
+      .catch(() => {
+        console.log('取消删除物件');
+      });
+  };
+
+  //找出数据中的全部code
+  const flattenCodes = (data) => {
+    const codes = [];
+    const traverse = (node) => {
+      codes.push(node.code);
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(traverse);
+      }
+    };
+    data.forEach(traverse);
+    return codes;
+  };
+
+  //添加公司场景的提交按钮
+  const addNewTypeCom = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+
+    //选出不为空字符串的数据
+    selectItems.value = selectItems.value.filter((item) => {
+      return item.tag && item.template;
+    });
+    ruleForm.tagCom = selectItems.value.map((item) => {
+      return item.tag + '-' + item.template;
+    });
+
+    const newData = {
+      name: ruleForm.name,
+      Toptag: ruleForm.tagCom,
+      code: ruleForm.workshopCode,
+      status: addEnable.value,
+      seniorScene: ruleForm.seniorScene,
+    };
+
+    //取出数据中所有的code数据
+    const allCodes = flattenCodes(tableData.value);
+
+    //判断新数据中是否与原有的code重复
+    if (allCodes.indexOf(ruleForm.workshopCode) > -1) {
+      ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'error',
+      })
+        .then(() => {
+          ruleForm.workshopCode = '';
+        })
+        .catch(() => {
+          console.log('取消删除物件');
+        });
+    } else {
+      tableData.value.push(newData);
+      resetDraw();
+      tableCom.value = false;
+    }
+  };
+
+  //新增工位或者车间的提交按钮
+  const addNewType = (formEl: FormInstance | undefined) => {
+    if (!formEl) return;
+    const newData = {
+      name: ruleForm.name,
+      seniorScene: ruleForm.seniorScene,
+      tag: ruleForm.tagWorkshop,
+      code: ruleForm.workshopCode,
+      templeteRoom: ruleForm.templateWorkshop,
+      status: addEnable.value,
+      leader: ruleForm.leader,
+      Toptag: tagList.value,
+    };
+    const allCodes = flattenCodes(tableData.value);
+
+    if (allCodes.indexOf(ruleForm.workshopCode) > -1) {
+      ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'error',
+      })
+        .then(() => {
+          ruleForm.sceneCode = '';
+        })
+        .catch(() => {
+          console.log('取消删除物件');
+        });
+    } else {
+      updateData(tableData.value, ruleForm.seniorScene, newData);
+      resetDraw();
+      table.value = false;
+    }
+  };
+
+  // 新增类型的参数值
+  const addEnable = ref('1'); //启动按钮的值
+
+  //表格中的规则
+  const ruleFormRef = ref<FormInstance>();
+
+  interface RuleForm {
+    name: string; //名称
+    seniorScene: string; //上级场景
+    workshopCode: string; //代码
+    sceneCode: string; //场景代码
+    tagCom?: string[]; //公司场景标签 可选多个
+    templateCom?: string[]; //公司场景模板 可选多个
+    tagWorkshop?: string; //场景标签  车间
+    templateWorkshop?: string; //车间模板
+    leader?: string; //负责人
+  }
+  const ruleForm = reactive<RuleForm>({
+    name: '',
+    seniorScene: '',
+    workshopCode: '',
+    sceneCode: '',
+    tagCom: [],
+    templateCom: [],
+    tagWorkshop: '',
+    templateWorkshop: '',
+    leader: '',
+  });
+  const rules = reactive<FormRules<RuleForm>>({
+    name: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+    seniorScene: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    workshopCode: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    sceneCode: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    tagCom: [{ required: true, message: '', trigger: 'blur' }],
+    templateCom: [{ required: true, message: '', trigger: 'blur' }],
+    tagWorkshop: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    templateWorkshop: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    leader: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+  });
+
+  //编辑规则
+  const ruleFormRef2 = ref<FormInstance>();
+
+  interface RuleForm2 {
+    name: string;
+    tag: string;
+    code: string;
+  }
+  const ruleForm2 = reactive<RuleForm2>({
+    name: '',
+    tag: '',
+    code: '',
+  });
+  const rules2 = reactive<FormRules2<RuleForm2>>({
+    name: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 3 to 5', trigger: 'blur' },
+    ],
+    tag: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+    code: [
+      { required: true, message: '', trigger: 'blur' },
+      { min: 1, max: 100, message: 'Length should be 1 to 100', trigger: 'blur' },
+    ],
+  });
+
+  //操作列
+  const actionColumn: BasicColumn = reactive({
+    width: 350,
+    label: '操作',
+    prop: 'booking',
+    key: 'action',
+    fixed: 'right',
+    render(record) {
+      return h(ActionColomn, {
+        subItem: record.row,
+        handleConig: handleConfig,
+        handleAdd: handleAdd,
+        handleEdit: handleEdit,
+        handleDelete: handleDelete,
+        handleUp: rowUp,
+        handleDown: rowDown,
+      });
+    },
+  });
+
+  //表单中的Operations
+
+  //页面设置函数
+  const handleConfig = (row) => {
+    console.log(row);
+  };
+
+  const addTitle = ref('');
+  const addName = ref('');
+  const level = ref<number>();
+
+  const handleAdd = (row) => {
+    console.log(row);
+    console.log(row.code);
+
+    //得出当前的数据的层级
+    level.value = findItemLevel(tableData.value, row.code);
+    console.log('level', level.value);
+
+    if (level.value === 0) {
+      addTitle.value = '添加车间';
+      addName.value = '车间名称';
+    } else if (level.value === 1) {
+      addTitle.value = '添加工位';
+      addName.value = '工位名称';
+    } else {
+      return;
+    }
+    resetDraw();
+
+    table.value = true;
+    ruleForm.seniorScene = row.name;
+    tagList.value = row?.Toptag;
+  };
+
+  //添加车间中的场景标签
+  const tagList = ref(['生产安全', '安全环保', '物流安全', '园区生活']);
+  const templateList = ['厂房', '危险点', '食堂', '停车场'];
+
+  const editedItem = ref<User>({} as User);
+
+  // 在这里实现删除行的函数
+
+  const handleDelete = (row: Recordable) => {
+    console.log('row', row);
+    if (row.children?.length > 0) {
+      ElMessageBox.confirm('存在下级场景，无法删除该场景', '无法删除该条信息', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'error',
+      })
+        .then(() => {
+          console.log('存在子集');
+        })
+        .catch(() => {
+          console.log('取消删除物件');
+        });
+    } else {
+      ElMessageBox.confirm('确认要删除该场景吗', {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          if (row && row.name) {
+            deleteTableRow(tableData.value, row.name);
+          }
+          // console.log('确认删除物件');
+          // const deleteData = {
+          //   partTypeId: row.partTypeId,
+          //   isDelete: '1',
+          // } as PartDeleteData;
+          // console.log(deleteData);
+          // deletePartType(deleteData);
+        })
+        .catch(() => {
+          console.log('取消删除物件');
+        });
+    }
+  };
+
+  const handleEdit = (row) => {
+    editedItem.value = { ...row }; // 将当前行的内容拷贝到 editedItem 中，以便编辑
+    level.value = findItemLevel(tableData.value, row.code);
+    if (level.value === 0) {
+      tableCom.value = true;
+      companyAddTitle.value = '编辑公司';
+      selectItems.value = [];
+
+      if (row.Toptag && Array.isArray(row.Toptag)) {
+        selectItems.value = row.Toptag.map((item) => ({
+          tag: item.split('-')[0],
+          template: item.split('-')[1],
+        }));
+      }
+      ruleForm.name = editedItem.value.name!;
+      ruleForm.seniorScene = editedItem.value.seniorScene!;
+      ruleForm.workshopCode = editedItem.value.code!;
+      addEnable.value = editedItem.value.status!;
+
+      // ruleForm.seniorScene = editedItem.value.Toptag!;
+    } else if (level.value === 1) {
+      level.value = level.value - 1;
+      addTitle.value = '编辑车间';
+      addName.value = '车间名称';
+      table.value = true;
+      ruleForm.name = editedItem.value.name!;
+      ruleForm.seniorScene = editedItem.value.seniorScene!;
+      ruleForm.workshopCode = editedItem.value.code!;
+      addEnable.value = editedItem.value.status!;
+      ruleForm.tagWorkshop = editedItem.value.tag;
+      ruleForm.templateWorkshop = editedItem.value.templeteRoom;
+      tagList.value = editedItem.value.Toptag!;
+    } else if (level.value === 2) {
+      level.value = level.value - 1;
+      addTitle.value = '编辑工位';
+      addName.value = '工位名称';
+      table.value = true;
+      ruleForm.name = editedItem.value.name!;
+      ruleForm.seniorScene = editedItem.value.seniorScene!;
+      ruleForm.workshopCode = editedItem.value.code!;
+      ruleForm.leader = editedItem.value.leader!;
+    }
+
+    // editedItem.value = { ...row }; // 将当前行的内容拷贝到 editedItem 中，以便编辑
+    // ruleForm2.name = editedItem.value.name!;
+    // ruleForm2.tag = editedItem.value.tag!;
+    // ruleForm2.code = editedItem.value.code!;
+    // level.value = findItemLevel(tableData.value, row.code);
+    // editDrawerVisible.value = true;
+  };
+
+  const editDrawerVisible = ref(false);
+
+  //编辑时的提交按钮功能
+
+  const editedSub = () => {
+    // const editedData = {
+    //   typeName: editedItem.value.typeName,
+    //   partTypeId: editedItem.value.partTypeId,
+    //   enable: editedItem.value.enable,
+    //   num: editedItem.value.num,
+    // } as PartEditData;
+    // console.log(editedData);
+    // editPartType(editedData);
+    // editDrawerVisible.value = false;
+    // level.value = findItemLevel(tableData.value, editedItem.value.code);
+    // console.log();
+
+    console.log(2222222222222);
+
+    const allCodes = flattenCodes(tableData.value);
+    console.log('editedItem.value.code', editedItem.value.code);
+    console.log('ruleForm.workshopCode', ruleForm.workshopCode);
+
+    if (allCodes.indexOf(ruleForm.workshopCode) > -1) {
+      if (editedItem.value.code !== ruleForm.workshopCode) {
+        ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
+          confirmButtonText: '确认',
+          cancelButtonText: '取消',
+          type: 'error',
+        })
+          .then(() => {
+            // ruleForm.workshopCode = '';
+            console.log('代码重复');
+          })
+          .catch(() => {
+            console.log('取消删除物件');
+          });
+        return;
+      }
+    }
+    console.log(11111111111);
+    level.value = findItemLevel(tableData.value, editedItem.value.code);
+    console.log('level', level.value);
+
+    if (level.value === 0) {
+      selectItems.value = selectItems.value.filter((item) => {
+        return item.tag && item.template;
+      });
+      ruleForm.tagCom = selectItems.value.map((item) => {
+        return item.tag + '-' + item.template;
+      });
+
+      editTableRow(
+        tableData.value,
+        level.value,
+        editedItem.value.name,
+        ruleForm.name,
+        ruleForm.workshopCode,
+        addEnable.value,
+        '',
+        '',
+        '',
+        ruleForm.tagCom!,
+      );
+
+      tableCom.value = false;
+    } else if (level.value === 1) {
+      console.log(111111, ruleForm.templateWorkshop, ruleForm.tagWorkshop);
+
+      editTableRow(
+        tableData.value,
+        level.value,
+        editedItem.value.name,
+        ruleForm.name,
+        ruleForm.workshopCode,
+        addEnable.value,
+        '',
+        ruleForm.templateWorkshop,
+        ruleForm.tagWorkshop,
+        [],
+      );
+      table.value = false;
+    } else if (level.value === 2) {
+      editTableRow(
+        tableData.value,
+        level.value,
+        editedItem.value.name,
+        ruleForm.name,
+        ruleForm.workshopCode,
+        addEnable.value,
+        ruleForm.leader,
+        '',
+        '',
+        [],
+      );
+      table.value = false;
+    }
+  };
+  //表单中的启动状态
+  // const handleSwitchChange = (_row: PartItem) => {
+  //   // row.enable = row.enable === '1' ? '0' : '1';
+  //   // const editData = {
+  //   //   partTypeId: row.partTypeId,
+  //   //   enable: row.enable,
+  //   // };
+  //   // console.log(editData);
+  //   // editPartType(editData);
+  // };
+
+  //向上排序
+  const rowUp = (row) => {
+    if (row.parent) {
+      const parentIndex = row.parent.children!.indexOf(row);
+      if (parentIndex > 0) {
+        const previousRow = row.parent.children![parentIndex - 1];
+        // 进行交换位置
+        row.parent.children!.splice(parentIndex - 1, 2, row, previousRow);
+      }
+    } else {
+      const index = tableData.value.indexOf(row);
+      if (index > 0) {
+        tableData.value.splice(index - 1, 2, row, tableData.value[index - 1]);
+      }
+    }
+  };
+
+  //向下排序
+  const rowDown = (row) => {
+    if (row.parent) {
+      const parentIndex = row.parent.children!.indexOf(row);
+      if (parentIndex < row.parent.children?.length - 1) {
+        const behindRow = row.parent.children![parentIndex + 1];
+        // 进行交换位置
+        row.parent.children!.splice(parentIndex, 2, behindRow, row);
+      }
+    } else {
+      const index = tableData.value.indexOf(row);
+      if (index < tableData.value.length - 1) {
+        tableData.value.splice(index, 2, tableData.value[index + 1], row);
+      }
+    }
+    // }
+  };
+</script>
+
+<style scoped>
+  /* .card{
+    displa;
+  } */
+
+  .data-none {
+    position: absolute;
+    /* left: 383px; */
+    right: 492px;
+    top: 200px;
+  }
+
+  .data-none-word {
+    width: 264px;
+    height: 30px;
+    font-size: 22px;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 30px;
+    margin-left: 61px;
+  }
+
+  .cark-line {
+    margin-top: 16px;
+  }
+  .caret-rotate {
+    transition: transform 0.3s linear;
+    transform: rotate(0deg);
+  }
+  .caret-collapse {
+    transform: rotate(180deg);
+  }
+  .space-collapse {
+    height: 0;
+    overflow: hidden;
+    transition: all 0.3s linear;
+  }
+  .space-open {
+    height: 100px;
+  }
+  .contentName {
+    margin-bottom: 50px;
+  }
+  .contentOne {
+    margin-right: 40px;
+  }
+  .contentNum {
+    margin-bottom: 50px;
+  }
+  .contentTwo {
+    margin-right: 12px;
+  }
+
+  .titleId {
+    font-size: 30px;
+    text-align: left;
+    margin-left: 20px;
+  }
+
+  .showBody {
+    display: flex;
+    width: 100%;
+    padding-bottom: 50px;
+    align-items: center;
+  }
+  .addContent {
+    width: 300px;
+  }
+
+  .showContent {
+    margin-right: 20px;
+  }
+
+  .switchContent {
+    display: flex;
+    margin-bottom: 50px;
+    align-items: center;
+  }
+
+  .tag-select {
+    margin-right: 10px;
+    margin-bottom: 10px;
+    /* background: #ffffff; */
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+  }
+  /* :deep(.el-table--default .cell) {
+        white-space: nowrap;
+        overflow: auto;
+      } */
+</style>

src/views/dashboard/monitor/use-method.ts

@@ -0,0 +1,189 @@
+import { ref } from 'vue';
+import {
+  sceneListType,
+  getListWorkshop,
+  workspaceAddDatas,
+  labelModuleListType,
+} from '@/api/scene/sceneOperate';
+import { workShopTempleteType } from '@/api/scene/secene-templet';
+
+export const colomns = [
+  { label: '场景名称', prop: 'name', width: 300 },
+  { label: '场景标签', prop: 'companyLabelId', width: 300 },
+  { label: '代码', prop: 'code' },
+];
+
+interface DataSourceUser
+  extends sceneListType<
+    getListWorkshop<workspaceAddDatas, workShopTempleteType>,
+    labelModuleListType
+  > {
+  parent?: sceneListType<
+    getListWorkshop<workspaceAddDatas, workShopTempleteType>,
+    labelModuleListType
+  > | null;
+}
+
+export const dataSourceWithParent = (d: DataSourceUser[], parent: DataSourceUser | null) => {
+  d.forEach((item, _index) => {
+    item.parent = parent;
+
+    if (item.children && item.children?.length > 0) {
+      dataSourceWithParent(item.children, item);
+    }
+  });
+
+  return d;
+};
+
+export const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+];
+
+//用于新增数据
+export const updateData = (data, targetId, newAdd) => {
+  for (let i = 0; i < data.length; i++) {
+    const currentItem = data[i];
+
+    if (currentItem.id === targetId) {
+      if (!currentItem.children) {
+        currentItem.children = [];
+      }
+      currentItem.children.push(newAdd);
+      return true; // 表示已经找到并修改
+    }
+
+    // 如果有子项，递归查找
+    if (currentItem.children && currentItem.children.length > 0) {
+      const found = updateData(currentItem.children, targetId, newAdd);
+
+      if (found) {
+        return true; // 如果在子项中找到目标项，停止继续查找
+      }
+    }
+  }
+
+  return false; // 表示未找到目标项
+};
+
+//判断该条数据的层级
+export const findItemLevel = (data, targetId, targetName, currentLevel = 0) => {
+  for (let i = 0; i < data.length; i++) {
+    console.log('i', i);
+
+    const item = data[i];
+
+    if (item.id === targetId && item.name === targetName) {
+      return currentLevel;
+    }
+
+    if (item.children && item.children.length > 0) {
+      const childLevel = findItemLevel(item.children, targetId, targetName, currentLevel + 1);
+      if (childLevel !== -1) {
+        return childLevel;
+      }
+    }
+  }
+
+  return -1;
+};
+
+//删除行
+export const deleteTableRow = (dataSource, targetId) => {
+  const deleteRecursive = (data) => {
+    for (let i = 0; i < data.length; i++) {
+      const currentItem = data[i];
+
+      if (currentItem.id === targetId) {
+        // 删除当前项
+        data.splice(i, 1);
+        return true;
+      }
+
+      // 如果有子项，递归查找
+      if (currentItem.children && currentItem.children.length > 0) {
+        const found = deleteRecursive(currentItem.children);
+
+        if (found) {
+          return true; // 如果在子项中找到目标项，停止继续查找
+        }
+      }
+    }
+
+    return false; // 表示未找到目标项
+  };
+
+  // 从顶层开始递归删除
+  deleteRecursive(dataSource);
+};
+
+//行的编辑提交功能
+export const editTableRow = (
+  dataSource,
+  targetId,
+  level,
+  name,
+  newName,
+  newCode,
+  newStatus,
+  newLeader = '',
+  newTemplete = '',
+  newTag = 0,
+  newToptag = [] as unknown as string[],
+) => {
+  const editTRecursive = (data) => {
+    for (let i = 0; i < data.length; i++) {
+      const currentItem = data[i];
+
+      if (currentItem.id === targetId) {
+        // 修改
+        currentItem.name = newName;
+        currentItem.code = newCode;
+        currentItem.status = newStatus;
+        if (level === 0) {
+          currentItem.Toptag = newToptag;
+        } else if (level === 1) {
+          currentItem.companyLabelId = newTag;
+          currentItem.templete = newTemplete;
+        } else if (level === 2) {
+          currentItem.leader = newLeader;
+        }
+
+        return true;
+      }
+
+      // 如果有子项，递归查找
+      if (currentItem.children && currentItem.children.length > 0) {
+        const found = editTRecursive(currentItem.children);
+
+        if (found) {
+          return true; // 如果在子项中找到目标项，停止继续查找
+        }
+      }
+    }
+    return false; // 表示未找到目标项
+  };
+
+  editTRecursive(dataSource);
+};
+
+// export const convertArray = (inputArray) => {
+//   return inputArray.map((item) => {
+//     const [start, end] = item.split('-');
+//     console.log(start, end);
+
+//     return { tag: start, templete: end };
+//   });
+// };
+
+export enum ENABLED {
+  FALSE = 1,
+  TRUE = 0,
+}

src/views/dashboard/monitor/use-scene.ts

@@ -0,0 +1,26 @@
+import {
+  workspaceAddDatas,
+  sceneListType,
+  getListWorkshop,
+  getSceneList,
+  labelModuleListType,
+} from '@/api/scene/sceneOperate';
+import { workShopTempleteType } from '@/api/scene/secene-templet';
+import { ref } from 'vue';
+
+export function useScene() {
+  //场景数据
+  const tableData = ref<
+    sceneListType<getListWorkshop<workspaceAddDatas, workShopTempleteType>, labelModuleListType>[]
+  >([]);
+
+  const getSceneDetail = () => {
+    getSceneList().then((res) => {
+      tableData.value = res;
+    });
+  };
+
+  return { tableData, getSceneDetail };
+}
+
+export default useScene;

src/views/dashboard/monitor/use-sence-templete.ts

@@ -0,0 +1,62 @@
+import {
+  sceneLabelType,
+  querySceneLabel,
+  templateType,
+  querytemplate,
+  queryWorkshopModule,
+  WorkshopModuleType,
+} from '@/api/scene/secene-templet';
+import { onMounted, ref } from 'vue';
+
+export function useSceneTemplete() {
+  //场景标签
+  const sceneList = ref<sceneLabelType[]>([]);
+
+  const getSceneLabel = () => {
+    querySceneLabel().then((res) => {
+      console.log(11111122);
+      sceneList.value = res;
+      console.log('sceneList.value', sceneList.value);
+      // sceneList.value = sceneList.value.map((item) => {
+      //   return { id: item.id, name: item.name };
+      // });
+    });
+  };
+
+  //场景模板
+  const templateList = ref<templateType[]>([]);
+
+  const getTemplete = () => {
+    console.log(23333);
+    querytemplate().then((res) => {
+      templateList.value = res;
+      console.log('templateList.value', templateList.value);
+    });
+  };
+
+  //车间模板
+  const workshopTemplateList = ref<WorkshopModuleType[]>([]);
+
+  const getWorkshopTemplete = () => {
+    queryWorkshopModule().then((res) => {
+      workshopTemplateList.value = res;
+    });
+  };
+
+  onMounted(() => {
+    getSceneLabel();
+    getTemplete();
+    getWorkshopTemplete();
+  });
+
+  return {
+    sceneList,
+    getSceneLabel,
+    templateList,
+    getTemplete,
+    workshopTemplateList,
+    getWorkshopTemplete,
+  };
+}
+
+export default useSceneTemplete;