样式调整

src/api/config/config.ts

@@ -0,0 +1,114 @@
+import { http } from '@/utils/http/axios';
+
+//删除公司主页布局
+export const delCompanyLayout = (layoutld: number) => {
+  return http.request({
+    url: `/homepageConfig/deleteCompanyLayout?layoutld=${layoutld}`,
+    method: 'DELETE',
+  });
+};
+// /homepageConfig/CLLaaegimnoopstttuyy;
+//   /homepageConfig/deleteCompanyLayout
+// Promise<SceneLabelByCompanyType[]>;
+
+export interface CompanyLayoutDetail {
+  id?: number;
+  viewType?: number;
+  targetId?: number;
+  name?: string;
+  labelId?: number;
+  layout?: number; //后面修改
+  version?: string;
+  status?: number;
+  createdAt?: string;
+  updatedAt?: string;
+  isDeleted?: number;
+}
+
+////查询公司主页布局
+export const getCompanyLayout = (params: string | null) => {
+  return http.request<CompanyLayoutDetail[]>({
+    url: `/homepageConfig/getCompanyLayoutList`,
+    method: 'get',
+    params,
+  });
+};
+
+// /homepageConfig/saveCompanyLayout
+
+export interface CompanyLayoutSave {
+  layout?: number; //后面修改
+  labelId?: number;
+  version?: string;
+  status?: number;
+  viewType?: number;
+  targetId?: number;
+  id?: number;
+}
+
+//新建公司主页布局
+export const saveCompanyLayout = (data: CompanyLayoutSave) => {
+  return http.request({
+    url: `/homepageConfig/saveCompanyLayout`,
+    method: 'post',
+    data,
+  });
+};
+
+//更新公司主页布局
+export const updateCompanyLayout = (data: CompanyLayoutSave) => {
+  return http.request({
+    url: `/homepageConfig/updateCompanyLayout`,
+    method: 'put',
+    data,
+  });
+};
+
+export interface WorkshopPic {
+  deleteFileName?: string;
+  workshopld?: number;
+  file?: File;
+}
+
+//上传车间缩略图   会返回图片的名字
+export const uploadWorkshopPicture = (data: WorkshopPic) => {
+  return http.request({
+    url: `/homepageConfig/uploadWorkshopPicture`,
+    method: 'post',
+    data,
+  });
+};
+
+//更新车间缩略图
+export const updateWorkshopPicture = (data: WorkshopPic) => {
+  return http.request({
+    url: `/homepageConfig/updateWorkshopPicture`,
+    method: 'post',
+    data,
+  });
+};
+
+export interface CompanyPic {
+  companyld?: number;
+  deleteFileName?: string;
+  labelld?: number;
+  file?: File;
+}
+
+//上传公司缩略图   会返回图片的名字
+export const uploadCompanyPicture = (data: CompanyPic) => {
+  return http.request({
+    url: `/homepageConfig//uploadCompanyPicture`,
+    method: 'post',
+    data,
+  });
+};
+
+//更新车间缩略图
+export const updateCompanyPicture = (data: CompanyPic) => {
+  return http.request({
+    url: `/homepageConfig/updateCompanyPicture`,
+    method: 'post',
+    data,
+  });
+};

src/views/page-config/ConfigEidt.vue

@@ -1,7 +1,6 @@
 <template>
   <div style="position: relative">
     <div class="top-content">
-      <!-- <el-card :bordered="false" class="proCard" style="position: relative; padding: 0px"> -->
       <div style="display: flex; position: relative">
         <img src="~@/assets/icons/back.png" alt="" @click="backPage" class="back-btn" />
         <el-select
@@ -9,6 +8,7 @@
           class="m-2"
           placeholder="请选择相关公司"
           style="width: 216px"
+          @change="changeCom"
         >
           <el-option
             v-for="item in companyList"
@@ -45,10 +45,12 @@
             <el-button :icon="Refresh" plain class="btn-top-refresh">替换照片</el-button>
           </template>
         </el-upload>
