feat: 布局管理-场景布局-编辑公司布局页面 样式更新

src/views/page-config/ConfigEdit.vue

@@ -25,10 +25,12 @@
               :data="{ companyId, deleteFileName: bgImg }"
               :headers="getHeaders()"
             >
-              <el-button :icon="Refresh"> 替换照片 </el-button>
+              <el-button :icon="Refresh" :disabled="!hasBg"> 替换照片 </el-button>
             </el-upload>
 
-            <el-button :icon="Refresh" @click="clearLayout"> 重置布局 </el-button>
+            <el-button :icon="Refresh" :disabled="!hasBg" @click="clearLayout">
+              重置布局
+            </el-button>
 
             <el-button @click="handleSave" type="primary" :disabled="!companyId"> 保存 </el-button>
           </div>
@@ -79,8 +81,8 @@
           :headers="getHeaders()"
         >
           <img src="~@/assets/images/img-upload.png" />
-          <div class="upload-tips-text"
-            >请上传1920*1080尺寸的布局背景图，其他尺寸会影响布局准确性！
+          <div class="upload-tips-text">
+            请上传1920*1080尺寸的布局背景图，其他尺寸会影响布局准确性！
           </div>
         </el-upload>
       </div>
@@ -376,6 +378,10 @@
     margin: auto;
   }
 
+  .upload-tips-text {
+    margin-top: 15px;
+  }
+
   .paint-tool {
     position: relative;
     height: calc(100vh - 138px);
@@ -521,9 +527,10 @@
     .operation-btns {
       width: 380px;
       display: flex;
+      justify-content: space-around;
       align-items: center;
       .el-button {
-        margin-left: 20px;
+        // margin-left: 20px;
       }
     }
   }
@@ -533,6 +540,10 @@
     background-color: #ffffff;
   }
 
+  :deep(.el-button) {
+    margin: 0px;
+  }
+
   :deep(.el-upload) {
     flex-direction: column;
   }

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

@@ -7,7 +7,7 @@
         </section>
         <section class="card__right">
           <span class="span__card--title"> PC端{{ titleDefault }} </span>
-          <span class="span__card--describe"> {{ describeDefault }} PC端生效 </span>
+          <span class="span__card--describe"> {{ describeDefault }}PC端平台首页 </span>
         </section>
       </div>
       <div class="card--default" @click="toLayout('Phone')">
@@ -16,7 +16,7 @@
         </section>
         <section class="card__right">
           <span class="span__card--title"> 手机端{{ titleDefault }} </span>
-          <span class="span__card--describe"> {{ describeDefault }} 手机端生效 </span>
+          <span class="span__card--describe"> {{ describeDefault }}手机端平台首页 </span>
         </section>
       </div>
     </main>
@@ -36,8 +36,8 @@ const describeDefault = ref('');
 const generateContentDefault = (layoutType: LayoutConfigType.scene | LayoutConfigType.camera) => {
   switch (layoutType) {
     case LayoutConfigType.scene:
-      titleDefault.value = '主页布局';
-      describeDefault.value = '编辑的主页布局、 \n标签位置等在\n'
+      titleDefault.value = '场景布局';
+      describeDefault.value = '编辑车间在业务场景中的布局，展示在';
       break;
     case LayoutConfigType.camera:
       titleDefault.value = '车间布局';
@@ -113,6 +113,7 @@ onMounted(() => {
     }
 
     .span__card--describe {
+      padding-right: 24px;
       font-weight: 400;
       font-size: 24px;
       line-height: 33px;

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

@@ -1,5 +1,10 @@
 <template>
-  <div class="shop-tag-edit-area">
+  <div
+    class="shop-tag-edit-area"
+    :style="{
+      opacity: editShop.id === undefined ? 0.4 : 1,
+    }"
+  >
     <div>
       <div class="content-title"
         ><div class="uploader-title"> <div class="block"></div>标签设置</div>
@@ -11,22 +16,30 @@
             src="~@/assets/icons/layout-left.png"
             alt=""
             @click="posAdj(LabelPositionEnum.LEFT)"
-            style="margin-right: 19px; cursor: pointer"
-            :class="{ active: editShop.posType === LabelPositionEnum.LEFT }"
+            style="margin-right: 19px"
+            :class="{
+              active: editShop.posType === LabelPositionEnum.LEFT || editShop.id === undefined,
+              labelActionable: editShop.id !== undefined,
+            }"
           />
           <img
             src="~@/assets/icons/layout-right.png"
             alt=""
             @click="posAdj(LabelPositionEnum.RIGHT)"
-            style="margin-right: 17px; cursor: pointer"
-            :class="{ active: editShop.posType === LabelPositionEnum.RIGHT }"
+            style="margin-right: 17px"
+            :class="{
+              active: editShop.posType === LabelPositionEnum.RIGHT,
+              labelActionable: editShop.id !== undefined,
+            }"
           />
           <img
             src="~@/assets/icons/layout-top.png"
             alt=""
-            style="cursor: pointer"
             @click="posAdj(LabelPositionEnum.TOP)"
-            :class="{ active: editShop.posType === LabelPositionEnum.TOP }"
+            :class="{
+              active: editShop.posType === LabelPositionEnum.TOP,
+              labelActionable: editShop.id !== undefined,
+            }"
           />
         </div>
       </div>
