fix

.env.development

@@ -15,10 +15,10 @@ VITE_DROP_CONSOLE = true
 
 # 跨域代理，可以配置多个，请注意不要换行
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
-# VITE_PROXY=[["/api","https://naive-ui-admin"]]
+VITE_PROXY=[["/api","http://192.168.1.102:8800/api"]]
 
 # API 接口地址
-VITE_GLOB_API_URL = http://172.16.23.144:8086
+VITE_GLOB_API_URL = 
 # 图片上传地址
 VITE_GLOB_UPLOAD_URL= http://172.16.23.144:8086
 

mock/_util.ts

@@ -2,7 +2,7 @@ import Mock from 'mockjs';
 
 export function resultSuccess(result, { message = 'ok' } = {}) {
   return Mock.mock({
-    code: 1,
+    code: 200,
     data: result,
     message,
     type: 'success',

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 = (data: number): Promise<number> => {
+  return http.request({
+    url: '/scene/deleteCompany',
+    method: 'DELETE',
+    data,
+  });
+};
+
+// 传入参数类型
+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[]; //创建的多个场景标签
+}
+
+export interface labelListType {
+  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>, labelListType>[]
+> => {
+  return http.request({
+    url: '/scene/getList',
+    method: 'get',
+  });
+};

src/api/scene/secene-templet.ts

@@ -0,0 +1,120 @@
+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[]): Promise<number> => {
+  return http.request({
+    url: '/template/saveCompanyModuleLabelRel',
+    method: 'post',
+    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/enums/httpEnum.ts

@@ -2,7 +2,7 @@
  * @description: 请求结果集
  */
 export enum ResultEnum {
-  SUCCESS = 1,
+  SUCCESS = 200,
   ERROR = 400,
   TIMEOUT = 20011,
   TYPE = 'success',

src/utils/http/axios/index.ts

@@ -227,9 +227,9 @@ const transform: AxiosTransform = {
           type: 'warning',
         })
           // eslint-disable-next-line prettier/prettier
-          .then(() => { })
+          .then(() => {})
           // eslint-disable-next-line prettier/prettier
-          .catch(() => { });
+          .catch(() => {});
         return Promise.reject(error);
       }
     } catch (error) {
@@ -292,6 +292,8 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
 
 export const http = createAxios();
 
+export const userRequest = createAxios({ requestOptions: { apiUrl: 'http://192.168.1.102:8800' } });
+
 // 项目，多个不同 api 地址，直接在这里导出多个
 // src/api ts 里面接口，就可以单独使用这个请求，
 // import { httpTwo } from '@/utils/http/axios'

src/views/dashboard/monitor/addCompany.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/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/constant.ts

@@ -1,26 +1,27 @@
 import { ref } from 'vue';
+import { sceneListType, getListWorkshop, workspaceAddDatas } from '@/api/scene/sceneOperate';
 
 export const colomns = [
   { label: '场景名称', prop: 'name', width: 300 },
-  { label: '场景标签', prop: 'tag', width: 300 },
+  { label: '场景标签', prop: 'companyLabelId', width: 300 },
   { label: '代码', prop: 'code' },
 ];
 
-export interface User {
-  name?: string;
-  tag?: string; //顶级场景下面的场景标签
-  Toptag?: string[]; //公司层面的标签
-  code?: string;
-  hasChildren?: boolean;
-  children?: User[];
-  status?: string;
-  seniorScene?: string;
-  templeteRoom?: string;
-  leader?: string;
-}
-
-interface DataSourceUser extends User {
-  parent?: User | null;
+// export interface User {
+//   name?: string;
+//   tag?: string; //顶级场景下面的场景标签
+//   Toptag?: string[]; //公司层面的标签
+//   code?: string;
+//   hasChildren?: boolean;
+//   children?: User[];
+//   status?: string;
+//   seniorScene?: string;
+//   templeteRoom?: string;
+//   leader?: string;
+// }
+
+interface DataSourceUser extends sceneListType<getListWorkshop<workspaceAddDatas>> {
+  parent?: sceneListType<getListWorkshop<workspaceAddDatas>> | null;
 }
 
 export const dataSourceWithParent = (d: DataSourceUser[], parent: DataSourceUser | null) => {
@@ -179,8 +180,8 @@ export const editTableRow = (
   newCode,
   newStatus,
   newLeader = '',
-  newTempleteRoom = '',
-  newTag = '',
+  newTemplete = '',
+  newTag = 0,
   newToptag = [] as unknown as string[],
 ) => {
   const editTRecursive = (data) => {
@@ -195,8 +196,8 @@ export const editTableRow = (
         if (level === 0) {
           currentItem.Toptag = newToptag;
         } else if (level === 1) {
-          currentItem.tag = newTag;
-          currentItem.templeteRoom = newTempleteRoom;
+          currentItem.companyLabelId = newTag;
+          currentItem.templete = newTemplete;
         } else if (level === 2) {
           currentItem.leader = newLeader;
         }
@@ -227,3 +228,8 @@ export const editTableRow = (
 //     return { tag: start, templete: end };
 //   });
 // };
+
+export enum ENABLED {
+  FALSE = 0,
+  TRUE = 1,
+}

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/monitor.vue

@@ -6,7 +6,6 @@
         :data-source="tableData"
         :row-key="(row) => row.name"
         :action-column="actionColumn"
-        :pagination="{ total: total, pageSize: pageSize }"
         :tableSetting="{
           width: 200,
           size: false,
@@ -62,8 +61,8 @@
         <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 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>
@@ -74,26 +73,26 @@
           >
             <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"
+                v-for="item1 in sceneList"
+                :key="item1.id"
+                :label="item1.name"
+                :value="item1.id"
               />
             </el-select>
             <img
-              src="../../../assets/icons/link.png"
+              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"
+                v-for="item2 in templateList"
+                :key="item2.id"
+                :label="item2.name"
+                :value="item2.id"
               />
             </el-select>
             <img
-              src="../../../assets/icons/close.png"
+              src="@/assets/icons/close.png"
               @click="deleScene(index)"
               alt=""
               style="
@@ -146,8 +145,8 @@
         <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 label="车间代码" prop="code">
+          <el-input v-model="ruleForm.code" />
         </el-form-item>
         <el-form-item v-if="level === 0" label="场景标签" prop="tagWorkshop">
           <el-radio-group
@@ -165,15 +164,16 @@
             style="display: flex; justify-content: space-between"
           >
             <el-radio-button
-              :label="item"
-              :key="item"
-              v-for="item in templateList"
+              :label="item.name"
+              :key="item.id"
+              :value="item.id"
+              v-for="item in workshopTemplateList"
               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 v-if="level === 1" label="负责人" prop="principal">
+          <el-input v-model="ruleForm.principal" />
         </el-form-item>
         <el-form-item label="状态">
           <el-switch v-model="addEnable" active-value="1" inactive-value="0" class="switchUse" />
@@ -202,35 +202,6 @@
         </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>
 
@@ -242,25 +213,135 @@
   import { ElMessageBox } from 'element-plus';
   import ActionColomn from './actionColomns.vue';
   import {
-    User,
+    ENABLED,
     colomns,
-    convertArray,
     dataSourceWithParent,
     deleteTableRow,
     editTableRow,
     findItemLevel,
     options,
-    tableData,
     updateData,
   } from './constant';
+  import {
+    ComAddDatas,
+    addCompany,
+    editCompany,
+    delCompany,
+    workshopAddDatas,
+    addWorkshop,
+    editWorkshop,
+    delWorkshop,
+    workspaceAddDatas,
+    addWorkspace,
+    editWorkspace,
+    delWorkspace,
+    sceneListType,
+    getListWorkshop,
+    getSceneList,
+  } from '@/api/scene/sceneOperate';
+  import useScene from './use-scene';
+  import { addCompanyModuleLabel } from '@/api/scene/secene-templet';
+  import useSceneTemplete from './use-sence-templete';
+
+  const useSceneList = useScene();
+  const { tableData, getSceneDetail } = useSceneList;
+  const useSceneTempleteDetail = useSceneTemplete();
+  const {
+    sceneList,
+    getSceneLabel,
+    templateList,
+    getTemplete,
+    workshopTemplateList,
+    getWorkshopTemplete,
+  } = useSceneTempleteDetail;
+
+  // 新增类型的参数值
+  const addEnable = ref(ENABLED.TRUE); //启动按钮的值
+
+  //表格中的规则
+  const ruleFormRef = ref<FormInstance>();
+
+  interface RuleForm {
+    name: string; //名称
+    seniorScene: string; //上级场景
+    code: string; //代码
+    sceneCode: string; //场景代码
+    tagCom?: string[]; //公司场景标签 可选多个
+    templateCom?: string[]; //公司场景模板 可选多个
+    tagWorkshop?: string; //场景标签  车间
+    templateWorkshop?: string; //车间模板
+    principal?: string; //负责人
+  }
+  const ruleForm = reactive<RuleForm>({
+    name: '',
+    seniorScene: '',
+    code: '',
+    sceneCode: '',
+    tagCom: [],
+    templateCom: [],
+    tagWorkshop: '',
+    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 table = ref(false); //添加公司级的场景
+  const tableCom = ref(false); //添加车间或者工位
 
-  const total = ref<number>(100);
-  const pageSize = ref<number>(10);
+  //添加公司级场景
+
+  const companyAddTitle = ref('添加公司');
+
+  const addTitle = ref('');
+  const addName = ref('');
+  const level = ref<number>();
+
+  // const total = ref<number>(100);
+  // const pageSize = ref<number>(10);
+
+  // const tableData = ref<sceneListType<getListWorkshop<workspaceAddDatas>>[]>([]);
 
   onMounted(() => {
     //添加父级，主要用于排序功能
     dataSourceWithParent(tableData.value, null);
-    // console.log(tableData.value);
+    //获取tableData数据
+    getSceneDetail();
+    //获取标签
+    // getSceneLabel();
+    // getTemplete();
+    // getWorkshopTemplete();
   });
 
   //用于新增数据后，将新增数据加入父级
@@ -281,30 +362,24 @@
   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 = '添加公司';
+    console.log('sceneList', sceneList.value);
+    console.log('templateList', templateList.value);
   };
 
   //重置编辑框
   const resetDraw = () => {
     ruleForm.name = '';
     // ruleForm.seniorScene = '';
-    ruleForm.workshopCode = '';
+    ruleForm.code = '';
     ruleForm.sceneCode = '';
-    addEnable.value = '1';
+    addEnable.value = 1;
     selectItems.value = [{ tag: '', template: '' }];
-    ruleForm.leader = '';
+    ruleForm.principal = '';
     ruleForm.templateWorkshop = '';
     ruleForm.tagWorkshop = '';
   };
@@ -360,32 +435,59 @@
       return item.tag + '-' + item.template;
     });
 
-    const newData = {
+    //取出数据中所有的code数据
+    const allCodes = flattenCodes(tableData.value);
+
+    //新接口中用的newdata
+    const newComData = {
       name: ruleForm.name,
-      Toptag: ruleForm.tagCom,
-      code: ruleForm.workshopCode,
+      code: ruleForm.code,
+      // labelList: ruleForm.tagCom,
       status: addEnable.value,
-      seniorScene: ruleForm.seniorScene,
+      isDeleted: 0,
+      parentId: 0,
     };
+    //提交数据并重置关闭el-draw
+    addCompany(newComData)
+      .then((res) => {
+        //将selectItems加工成保存公司-模板的数据类型
+        const newModuleLabel = selectItems.value.map((item) => {
+          return {
+            companyId: res,
+            isDeleted: 0,
+            sceneLabelId: item.tag, //item.tag
+            sceneModuleId: item.template, ///item.template
+          };
+        });
 
-    //取出数据中所有的code数据
-    const allCodes = flattenCodes(tableData.value);
+        //保存公司-场景标签-场景模板关系
+        addCompanyModuleLabel(newModuleLabel).then(() => {
+          getSceneDetail();
+          resetDraw();
+          tableCom.value = false;
+        });
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+
+    //保存公司-场景标签-场景模板关系
 
     //判断新数据中是否与原有的code重复
-    if (allCodes.indexOf(ruleForm.workshopCode) > -1) {
+    if (allCodes.indexOf(ruleForm.code) > -1) {
       ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
         type: 'error',
       })
         .then(() => {
-          ruleForm.workshopCode = '';
+          ruleForm.code = '';
         })
         .catch(() => {
           console.log('取消删除物件');
         });
     } else {
-      tableData.value.push(newData);
+      tableData.value.push(newComData);
       resetDraw();
       tableCom.value = false;
     }
@@ -394,19 +496,73 @@
   //新增工位或者车间的提交按钮
   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,
-    };
+
+    console.log('ruleForm.tagWorkshop', ruleForm.tagWorkshop);
+
+    level.value = findItemLevel(tableData.value, editedItem.value.code);
+    const newAddData = ref({});
+    if (level.value === 0) {
+      console.log(111);
+      const tegNum = tagList.value.indexOf(ruleForm.tagWorkshop!);
+      newAddData.value = {
+        code: ruleForm.code,
+        companyId: editedItem.value.id,
+        sceneLabelId: tegNum,
+        isDeleted: 0,
+        name: ruleForm.name,
+        status: addEnable.value,
+        templete: ruleForm.templateWorkshop,
+      };
+    } else {
+      console.log(22222);
+      newAddData.value = {
+        code: ruleForm.code,
+        workshopId: editedItem.value.id,
+        isDeleted: 0,
+        name: ruleForm.name,
+        principal: ruleForm.principal,
+        status: addEnable.value,
+      };
+    }
+
+    //添加上传接口
+    //   addWorkspace(newAddData.value)
+    //     .then(() => {
+    //       getSceneDetail();
+    //       resetDraw();
+    //       table.value = false;
+    //     })
+    //     .catch((err) => {
+    //       console.log(err);
+    //     });
+    // }
+
+    // const tegNum = tagList.value.indexOf(ruleForm.tagWorkshop!);
+    // console.log('tegNum', tegNum);
+    // const newAddData = {
+    //   code: ruleForm.code,
+    //   companyId: editedItem.value.id,
+    //   sceneLabelId: tegNum,
+    //   isDeleted: 0,
+    //   name: ruleForm.name,
+    //   status: addEnable.value,
+    //   templete: ruleForm.templateWorkshop,
+    // };
+
+    //添加车间
+    // addWorkshop(newAddData)
+    //   .then(() => {
+    //     getSceneDetail()
+    //       resetDraw();
+    //       table.value = false;
+    //   })
+    //   .catch((err) => {
+    //     console.log(err);
+    //   });
+
     const allCodes = flattenCodes(tableData.value);
 
-    if (allCodes.indexOf(ruleForm.workshopCode) > -1) {
+    if (allCodes.indexOf(ruleForm.code) > -1) {
       ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
         confirmButtonText: '确认',
         cancelButtonText: '取消',
@@ -419,100 +575,39 @@
           console.log('取消删除物件');
         });
     } else {
-      updateData(tableData.value, ruleForm.seniorScene, newData);
+      updateData(tableData.value, ruleForm.seniorScene, newAddData.value);
       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 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({
@@ -541,13 +636,10 @@
     console.log(row);
   };
 
-  const addTitle = ref('');
-  const addName = ref('');
-  const level = ref<number>();
-
   const handleAdd = (row) => {
     console.log(row);
     console.log(row.code);
+    editedItem.value = { ...row }; // 将当前行的内容拷贝到 editedItem 中，以便编辑
 
     //得出当前的数据的层级
     level.value = findItemLevel(tableData.value, row.code);
@@ -566,19 +658,22 @@
 
     table.value = true;
     ruleForm.seniorScene = row.name;
-    tagList.value = row?.Toptag;
+    tagList.value = row?.labelList;
   };
 
   //添加车间中的场景标签
   const tagList = ref(['生产安全', '安全环保', '物流安全', '园区生活']);
-  const templateList = ['厂房', '危险点', '食堂', '停车场'];
+  // const templateList = ['厂房', '危险点', '食堂', '停车场'];
 
-  const editedItem = ref<User>({} as User);
+  //公司，车间，工位的模板数据
+  const editedItem = ref<ComAddDatas | workshopAddDatas | workspaceAddDatas>({});
 
   // 在这里实现删除行的函数
 
   const handleDelete = (row: Recordable) => {
     console.log('row', row);
+    level.value = findItemLevel(tableData.value, row.code);
+    const newAddData = ref({});
     if (row.children?.length > 0) {
       ElMessageBox.confirm('存在下级场景，无法删除该场景', '无法删除该条信息', {
         confirmButtonText: '确认',
@@ -601,6 +696,22 @@
           if (row && row.name) {
             deleteTableRow(tableData.value, row.name);
           }
+
+          //删除接口的调用
+          // if (level.value === 0) {
+          //   delCompany(row.id).then(() => {
+          //     getSceneDetail();
+          //   });
+          // } else if (level.value === 1) {
+          //   delWorkshop(row.id).then(() => {
+          //     getSceneDetail();
+          //   });
+          // } else {
+          //   delWorkspace(row.id).then(() => {
+          //     getSceneDetail();
+          //   });
+          // }
+
           // console.log('确认删除物件');
           // const deleteData = {
           //   partTypeId: row.partTypeId,
@@ -617,21 +728,25 @@
 
   const handleEdit = (row) => {
     editedItem.value = { ...row }; // 将当前行的内容拷贝到 editedItem 中，以便编辑
+    console.log(' editedItem.value', editedItem.value);
+
     level.value = findItemLevel(tableData.value, row.code);
     if (level.value === 0) {
       tableCom.value = true;
       companyAddTitle.value = '编辑公司';
       selectItems.value = [];
+      console.log('row.labelList', row.labelList);
 
-      if (row.Toptag && Array.isArray(row.Toptag)) {
-        selectItems.value = row.Toptag.map((item) => ({
+      //复原公司选择的场景集合
+      if (row.labelList && Array.isArray(row.labelList)) {
+        selectItems.value = row.labelList.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!;
+      ruleForm.seniorScene = '顶级场景';
+      ruleForm.code = editedItem.value.code!;
       addEnable.value = editedItem.value.status!;
 
       // ruleForm.seniorScene = editedItem.value.Toptag!;
@@ -641,32 +756,26 @@
       addName.value = '车间名称';
       table.value = true;
       ruleForm.name = editedItem.value.name!;
-      ruleForm.seniorScene = editedItem.value.seniorScene!;
-      ruleForm.workshopCode = editedItem.value.code!;
+      ruleForm.seniorScene = editedItem.value.parent.name;
+      ruleForm.code = editedItem.value.code!;
       addEnable.value = editedItem.value.status!;
-      ruleForm.tagWorkshop = editedItem.value.tag;
-      ruleForm.templateWorkshop = editedItem.value.templeteRoom;
-      tagList.value = editedItem.value.Toptag!;
+      ruleForm.tagWorkshop = editedItem.value.parent.labelList[editedItem.value.sceneLabelId];
+      ruleForm.templateWorkshop = editedItem.value.templete!;
+      // 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!;
+      ruleForm.seniorScene = editedItem.value.parent.name;
+      ruleForm.code = editedItem.value.code!;
+      addEnable.value = editedItem.value.status!;
+      ruleForm.principal = editedItem.value.principal!;
     }
-
-    // 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 editDrawerVisible = ref(false);
 
   //编辑时的提交按钮功能
 
@@ -687,10 +796,10 @@
 
     const allCodes = flattenCodes(tableData.value);
     console.log('editedItem.value.code', editedItem.value.code);
-    console.log('ruleForm.workshopCode', ruleForm.workshopCode);
+    console.log('ruleForm.workshopCode', ruleForm.code);
 
-    if (allCodes.indexOf(ruleForm.workshopCode) > -1) {
-      if (editedItem.value.code !== ruleForm.workshopCode) {
+    if (allCodes.indexOf(ruleForm.code) > -1) {
+      if (editedItem.value.code !== ruleForm.code) {
         ElMessageBox.confirm('场景代码重复，请重新填写', '代码重复', {
           confirmButtonText: '确认',
           cancelButtonText: '取消',
@@ -718,16 +827,50 @@
         return item.tag + '-' + item.template;
       });
 
+      //使用接口来编辑
+
+      //选出不为空字符串的数据
+      // selectItems.value = selectItems.value.filter((item) => {
+      //   return item.tag && item.template;
+      // });
+      // ruleForm.tagCom = selectItems.value.map((item) => {
+      //   return item.tag + '-' + item.template;
+      // });
+      // //新增的数据
+      // const editNewCom = {
+      //   name: ruleForm.name,
+      //   code: ruleForm.code,
+      //   labelList: ruleForm.tagCom,
+      //   status: addEnable.value,
+      // };
+      //编辑上传
+      // editCompany(editNewCom).then(() => {
+      //   //保存公司-场景标签-场景模板关系
+      //   const editModuleLabel = selectItems.value.map((item) => {
+      //     return {
+      //       companyId: editedItem.value.id,
+      //       isDeleted: 0,
+      //       sceneLabelId: 0, //item.tag
+      //       sceneModuleId: 0, ///item.template
+      //     };
+      //   });
+      //   addCompanyModuleLabel(editModuleLabel).then(() => {
+      //     getSceneDetail();
+      //     resetDraw();
+      //     tableCom.value = false;
+      //   });
+      // });
+
       editTableRow(
         tableData.value,
         level.value,
         editedItem.value.name,
         ruleForm.name,
-        ruleForm.workshopCode,
+        ruleForm.code,
         addEnable.value,
         '',
         '',
-        '',
+        0,
         ruleForm.tagCom!,
       );
 
@@ -735,30 +878,72 @@
     } else if (level.value === 1) {
       console.log(111111, ruleForm.templateWorkshop, ruleForm.tagWorkshop);
 
+      //用接口来编辑
+      // const tegNum = tagList.value.indexOf(ruleForm.tagWorkshop!);
+      // const editNewWorkshopData = {
+      //   code: ruleForm.code,
+      //   sceneLabelId: tegNum,
+      //   name: ruleForm.name,
+      //   status: addEnable.value,
+      //   templete: ruleForm.templateWorkshop,
+      // };
+
+      //编辑车间并上传
+      // editWorkshop(editNewWorkshopData)
+      //   .then(() => {
+      //     getSceneList().then(() => {
+      //       resetDraw();
+      //       table.value = false;
+      //     });
+      //   })
+      //   .catch((err) => {
+      //     console.log(err);
+      //   });
+
       editTableRow(
         tableData.value,
         level.value,
         editedItem.value.name,
         ruleForm.name,
-        ruleForm.workshopCode,
+        ruleForm.code,
         addEnable.value,
         '',
         ruleForm.templateWorkshop,
-        ruleForm.tagWorkshop,
+        editedItem.value.parent.labelList.indexOf(ruleForm.tagWorkshop),
         [],
       );
       table.value = false;
     } else if (level.value === 2) {
+      //用接口来编辑
+      // const editNewWorkspaceData = {
+      //   code: ruleForm.code,
+      //   name: ruleForm.name,
+      //   status: addEnable.value,
+      //   principal: ruleForm.principal,
+      // };
+
+      // 编辑车间并上传
+      // editWorkspace(editNewWorkspaceData)
+      //   .then(() => {
+      //     getSceneList().then(() => {
+      //       resetDraw();
+      //       table.value = false;
+      //     });
+      //   })
+      //   .catch((err) => {
+      //     console.log(err);
+      //   });
+
       editTableRow(
         tableData.value,
         level.value,
         editedItem.value.name,
         ruleForm.name,
-        ruleForm.workshopCode,
+        ruleForm.code,
         addEnable.value,
-        ruleForm.leader,
-        '',
+        ruleForm.principal,
         '',
+        0,
         [],
       );
       table.value = false;

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

@@ -0,0 +1,26 @@
+import {
+  workspaceAddDatas,
+  sceneListType,
+  getListWorkshop,
+  getSceneList,
+  labelListType,
+} 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>, labelListType>[]
+  >([]);
+
+  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;