-        <!-- <el-button type="info" :icon="Refresh" plain class="btn-top-refresh" @click="replacePic"
-          >替换照片</el-button
-        > -->
-        <el-button type="info" plain class="btn-top-save" @click="saveConfig">保存为主页</el-button>
+        <el-button v-if="saveSwitch" type="info" plain class="btn-top-save" @click="saveConfigPage"
+          >保存为主页</el-button
+        >
+        <el-button v-else type="info" plain class="btn-top-save" @click="saveConfigMap"
+          >保存为地图</el-button
+        >
         <!-- <div>按钮</div> -->
       </div>
     </div>
@@ -121,14 +123,22 @@
       ref="configDrawer"
       :title="configTitle"
       @on-close="onClose"
+      @save-config="saveConfig"
       class="drawer-position"
     />
+    <ConfigFinish
+      :visible="visibleResult"
+      :status="configStatus"
+      @on-close="closeResult"
+      class="feedback-position"
+    />
   </div>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { Refresh, Search, ArrowLeftBold, House } from '@element-plus/icons-vue';
   import ConfigDialog from './component/ConfigDrawer.vue';
+  import ConfigFinish from './component/ConfigFinish.vue';
   //   import { picList } from '../constant';
   import { labelList, companyList, workshopList } from './constant';
   import { ElMessage, genFileId } from 'element-plus';
@@ -137,10 +147,10 @@
   import { useRouter } from 'vue-router';
   const router = useRouter();
 
-  const props = defineProps<{
-    pageShow: boolean;
-    // workshopTemplateList: WorkshopModuleType[];
-  }>();
+  // const props = defineProps<{
+  //   pageShow: boolean;
+  //   // workshopTemplateList: WorkshopModuleType[];
+  // }>();
 
   //   const emit = defineEmits<{
   //     // (e: 'update:modelValue'): unknown;
@@ -153,8 +163,25 @@
 
   const searchWorkshop = ref('');
 
+  const saveSwitch = ref<boolean>(true);
+
+  const changeCom = () => {
+    saveSwitch.value = true;
+  };
+  const configStatus = ref(true);
   // const replacePic = () => {};
-  const saveConfig = () => {
+  const saveConfigPage = () => {
+    saveSwitch.value = false;
+    // router.push('/page-config/config');
+  };
+
+  //总体的保存，将整个数据传过去
+  const visibleResult = ref(false);
+  const saveConfigMap = () => {
+    //这里需要控制成功或者失败的弹出框
+    visibleResult.value = true;
+    //configStatus修改状态，决定成功还是失败
+    // saveSwitch.value = true;
     // router.push('/page-config/config');
   };
 
@@ -215,10 +242,20 @@
     configDrawer.value.openDialog();
   };
 
+  //左边的浮动按钮
   const leftShow = ref(false);
   const onClose = (val) => {
     leftShow.value = val;
   };
+
+  //需要从子组件中获得当前保存的车间数据
+  const saveConfig = (val) => {
+    console.log(val);
+  };
+
+  const closeResult = () => {
+    visibleResult.value = false;
+  };
 </script>
 
 <style lang="scss" scoped>
@@ -421,4 +458,11 @@
     margin-left: 8px;
     margin-right: -7px;
   }
+
+  .feedback-position {
+    position: absolute;
+    left: 460px;
+    top: 150px;
+    z-index: 9999;
+  }
 </style>

src/views/page-config/component/ConfigDrawer.vue

@@ -19,10 +19,6 @@
           />
         </div>
       </template>
-      <!-- <div class="header">
-      <div class="header-title">{{ props.title }}</div>
-      <el-icon class="header-icon" size="20px" @click="closeDrawer"><Close /></el-icon>
-    </div> -->
       <div class="config-content">
         <div>
           <div class="uploader-title">缩略图</div>
@@ -42,7 +38,7 @@
             </div>
           </el-upload>
           <div class="upload-config-tip">只支持.jpg格式</div>
-          <div style="display: flex"
+          <div style="display: flex; text-align: center"
             ><img src="~@/assets/icons/warn.png" style="width: 14px; height: 14px" alt="" />
             <div class="upload-notice">上传车间内部情况的视频流截图</div></div
           >
@@ -55,38 +51,48 @@
             ><div class="uploader-title">填充</div>
             <el-icon class="refresh-right"><RefreshRight /></el-icon
           ></div>
