Project Init

src/components/pictureUpload/index.vue

@@ -1,106 +1,108 @@
 <template>
-    <!-- <img v-if="previewUrl?.length>0&&previewUrl!='[]'" :src="previewUrl" class="box" style="cursor: pointer" @click="clickImg"/> -->
-    <el-image :preview-teleported="true" :preview-src-list="[previewUrl]" v-if="previewUrl?.length>0&&previewUrl!='[]'"
-              :src="previewUrl" class="box"/>
-    <el-upload class="box" action="#" :show-file-list="false" :http-request="upload" :accept="accept">
-        <el-icon class="avatar-uploader-icon">
-            <Plus/>
-        </el-icon>
-    </el-upload>
-
-    <el-dialog v-model="watchImg" width="50%" :show-close="false">
-        <img :src="previewUrl" style="width: 100%"/>
-    </el-dialog>
+  <!-- <img v-if="previewUrl?.length>0&&previewUrl!='[]'" :src="previewUrl" class="box" style="cursor: pointer" @click="clickImg"/> -->
+  <el-image :preview-teleported="true" :preview-src-list="[previewUrl]" v-if="previewUrl?.length>0&&previewUrl!='[]'"
+            :src="previewUrl" class="box" />
+  <el-upload class="box" action="#" :show-file-list="false" :http-request="upload" :accept="accept">
+    <el-icon class="avatar-uploader-icon">
+      <Plus />
+    </el-icon>
+  </el-upload>
+
+  <el-dialog v-model="watchImg" width="50%" :show-close="false">
+    <img :src="previewUrl" style="width: 100%" />
+  </el-dialog>
 
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref, watch} from 'vue'
-import {fileUpload} from '/@/api/common'
-import {Delete, Download, Plus, ZoomIn} from '@element-plus/icons-vue'
-import type {UploadInstance, UploadProps, UploadRawFile, UploadFile} from 'element-plus'
-import {genFileId} from 'element-plus'
-import {ElNotification} from "element-plus/es";
+import { onMounted, ref, watch } from "vue";
+import { fileUpload } from "/@/api/common";
+import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
+import type { UploadInstance, UploadProps, UploadRawFile, UploadFile } from "element-plus";
+import { genFileId } from "element-plus";
+import { ElNotification } from "element-plus/es";
+import { log } from "/@/api/backend/routine/AdminInfo";
 
 
-const dialogImageUrl = ref('')
-const dialogVisible = ref(false)
-const disabled = ref(false)
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
+const disabled = ref(false);
 
 const props = defineProps({
-    fileUrl: {
-        type: String,
-        default: ''
-    },
-    size: {
-        type: Number,
-        default: 1000000
-    },
-    accept: {
-        type: String,
-        default: '.jpg, .jpeg, .png'
-    }
-})
-
-
-watch(
-    () => props.fileUrl,
-    (newVal) => {
-        previewUrl.value = props.fileUrl
-    }
-)
+  modelValue: {
+    type: String,
+    default: ""
+  },
+  size: {//上传文件大小限制B
+    type: Number,
+    default: 1000000
+  },
+  accept: {//接收文件后缀
+    type: String,
+    default: ".jpg, .jpeg, .png"
+  }
+});
+
+
+watch(() => props.modelValue, (newVal) => {
+  console.log(newVal);
+  previewUrl.value = newVal;
+});
 
 
 onMounted(() => {
-    previewUrl.value = props.fileUrl
-})
+  console.log(props.modelValue);
+  previewUrl.value = props.modelValue;
+});
 
-const emit = defineEmits(['update:fileUrl'])
+// const emit = defineEmits(["update:fileUrl"]);
+const emit = defineEmits(["input"]);
 
 
 const handlePictureCardPreview = (file: UploadFile) => {
-    dialogImageUrl.value = file.url!
-    dialogVisible.value = true
-}
+  dialogImageUrl.value = file.url!;
+  dialogVisible.value = true;
+};
 
 //上传图片路径