@@ -37,7 +50,7 @@
             v-model.number="editShop.x"
             type="number"
             class="no_number"
-            style="max-width: 100px"
+            :disabled="editShop.id === undefined"
           >
             <template #prepend>X</template>
           </el-input>
@@ -45,7 +58,7 @@
             v-model.number="editShop.y"
             type="number"
             class="no_number"
-            style="max-width: 100px"
+            :disabled="editShop.id === undefined"
           >
             <template #prepend>Y</template>
           </el-input>
@@ -58,7 +71,7 @@
             v-model.number="editShop.scaleX"
             type="number"
             class="no_number"
-            style="max-width: 100px"
+            :disabled="editShop.id === undefined"
           >
             <template #prepend>W</template>
           </el-input>
@@ -66,7 +79,7 @@
             v-model.number="editShop.scaleY"
             type="number"
             class="no_number"
-            style="max-width: 100px"
+            :disabled="editShop.id === undefined"
           >
             <template #prepend>H</template>
           </el-input>
@@ -87,6 +100,7 @@
           show-alpha
           size="small"
           color-format="rgb"
+          :disabled="editShop.id === undefined"
         /><div class="color-content">{{ showColor[0] }}&emsp;{{ showColor[1] }}</div>
       </div>
     </div>
@@ -102,6 +116,7 @@
           class="fontsize-select"
           style="width: 50px"
           size="small"
+          :disabled="editShop.id === undefined"
         >
           <el-option
             v-for="(item, index) in fontSizeList"
@@ -111,7 +126,12 @@
           />
         </el-select>
         <div class="color-fontsize-select">
-          <el-color-picker v-model="editShop.fontColor" color-format="hex" size="small" />
+          <el-color-picker
+            v-model="editShop.fontColor"
+            color-format="hex"
+            size="small"
+            :disabled="editShop.id === undefined"
+          />
           <div class="color-fontSize-content">{{ editShop.fontColor }}</div>
         </div>
       </div>
@@ -134,13 +154,17 @@
   const mapEditor = useMapEditor();
   const { addedShops, showShops, activeShopId } = storeToRefs(mapEditor);
   const fontSizeList = Array.from({ length: 11 }, (_, index) => index + 10);
-  const showColor = computed(() => colorRGB2Hex(editShop.value!.bgColor));
+  const showColor = computed(() =>
+    colorRGB2Hex(editShop.value!.bgColor)[0]
+      ? colorRGB2Hex(editShop.value!.bgColor)
+      : ['#3aaad1', '100%'],
+  );
 
   const editShop = computed(() => {
     const val =
       showShops.value.find((item) => {
         return item.id === Number(activeShopId.value);
-      }) || ({} as MapWorkShopInfoItem);
+      }) || ({ fontSize: 14, fontColor: '#ffffff' } as MapWorkShopInfoItem);
     return val;
   });
 
@@ -224,7 +248,6 @@
   }
 
   .label-setting-content {
-    display: flex;
     margin-top: 12px;
   }
 
@@ -234,7 +257,6 @@
     background: #f5f5f5;
     border-radius: 2px;
     display: flex;
-
     margin-top: 12px;
   }
 
@@ -242,11 +264,23 @@
     background-color: #cbcdce;
   }
 
+  .labelActionable {
+    cursor: pointer;
+  }
+
   .save-wrapper {
     margin-top: 40px;
     text-align: center;
   }
 
+  .el-input {
+    width: 180px;
+  }
+
+  ::v-deep .el-input-group__prepend {
+    width: 10px;
+    padding: 0 10px;
+  }
   ::v-deep .no_number input::-webkit-inner-spin-button,
   ::v-deep .no_number input::-webkit-outer-spin-button {
     -webkit-appearance: none !important;