-          <el-color-picker v-model="color" />
+          <div class="color-select"
+            ><el-color-picker v-model="color" size="small" /><div class="color-content">{{
+              color
+            }}</div></div
+          >
         </div>
-      </div> </el-dialog
-  ></div>
-
-  <!-- <div v-show="props.visible" class="drawer-box">
-    <div class="header">
-      <div class="header-title">{{ props.title }}</div>
-      <el-icon class="header-icon" size="20px" @click="closeDrawer"><Close /></el-icon>
-    </div>
-    <div class="config-content">
-      <div>
-        <el-upload
-          class="pic-uploader"
-          list-type="picture-card"
-          :auto-upload="false"
-          :show-file-list="false"
-          :on-change="onSelectfile"
-          :before-upload="beforeAvatarUpload"
-        >
-          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-          <div v-else>
-            <el-icon class="avatar-upload-icon"><Plus /></el-icon>
-            <div class="uploader-config-text">上传照片</div>
+        <hr />
+        <div>
+          <div class="content-title"
+            ><div class="uploader-title">文字</div>
+            <el-icon class="refresh-right"><RefreshRight /></el-icon
+          ></div>
+          <div style="display: flex">
+            <el-select v-model="fontSize" class="fontsize-select" style="width: 50px" size="small">
+              <el-option
+                v-for="(item, index) in fontSizeList"
+                :key="index"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+            <div class="color-fontsize-select"
+              ><el-color-picker v-model="fontSizeColor" size="small" /><div
+                class="color-fontSize-content"
+                >{{ fontSizeColor }}</div
+              ></div
+            >
+          </div>
+          <hr />
+          <div>
+            <div class="content-title"><div class="uploader-title">布局</div> </div>
+            <div class="layout-set">
+              <img src="~@/assets/icons/layout-left.png" alt="" style="margin-right: 19px" />
+              <img src="~@/assets/icons/layout-right.png" alt="" style="margin-right: 17px" />
+              <img src="~@/assets/icons/layout-top.png" alt="" />
+            </div>
           </div>
-        </el-upload>
-        <div class="upload-config-tip">只支持.jpg格式</div>
-        <div class="upload-notice">上传缩略图</div>
-        <div class="upload-tips">备注：车间内部情况的视频流截图</div>
+        </div>
       </div>
-    </div>
-  </div> -->
+      <el-button type="primary" class="save-dialog" @click="saveWorkshopConfig">保存</el-button>
+    </el-dialog>
+  </div>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
@@ -99,7 +105,7 @@
     // workshopTemplateList: WorkshopModuleType[];
   }>();
 
-  const emit = defineEmits(['onClose']);
+  const emit = defineEmits(['onClose', 'saveConfig']);
 
   // const emit = defineEmits<{
   //   // (e: 'update:modelValue'): unknown;
@@ -116,7 +122,7 @@
   const onSelectfile = (uploadFile) => {
     imageUrl.value = URL.createObjectURL(uploadFile.raw!);
   };
-  const handleAvatarSuccess = () => {};
+  // const handleAvatarSuccess = () => {};
 
   const beforeAvatarUpload = (rawFile) => {
     if (rawFile.type !== 'image/jpeg') {
@@ -139,6 +145,16 @@
     emit('onClose', true);
   };
 
+  const fontSize = ref<number>(14);
+  const fontSizeList = Array.from({ length: 11 }, (_, index) => index + 10);
+
+  const fontSizeColor = ref('');
+
+  const saveWorkshopConfig = () => {
+    //这里需要传入数据
+    emit('saveConfig', {});
+  };
+
   defineExpose({ openDialog });
 </script>
 
@@ -162,25 +178,6 @@
     cursor: pointer;
   }
 
-  // :deep(.el-dialog__headerbtn) {
-  //   background: url('~@/assets/icons/slide-right.png') !important;
-  //   // z-index: 99999999999;
-  //   width: 20px;
-  //   height: 20px;
-  //   background-size: cover;
-  // }
-  // ::v-deep.el-dialog__headerbtn {
-  //   background: url('~@/assets/icons/slide-right.png');
-  //   background-size: cover;
-  //   // position: absolute;
-  //   // right: 0px;
-  //   // top: -10px;
-  //   // i {
-  //   //   display: none;
-  //   // }
-  //   // height: 660px !important;
-  // }
-
   :deep(.el-dialog__headerbtn .el-dialog__close) {
     display: none;
   }