-let previewUrl = ref<string>('')
+let previewUrl = ref<string>("");
 
 function upload(file: any) {
-    //大小限制为0时为不限制
-    if (file.file.size > props.size && props.size > 0) {
-        ElNotification({
-            type: 'error',
-            message: "文件大小不能超过1MB",
-        })
-        return
-    }
-    let fd = new FormData()
-    fd.append('file', file.file)
-    fileUpload(fd).then(res => {
-        previewUrl.value = res.data.previewUrl
-        emit('update:fileUrl', previewUrl.value)
-    })
+  //大小限制为0时为不限制
+  if (file.file.size > props.size && props.size > 0) {
+    ElNotification({
+      type: "error",
+      message: "文件大小不能超过1MB"
+    });
+    return;
+  }
+  let fd = new FormData();
+  fd.append("file", file.file);
+  fileUpload(fd).then(res => {
+    previewUrl.value = res.data.previewUrl;
+    // emit("update:fileUrl", previewUrl.value);
+    emit("input", previewUrl.value);
+  });
 }
 
 //图片预览
-let watchImg = ref(false)
-let showUrl = ref('')
+let watchImg = ref(false);
+let showUrl = ref("");
 
 function clickImg() {
-    watchImg.value = true
+  watchImg.value = true;
 }
 </script>
 
 <style scoped>
 .box {
-    height: 90px;
-    width: 90px;
-    border: #bfc0c2 1px dashed;
-    border-radius: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 10px;
+  height: 90px;
+  width: 90px;
+  border: #bfc0c2 1px dashed;
+  border-radius: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
 }
 </style>

src/components/pictureUpload/multiple.vue

@@ -1,12 +1,15 @@
 <template>
-  <div v-for="(item ,index) in previewUrl" style="position:relative;">
+  <div class="imgViewBox" v-for="(item ,index) in previewUrl">
     <!-- <img v-if="previewUrl?.length>0" :src="item" class="box" style="cursor: pointer" @click="clickImg(item)"/> -->
     <el-image ref="imageRef" :preview-teleported="true" :preview-src-list="previewUrl" :initial-index="index"
               :src="item" class="box" />
-    <el-icon
-      style="position: absolute;top: 10px;right: 7px;color: red;cursor: pointer" @click="del(index)">
-      <Delete />
-    </el-icon>
+    <div class="imgDeleteBtn">
+      <el-icon
+        style="color: red;font-weight: bold;cursor: pointer" @click="del(index)">
+        <Delete />
+      </el-icon>
+    </div>
+
   </div>
   <el-upload
     class="box"