@@ -275,4 +272,50 @@
     margin-left: 4px;
     margin-top: 2px;
   }
+
+  .color-select {
+    display: flex;
+    margin-left: 34px;
+    margin-bottom: 16px;
+  }
+  .color-content {
+    width: 120px;
+    height: 24px;
+    line-height: 24px;
+    padding-left: 10px;
+    // margin-top: 8px;
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .fontsize-select {
+    margin-left: 34px;
+  }
+  .color-fontSize-content {
+    width: 74px;
+    height: 24px;
+    line-height: 24px;
+    padding-left: 10px;
+    // margin-top: 8px;
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  .color-fontsize-select {
+    display: flex;
+    // margin-left: 34px;
+    margin-bottom: 16px;
+  }
+  .layout-set {
+    width: 156px;
+    height: 24px;
+    background: #f5f5f5;
+    border-radius: 2px;
+    margin-left: 34px;
+    display: flex;
+  }
+
+  .save-dialog {
+    position: absolute;
+    left: 105px;
+    bottom: 35px;
+  }
 </style>

src/views/page-config/component/ConfigFinish.vue

@@ -0,0 +1,107 @@
+<template>
+  <div v-if="props.visible" class="result-feedback">
+    <el-icon class="close-btn" @click="closeResult"><Close /></el-icon>
+    <!-- 成功 -->
+    <div v-if="props.status">
+      <img src="~@/assets/icons/config-success.png" alt="" class="result-pic" />
+      <div class="success-word">保存成功</div>
+      <div class="success-go" @click="goMain">前往查看</div>
+      <div class="success-back" @click="goBack">5S后返回首页</div>
+    </div>
+    <!-- 失败 -->
+    <div v-else>
+      <img src="~@/assets/icons/config-fail.png" alt="" class="result-pic" />
+      <div class="success-word">保存失败</div>
+      <div class="success-go" @click="reSave">重新上传</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Close, Plus, RefreshRight } from '@element-plus/icons-vue';
+  import { ElMessage } from 'element-plus';
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+
+  const props = defineProps<{
+    visible: boolean;
+    status: boolean;
+  }>();
+
+  const emit = defineEmits(['onClose', 'saveConfig']);
+
+  // const emit = defineEmits<{
+  //   // (e: 'update:modelValue'): unknown;
+  //   (e: 'onClose'): unknown;
+  // }>();
+
+  // const closeDrawer = () => {
+  //   emit('onClose');
+  // };
+  const closeResult = () => {
+    emit('onClose');
+  };
+
+  const goMain = () => {
+    router.push('/page-config/layout');
+  };
+
+  const goBack = () => {
+    router.push('/');
+  };
+
+  const reSave = () => {};
+</script>
+
+<style lang="scss" scoped>
+  .result-feedback {
+    width: 480px;
+    height: 460px;
+    // background: linear-gradient(
+    //   180deg,
+    //   #a8caea 1%,
+    //   rgba(24, 144, 255, 0.2) 40%,
+    //   rgba(148, 182, 245, 0) 100%
+    // );
+    background: linear-gradient(to bottom, #a8caea, white);
+    border-radius: 8px;
+    position: relative;
+  }
+  .close-btn {
+    position: absolute;
+    right: 24px;
+    top: 23px;
+  }
+  .result-pic {
+    margin-top: 39px;
+    margin-left: 166px;
+    margin-bottom: 20px;
+  }
+  .success-word {
+    font-size: 32px;
+    // font-family: YouSheBiaoTiHei;
+    color: rgba(0, 0, 0, 0.65);
+    text-align: center;
+    margin-bottom: 40px;
+  }
+  .success-go {
+    width: 200px;
+    height: 46px;
+    background: #1890ff;
+    color: #ffffff;
+    border-radius: 4px;
+    text-align: center;
+    font-size: 20px;
+    line-height: 46px;
+    margin-left: 140px;
+    cursor: pointer;
+    margin-bottom: 12px;
+  }
+  .success-back {
+    font-size: 14px;
+    font-weight: 400;
+    color: #1890ff;
+    text-align: center;
+    cursor: pointer;
+  }
+</style>