@@ -33,7 +36,7 @@ import { ElNotification } from "element-plus/es";
 const disabled = ref(false);
 
 const props = defineProps({
-  fileUrl: {
+  modelValue: {
     type: String,
     default: ""
   },
@@ -50,23 +53,23 @@ const props = defineProps({
 const imageRef = ref();
 
 onMounted(() => {
-  if (props.fileUrl?.length > 0) {
-    previewUrl.value = JSON.parse(props.fileUrl);
+  if (props.modelValue?.length > 0) {
+    previewUrl.value = JSON.parse(props.modelValue);
   } else {
     previewUrl.value = [];
   }
 });
 
-watch(() => props.fileUrl, () => {
-  if (props.fileUrl?.length > 0) {
-    previewUrl.value = JSON.parse(props.fileUrl);
+watch(() => props.modelValue, () => {
+  if (props.modelValue?.length > 0) {
+    previewUrl.value = JSON.parse(props.modelValue);
   } else {
     previewUrl.value = [];
   }
 });
 
 
-const emit = defineEmits(["update:fileUrl"]);
+const emit = defineEmits(["input"]);
 
 
 //上传图片路径
@@ -82,22 +85,23 @@ function upload(file: any) {
   fd.append("file", file.file);
   fileUpload(fd).then(res => {
     previewUrl.value.push(res.data.previewUrl);
-    emit("update:fileUrl", JSON.stringify(previewUrl.value));
+    emit("input", JSON.stringify(previewUrl.value));
   });
 }
 
 function del(index: number) {
   previewUrl.value.splice(index, 1);
-  emit("update:fileUrl", JSON.stringify(previewUrl.value));
+  emit("input", JSON.stringify(previewUrl.value));
 }
 
 
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+
 .box {
-  height: 90px;
-  width: 90px;
+  height: 88px;
+  width: 88px;
   border: #bfc0c2 1px dashed;
   border-radius: 10px;
   display: flex;
@@ -105,4 +109,29 @@ function del(index: number) {
   align-items: center;
   margin: 0 23px 10px 0;
 }
+
+.imgViewBox {
+  position: relative;
+  height: 90px;
+  width: 90px;
+
+  .imgDeleteBtn {
+    display: none;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 100%;
+    height: 100%;
+    //display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.5);
+  }
+
+  &:hover {
+    .imgDeleteBtn {
+      display: flex;
+    }
+  }
+}
 </style>

src/views/backend/enterprise/mediapromotion/ad/popupForm.vue

@@ -26,7 +26,7 @@
             </el-select>
           </el-form-item>
           <el-form-item prop="adUrl" label="上传图片">
-            <pictureUpload v-model:fileUrl="baTable.form.items!.adUrl"></pictureUpload>
+            <pictureUpload v-model="baTable.form.items!.adUrl"></pictureUpload>
           </el-form-item>
         </el-form>
       </div>

src/views/backend/enterprise/mediapromotion/popupForm.vue

@@ -49,18 +49,18 @@
                     </el-form-item>
                     <el-form-item prop="screenDisplayHorizontalUrl" label="大屏横屏展示"
                                   v-if="baTable.form.items!.sceneType==0">
-                        <pictureUpload v-model:fileUrl="baTable.form.items!.screenDisplayHorizontalUrl"></pictureUpload>
+                        <pictureUpload v-model="baTable.form.items!.screenDisplayHorizontalUrl"></pictureUpload>
                     </el-form-item>
                     <el-form-item prop="screenDisplayVerticalUrl" label="大屏竖屏展示"
                                   v-if="baTable.form.items!.sceneType==0">
-                        <pictureUpload v-model:fileUrl="baTable.form.items!.screenDisplayVerticalUrl"></pictureUpload>
+                        <pictureUpload v-model="baTable.form.items!.screenDisplayVerticalUrl"></pictureUpload>
                     </el-form-item>
                     <el-form-item prop="screenDisplayHorizontalUrl" label="大屏轮播展示"
                                   v-if="baTable.form.items!.sceneType==1">
-                        <pictureUpload v-model:fileUrl="baTable.form.items!.screenDisplayHorizontalUrl"></pictureUpload>
+                        <pictureUpload v-model="baTable.form.items!.screenDisplayHorizontalUrl"></pictureUpload>
                     </el-form-item>
                     <el-form-item prop="appDisplayUrl" label="移动APP展示">
-                        <pictureUpload v-model:fileUrl="baTable.form.items!.appDisplayUrl"></pictureUpload>
+                        <pictureUpload v-model="baTable.form.items!.appDisplayUrl"></pictureUpload>
                     </el-form-item>
                     <div style="font-size: 10px;color: #92969a;margin-left: 150px">
                         仅限jpg/png格式文件，大小不超过1MB
@@ -82,16 +82,9 @@
 
 <script setup lang="ts">
 import {ref, reactive, inject, onMounted, watch} from 'vue'
-
 import type baTableClass from '/@/utils/baTable'
-import {regularPassword, validatorAccount, validatorMobile} from '/@/utils/validate'
 import type {ElForm, FormItemRule} from 'element-plus'
-import FormItem from '/@/components/formItem/index.vue'
-import {getOrgTree, getEmployees} from '/@/api/backend/auth/account'
-import {authGroup, sysConfig} from '/@/api/controllerUrls'
-import editor from '/@/components/editor/index.vue'
 import request from '/@/api/request'
-import {ElNotification} from 'element-plus/es'
 import {document} from '/@/api/controllerUrls'
 import pictureUpload from '/@/components/pictureUpload/index.vue'
 import {getRecommendList} from '/@/api/backend/enterprise/advertisement'

src/views/backend/enterprise/project/community/popupForm.vue

@@ -23,7 +23,9 @@
           <el-form-item prop="communityName" label="小区名称">
             <el-input v-model="baTable.form.items!.communityName" placeholder="请输入"></el-input>
           </el-form-item>
-
+          <el-form-item  prop="communityUrl" label="小区图片">
+            <pictureUpload v-model="baTable.form.items!.communityUrl"></pictureUpload>
+          </el-form-item>
         </el-form>
       </div>
     </el-scrollbar>
@@ -47,6 +49,7 @@ import FormItem from "/@/components/formItem/index.vue";
 import { district_list, moments, orderExpress } from "/@/api/controllerUrls";
 import { ElNotification } from "element-plus/es";
 import request from "/@/api/request";
+import pictureUpload from "/@/components/pictureUpload/index.vue";
 
 const formRef = ref<InstanceType<typeof ElForm>>();
 const baTable = inject("baTable") as baTableClass;

src/views/backend/enterprise/project/map/index.vue

@@ -69,6 +69,7 @@ const baTable = new newBaTable(
             {type: 'selection', align: 'center', operator: false},
             {label: '所在区县', prop: 'districtName', align: 'left', operator: 'LIKE'},
             {label: '小区名称', prop: 'communityName', align: 'left', operator: 'LIKE'},
+            {label: '地图名称', prop: 'mapName', align: 'left', operator: 'LIKE'},
             {label: '关联楼号', prop: 'buildingName', align: 'left', operator: "LIKE"},
             {label: '创建人', prop: 'creatorName', align: 'center', width: '120', operator: false},
             {label: '创建时间', prop: 'createTime', align: 'center', width: '180', operator: false},

src/views/backend/enterprise/project/map/popupForm.vue

@@ -28,6 +28,9 @@
             </el-select>
             <el-input v-else :disabled="true" v-model="baTable.form.items!.communityName"></el-input>
           </el-form-item>
+          <el-form-item prop="mapName" label="地图名称">
+            <el-input v-model="baTable.form.items!.mapName"></el-input>
+          </el-form-item>
           <el-form-item prop="buildingIds" label="相关楼号">
             <el-select v-model="baTable.form.items!.buildingIds" placeholder="请选择" style="width: 100%" clearable
                        multiple>
@@ -35,7 +38,7 @@
             </el-select>
           </el-form-item>
           <el-form-item prop="mapUrl" label="上传地图">
-            <pictureUpload v-model:fileUrl="baTable.form.items!.mapUrl"></pictureUpload>
+            <pictureUpload v-model="baTable.form.items!.mapUrl"></pictureUpload>
           </el-form-item>
         </el-form>
       </div>
@@ -53,7 +56,6 @@
 
 <script setup lang="ts">
 import { ref, reactive, inject, onMounted, watch } from "vue";
-
 import type baTableClass from "/@/utils/baTable";
 import type { ElForm, FormItemRule } from "element-plus";
 import FormItem from "/@/components/formItem/index.vue";
@@ -62,6 +64,8 @@ import { ElNotification } from "element-plus/es";
 import pictureUpload from "/@/components/pictureUpload/multiple.vue";
 import request from "/@/api/request";
 
+
+
 const formRef = ref<InstanceType<typeof ElForm>>();
 const baTable = inject("baTable") as baTableClass;
 
@@ -83,6 +87,13 @@ const rules: Partial<Record<string, FormItemRule[]>> = reactive({
       trigger: "blur"
     }
   ],
+  mapName: [
+    {
+      required: true,
+      message: "请输入",
+      trigger: "blur"
+    }
+  ],
   mapUrl: [
     {
       required: true,

src/views/backend/enterprise/project/parking/editDialog.vue

@@ -11,8 +11,8 @@
         <el-col :span="12">
           <el-form-item label="车位类型" prop="parkingType">
             <el-radio-group v-model="formData.parkingType">
-              <el-radio :label="0" >车位</el-radio>
-              <el-radio :label="1" >车库</el-radio>
+              <el-radio :label="0">车位</el-radio>
+              <el-radio :label="1">车库</el-radio>
             </el-radio-group>
           </el-form-item>
         </el-col>
@@ -26,6 +26,11 @@
             <el-input v-model="formData.contactNumber"></el-input>
           </el-form-item>
         </el-col>
+        <el-col :span="24">
+          <el-form-item prop="parkingUrl" label="车位照片">
+            <pictureUpload v-model="formData.parkingUrl"></pictureUpload>
+          </el-form-item>
+        </el-col>
         <el-col :span="12">
           <el-form-item label="是否特价" prop="isSpecial">
             <el-radio-group v-model="formData.isSpecial">
@@ -86,11 +91,7 @@
             </el-select>
           </el-form-item>
         </el-col>
-
-
       </el-row>
-
-
     </el-form>
 
     <template #footer>
@@ -109,6 +110,7 @@ import { reactive, ref } from "vue";
 import request from "/@/api/request";
 import { district_list, parking } from "/@/api/controllerUrls";
 import { ElMessage } from "element-plus";
+import pictureUpload from "/@/components/pictureUpload/index.vue";
 
 let showDialog = ref(false);
 
@@ -130,7 +132,7 @@ function open(type1, data, districtId, communityId, buildingId) {
     formData.communityId = communityId;
     formData.buildingId = buildingId;
   } else {
-    getInitData(data.id)
+    getInitData(data.id);
   }
 
   showDialog.value = true;
@@ -162,26 +164,22 @@ let formRules = {
   ],
   area: [
     { required: true, message: "不能为空" }
-    // { type: 'number', message: '必须为数字' }
   ],
   contactNumber: [
     { required: true, message: "不能为空" }
-    // { type: 'number', message: '必须为数字' }
   ],
   hirePrice: [
     { required: true, message: "不能为空" }
-    // { type: 'number', message: '必须为数字' }
   ],
   salePrice: [
     { required: true, message: "不能为空" }
-    // { type: 'number', message: '必须为数字' }
   ]
 };
 
 
 function getInitData(event) {
   request.index(parking, {
-    id:event
+    id: event
   }, "detail").then((res) => {
     if (res.code == 1) {
       for (let key in formData) {

src/views/backend/enterprise/project/parking/parkingView.vue

@@ -10,7 +10,7 @@
          @mouseup="moveOff" @mousemove="dragMove" @mouseleave="moveOff" @wheel.prevent="wheel">
       <div id="labelMap2" :style="mapStyle">
         <div :key="index" class="labelItem "
-             :style="{left: (item.mapX-item.mapSize / 2)*width/item.mapInitWidth+'px',top:(item.mapY-item.mapSize / 2)*width/item.mapInitWidth+'px',backgroundColor:setMarkStyle(item)?.backGround,width:item.mapSize+'px',height:item.mapSize+'px',fontSize:item.mapSize/3+'px'}"
+             :style="getItemStyle(item)"
              v-for="(item,index) in props.value">
           <span :style="{color:setMarkStyle(item)?.color}">{{ setMarkStyle(item)?.label }}</span>
         </div>
@@ -53,7 +53,7 @@ const props = defineProps({
 
 defineExpose({
   setImgSize
-})
+});
 
 //图片高度
 let height = ref(0);
@@ -86,10 +86,10 @@ onMounted(() => {
 function setImgSize(url) {
   const m = document.getElementById("mapContainer2");
   let img = new Image();
-  img.onload=function (){
+  img.onload = function() {
     width.value = m.clientWidth;
     height.value = m.clientWidth * (img.naturalHeight / img.naturalWidth);
-  }
+  };
   img.src = url;
   console.log(m.clientWidth);
 }
@@ -130,6 +130,18 @@ function dragMove(event) {
 
 }
 
+function getItemStyle(item) {
+  //标记点新尺寸
+  let itemSize = item.mapSize * width.value / item.mapInitWidth;
+  return {
+    left: (item.mapX - item.mapSize / 2) * width.value / item.mapInitWidth + "px",
+    top: (item.mapY - item.mapSize / 2) * width.value / item.mapInitWidth + "px",
+    backgroundColor: setMarkStyle(item)?.backGround,
+    width: itemSize + "px",
+    height: itemSize + "px",
+    fontSize: itemSize / 3 + "px"
+  };
+}
 
 let statusList = [
   { label: "可售", backGround: "#0bc933", color: "#000000" },