Project Init

src/components/table/header/index.vue

@@ -1,257 +1,256 @@
 <template>
-    <!-- 通用搜索 -->
-    <ComSearch v-show="buttons.includes('comSearch') && state.showComSearch"/>
-
-    <!-- 操作按钮组 -->
-    <div v-bind="$attrs" class="table-header">
-        <el-tooltip v-if="buttons.includes('add') && auth('add')" content="添加" placement="top">
-            <el-button v-blur @click="onAction('add')" class="table-header-operate" type="primary">
-                <Icon name="fa fa-plus"/>
-                <span class="table-header-operate-text">添加</span>
+  <!-- 通用搜索 -->
+  <ComSearch v-show="buttons.includes('comSearch') && state.showComSearch" />
+
+  <!-- 操作按钮组 -->
+  <div v-bind="$attrs" class="table-header">
+    <el-tooltip v-if="buttons.includes('add') && auth('add')" content="添加" placement="top">
+      <el-button v-blur @click="onAction('add')" class="table-header-operate" type="primary">
+        <Icon name="fa fa-plus" />
+        <span class="table-header-operate-text">添加</span>
+      </el-button>
+    </el-tooltip>
+    <el-tooltip v-if="buttons.includes('edit') && auth('edit')" content="编辑选中的行" placement="top">
+      <el-button v-blur @click="onAction('edit')" :disabled="!enableBatchOpt" class="table-header-operate"
+                 type="primary">
+        <Icon name="fa fa-pencil" />
+        <span class="table-header-operate-text">编辑</span>
+      </el-button>
+    </el-tooltip>
+    <el-popconfirm v-if="buttons.includes('delete') && auth('del')" @confirm="onAction('delete')"
+                   confirm-button-text="删除" cancel-button-text="取消" confirmButtonType="danger"
+                   title="确定删除选中记录？">
+      <template #reference>
+        <div class="mlr-12">
+          <el-tooltip content="删除选中行" placement="top">
+            <el-button v-blur :disabled="!enableBatchOpt" class="table-header-operate" type="danger">
+              <Icon name="fa fa-trash" />
+              <span class="table-header-operate-text">删除</span>
             </el-button>
-        </el-tooltip>
-        <el-tooltip v-if="buttons.includes('edit') && auth('edit')" content="编辑选中的行" placement="top">
-            <el-button v-blur @click="onAction('edit')" :disabled="!enableBatchOpt" class="table-header-operate"
-                       type="primary">
-                <Icon name="fa fa-pencil"/>
-                <span class="table-header-operate-text">编辑</span>
-            </el-button>
-        </el-tooltip>
-        <el-popconfirm v-if="buttons.includes('delete') && auth('del')" @confirm="onAction('delete')"
-                       confirm-button-text="删除" cancel-button-text="取消" confirmButtonType="danger"
-                       title="确定删除选中记录？">
-            <template #reference>
-                <div class="mlr-12">
-                    <el-tooltip content="删除选中行" placement="top">
-                        <el-button v-blur :disabled="!enableBatchOpt" class="table-header-operate" type="danger">
-                            <Icon name="fa fa-trash"/>
-                            <span class="table-header-operate-text">删除</span>
-                        </el-button>
-                    </el-tooltip>
-                </div>
-            </template>
-        </el-popconfirm>
-        <el-tooltip v-if="buttons.includes('unfold')" :content="baTable.table.expandAll ? '收起' : '展开所有子菜单'"
-                    placement="top">
-            <el-button v-blur @click="changeUnfold" class="table-header-operate"
-                       :type="baTable.table.expandAll ? 'danger' : 'warning'">
-                <span class="table-header-operate-text">{{ baTable.table.expandAll ? '收起所有' : '展开所有' }}</span>
-            </el-button>
-        </el-tooltip>
-
-        <!-- slot -->
-        <slot></slot>
-
-        <!-- 右侧搜索框和工具按钮 -->
-        <div class="table-search">
-            <el-input v-model="state.quickSearch" class="xs-hidden" @input="debounce(onSearchInput, 500)()"
-                      :placeholder="quickSearchPlaceholder ? quickSearchPlaceholder : '搜索'"/>
-
-            <div class="flex align-center ml-20">
-                <div class="mr-15">
-                    <el-tooltip content="密度" placement="top">
-                        <el-dropdown trigger="click" @command="onDrapDownSelect">
-                            <Icon name="fa fa-align-left" color="#515a6e" size="14"/>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item v-for="(item,idx) in state.tableStyle" :key="idx"
-                                                      :command="item.id"
-                                                      :style="{'color':item.isSelect?'#409eff':'#000'}">{{ item.title }}
-                                    </el-dropdown-item>
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
-                    </el-tooltip>
-
-                </div>
-                <div class="mr-15">
-                    <el-tooltip v-if="buttons.includes('refresh')" content="刷新" placement="top">
-                        <Icon name="fa fa-repeat" color="#515a6e" size="14"
-                              @click="onAction('refresh', { loading: true })"/>
-                    </el-tooltip>
-                </div>
-                <div class="mr-15">
-                    <el-tooltip content="列设置" placement="top">
-                        <el-dropdown :hide-on-click="true" trigger="click">
-                            <Icon name="fa fa-sliders" color="#515a6e" size="14"/>
-                            <template #dropdown>
-                                <el-dropdown-menu>
-                                    <el-dropdown-item v-for="(item, index) in baTable.table.column" :key="index">
-                                        <el-checkbox v-if="item.prop" @change="onChangeShowColumn($event, item.prop!)"
-                                                     :checked="!item.show"
-                                                     :model-value="item.show" size="small" :label="item.label"/>
-                                    </el-dropdown-item>
-                                </el-dropdown-menu>
-                            </template>
-                        </el-dropdown>
-                    </el-tooltip>
-                </div>
-                <div class="mr-15" v-if="buttons.includes('comSearch')">
-                    <el-tooltip :disabled="state.showComSearch" content="展开通用搜索" placement="top">
-                        <Icon name="fa fa-search" color="#515a6e" size="14"
-                              @click="state.showComSearch = !state.showComSearch"/>
-                    </el-tooltip>
-                </div>
-            </div>
+          </el-tooltip>
+        </div>
+      </template>
+    </el-popconfirm>
+    <el-tooltip v-if="buttons.includes('unfold')" :content="baTable.table.expandAll ? '收起' : '展开所有子菜单'"
+                placement="top">
+      <el-button v-blur @click="changeUnfold" class="table-header-operate"
+                 :type="baTable.table.expandAll ? 'danger' : 'warning'">
+        <span class="table-header-operate-text">{{ baTable.table.expandAll ? "收起所有" : "展开所有" }}</span>
+      </el-button>
+    </el-tooltip>
+
+    <!-- slot -->
+    <slot></slot>
+
+    <!-- 右侧搜索框和工具按钮 -->
+    <div class="table-search">
+      <el-input v-model="state.quickSearch" class="xs-hidden" @input="debounce(onSearchInput, 500)()"
+                :placeholder="quickSearchPlaceholder ? quickSearchPlaceholder : '搜索'" />
+
+      <div class="flex align-center ml-20">
+        <div class="mr-15">
+          <el-tooltip content="密度" placement="top">
+            <el-dropdown trigger="click" @command="onDrapDownSelect">
+              <Icon name="fa fa-align-left" color="#515a6e" size="14" />
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-for="(item,idx) in state.tableStyle" :key="idx"
+                                    :command="item.id"
+                                    :style="{'color':item.isSelect?'#409eff':'#000'}">{{ item.title }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-tooltip>
+        </div>
+        <div class="mr-15">
+          <el-tooltip v-if="buttons.includes('refresh')" content="刷新" placement="top">
+            <Icon name="fa fa-repeat" color="#515a6e" size="14"
+                  @click="onAction('refresh', { loading: true })" />
+          </el-tooltip>
         </div>
+        <div class="mr-15">
+          <el-tooltip content="列设置" placement="top">
+            <el-dropdown :hide-on-click="true" trigger="click">
+              <Icon name="fa fa-sliders" color="#515a6e" size="14" />
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item v-for="(item, index) in baTable.table.column" :key="index">
+                    <el-checkbox v-if="item.prop" @change="onChangeShowColumn($event, item.prop!)"
+                                 :checked="!item.show"
+                                 :model-value="item.show" size="small" :label="item.label" />
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </el-tooltip>
+        </div>
+        <div class="mr-15" v-if="buttons.includes('comSearch')">
+          <el-tooltip :disabled="state.showComSearch" content="展开通用搜索" placement="top">
+            <Icon name="fa fa-search" color="#515a6e" size="14"
+                  @click="state.showComSearch = !state.showComSearch" />
+          </el-tooltip>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import {reactive, computed, inject, ref, onMounted} from 'vue'
-import {debounce, auth} from '/@/utils/common'
-import type baTableClass from '/@/utils/baTable'
-import ComSearch from '/@/components/table/comSearch/index.vue'
+import { reactive, computed, inject, ref, onMounted } from "vue";
+import { debounce, auth } from "/@/utils/common";
+import type baTableClass from "/@/utils/baTable";
+import ComSearch from "/@/components/table/comSearch/index.vue";
 
-const baTable = inject('baTable') as baTableClass
-const isFullScreen = ref(false)
+const baTable = inject("baTable") as baTableClass;
+const isFullScreen = ref(false);
 
 interface Props {
-    buttons: HeaderOptButton[]
-    quickSearchPlaceholder?: string
+  buttons: HeaderOptButton[];
+  quickSearchPlaceholder?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    buttons: () => {
-        return ['refresh', 'add', 'edit', 'delete']
-    },
-    quickSearchPlaceholder: '',
-})
+  buttons: () => {
+    return ["refresh", "add", "edit", "delete"];
+  },
+  quickSearchPlaceholder: ""
+});
 
 const itemStyle = computed(() => {
 
-})
+});
 
 const state = reactive({
-    quickSearch: '',
-    showComSearch: false,
-    tableStyle: [
-        {id: 1, title: '默认', isSelect: true},
-        {id: 2, title: '宽松', isSelect: false},
-        {id: 3, title: '紧凑', isSelect: false},
-    ],
-})
+  quickSearch: "",
+  showComSearch: false,
+  tableStyle: [
+    { id: 1, title: "默认", isSelect: true },
+    { id: 2, title: "宽松", isSelect: false },
+    { id: 3, title: "紧凑", isSelect: false }
+  ]
+});
 
 onMounted(() => {
-    baTable.table.rowStyle = ''
-    baTable.table.headerRowStyle = ''
-})
+  baTable.table.rowStyle = "";
+  baTable.table.headerRowStyle = "";
+});
 
-const enableBatchOpt = computed(() => (baTable.table.selection!.length > 0 ? true : false))
+const enableBatchOpt = computed(() => (baTable.table.selection!.length > 0 ? true : false));
 
 const emits = defineEmits<{
-    (e: 'action', event: string, data: anyObj): void
-}>()
+  (e: "action", event: string, data: anyObj): void
+}>();
 
 const onAction = (event: string, data: anyObj = {}) => {
-    emits('action', event, data)
-}
+  emits("action", event, data);
+};
 
 const changeUnfold = () => {
-    emits('action', 'unfold', {unfold: !baTable.table.expandAll})
-}
+  emits("action", "unfold", { unfold: !baTable.table.expandAll });
+};
 
 const onSearchInput = () => {
-    emits('action', 'quick-search', {keyword: state.quickSearch})
-}
+  emits("action", "quick-search", { keyword: state.quickSearch });
+};
 
 const onChangeShowColumn = (value: boolean, field: string) => {
-    emits('action', 'change-show-column', {field: field, value: value})
-}
+  emits("action", "change-show-column", { field: field, value: value });
+};
 
 const onDrapDownSelect = (command: string | number | object) => {
-    state.tableStyle.map((item) => {
-        item.isSelect = false
-    })
-    state.tableStyle = state.tableStyle.filter((item) => {
-        if (item.id == command) {
-            item.isSelect = true
-        }
-        return item
-    })
-
-    if (command == 1) {
-        baTable.table.rowStyle = ''
-        baTable.table.headerRowStyle = ''
-    }
-
-    if (command == 2) {
-        baTable.table.rowStyle = 'table-row-loose'
-        baTable.table.headerRowStyle = 'table-header-row-loose'
-    }
-
-    if (command == 3) {
-        baTable.table.rowStyle = 'table-row-compact'
-        baTable.table.headerRowStyle = 'table-header-row-compact'
+  state.tableStyle.map((item) => {
+    item.isSelect = false;
+  });
+  state.tableStyle = state.tableStyle.filter((item) => {
+    if (item.id == command) {
+      item.isSelect = true;
     }
-}
+    return item;
+  });
+
+  if (command == 1) {
+    baTable.table.rowStyle = "";
+    baTable.table.headerRowStyle = "";
+  }
+
+  if (command == 2) {
+    baTable.table.rowStyle = "table-row-loose";
+    baTable.table.headerRowStyle = "table-header-row-loose";
+  }
+
+  if (command == 3) {
+    baTable.table.rowStyle = "table-row-compact";
+    baTable.table.headerRowStyle = "table-header-row-compact";
+  }
+};
 </script>
 
 <style scoped lang="scss">
 .table-header {
-    position: relative;
-    overflow: hidden;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    max-width: 100%;
-    background-color: #ffffff;
-    border: 1px solid #f6f6f6;
-    border-bottom: none;
-    padding: 13px 15px;
-    font-size: 14px;
-
-    .table-header-operate-text {
-        margin-left: 6px;
-    }
-
-    .table-header-operate .icon {
-        font-size: 14px !important;
-        color: #ffffff !important;
-    }
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  background-color: #ffffff;
+  border: 1px solid #f6f6f6;
+  border-bottom: none;
+  padding: 13px 15px;
+  font-size: 14px;
+
+  .table-header-operate-text {
+    margin-left: 6px;
+  }
+
+  .table-header-operate .icon {
+    font-size: 14px !important;
+    color: #ffffff !important;
+  }
 }
 
 .mlr-12 {
-    margin-left: 12px;
+  margin-left: 12px;
 }
 
 .mlr-12 + .el-button {
-    margin-left: 12px;
+  margin-left: 12px;
 }
 
 .table-search {
-    display: flex;
-    margin-left: auto;
+  display: flex;
+  margin-left: auto;
 }
 
 .table-search-button-group {
-    display: flex;
-    margin-left: 12px;
-
-    button:focus,
-    button:active {
-        background-color: #ffffff;
-    }
-
-    button:hover {
-        background-color: #dcdfe6;
-    }
+  display: flex;
+  margin-left: 12px;
 
-    .table-search-button-item {
-        margin-right: -1px;
-    }
-
-    .table-search-button-item:first-child {
-        border-top-right-radius: 0px;
-        border-bottom-right-radius: 0px;
-        border-top-left-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
+  button:focus,
+  button:active {
+    background-color: #ffffff;
+  }
+
+  button:hover {
+    background-color: #dcdfe6;
+  }
+
+  .table-search-button-item {
+    margin-right: -1px;
+  }
+
+  .table-search-button-item:first-child {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
 }
 
 .selectStyle {
-    background-color: #409eff30 !important;
-    color: #409eff !important;
+  background-color: #409eff30 !important;
+  color: #409eff !important;
 }
 </style>

src/utils/baTable.ts

@@ -215,8 +215,6 @@ export default class baTable {
                 delete this.form.items[key]
             }
         }
-
-
         // 表单验证通过后执行的api请求操作
         let submitCallback = () => {
             this.form.submitLoading = true

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

@@ -23,9 +23,10 @@
           </el-form-item>
           <el-form-item prop="communityId" label="所在小区">
             <el-select v-model="baTable.form.items!.communityId" placeholder="请选择" style="width: 100%"
-                       @change="selectCommunity">
+                       @change="selectCommunity" v-if="baTable.form.operate == 'add'">
               <el-option v-for="item in communityList" :label="item.communityName" :value="item.id"></el-option>
             </el-select>
+            <el-input v-else :disabled="true" v-model="baTable.form.items!.communityName"></el-input>
           </el-form-item>
           <el-form-item prop="buildingIds" label="相关楼号">
             <el-select v-model="baTable.form.items!.buildingIds" placeholder="请选择" style="width: 100%" clearable
@@ -42,7 +43,7 @@
     <template #footer>
       <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
         <el-button @click="baTable.toggleForm('')">取消</el-button>
-        <el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
+        <el-button v-blur :loading="baTable.form.submitLoading" @click="onSubmit" type="primary">
           {{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? "保存并编辑下一项" : "保存" }}
         </el-button>
       </div>
@@ -142,6 +143,12 @@ function selectCommunity(event: any) {
   });
 }
 
+
+function onSubmit(){
+  delete baTable.form.items!.communityName
+  baTable.onSubmit(formRef.value)
+}
+
 </script>
 
 <style scoped lang="scss">

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

@@ -38,7 +38,8 @@
         {{ data.mapId == 0 ? "未标记" : "已标记" }}
       </el-descriptions-item>
     </el-descriptions>
-    <parkingView style="margin-top: 20px" v-if="data.mapId !=0" :imgUrl="data.mapUrl" :mapId="data.mapId"
+    <parkingView v-if="data.mapId !=0" ref="parkingViewRef" style="margin-top: 20px" :imgUrl="data.mapUrl"
+                 :mapId="data.mapId"
                  :value="[data]"></parkingView>
 
   </el-dialog>
@@ -56,15 +57,20 @@ defineExpose({
   open
 });
 
+let parkingViewRef = ref();
 let data = ref({});
 
 function open(event) {
   let e = Object.assign({}, event);
   e.mapUrl = e.mapUrl ? JSON.parse(e.mapUrl)[0] : "";
-  data.value = e
-
-  console.log(data.value.mapUrl );
+  data.value = e;
   showDialog.value = true;
+  setTimeout(() => {
+    if (data.value.mapId != 0) {
+      parkingViewRef.value.setImgSize(e.mapUrl);
+      console.log(123);
+    }
+  }, 100);
 }
 
 </script>

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

@@ -1,28 +1,34 @@
 <template>
   <div class="default-main ">
-    <div style="display: flex;align-items: center">
-      <span>区县：</span>
-      <el-select v-model="districtId" placeholder="请选择区县" style="width: 150px;margin-right: 10px" @change="selectDstrict"
-        :clearable="true">
-        <el-option v-for="item in districtList" :label="item.districtName" :value="item.id"></el-option>
-      </el-select>
-      <span>小区：</span>
-      <el-select v-model="communityId" placeholder="请选择小区" style="width: 150px;margin-right: 10px"
-        @change="selectCommunity" :clearable="true">
-        <el-option v-for="item in communityList" :label="item.communityName" :value="item.id"></el-option>
-      </el-select>
-      <span>楼号：</span>
-      <el-select v-model="buildingId" placeholder="请选择楼号" style="width: 150px;margin-right: 10px" @change="selectBuilding"
-        :clearable="true">
-        <el-option v-for="item in buildingList" :label="item.buildingNumber" :value="item.id"></el-option>
-      </el-select>
-      <el-button v-if="auth('add')" type="primary" :disabled="buildingId == ''"
-        @click="openDialog('add')">登记车位</el-button>
-      <el-button v-if="auth('map')" type="primary" :disabled="buildingId == ''"
-        @click="parkingMapRef.open(buildingId)">车位绑定</el-button>
+    <div style="display: flex;justify-content: space-between;background: #ffffff;padding: 20px 20px">
+      <div style="display: flex;align-items: center">
+        <span>区县：</span>
+        <el-select v-model="districtId" placeholder="请选择区县" style="width: 150px;margin-right: 10px" @change="selectDstrict"
+                   :clearable="true">
+          <el-option v-for="item in districtList" :label="item.districtName" :value="item.id"></el-option>
+        </el-select>
+        <span>小区：</span>
+        <el-select v-model="communityId" placeholder="请选择小区" style="width: 150px;margin-right: 10px"
+                   @change="selectCommunity" :clearable="true">
+          <el-option v-for="item in communityList" :label="item.communityName" :value="item.id"></el-option>
+        </el-select>
+        <span>楼号：</span>
+        <el-select v-model="buildingId" placeholder="请选择楼号" style="width: 150px;margin-right: 10px" @change="selectBuilding"
+                   :clearable="true">
+          <el-option v-for="item in buildingList" :label="item.buildingNumber" :value="item.id"></el-option>
+        </el-select>
+        <el-button v-if="auth('add')" type="primary" :disabled="buildingId == ''"
+                   @click="openDialog('add')">登记车位</el-button>
+        <el-button v-if="auth('map')" type="primary" :disabled="buildingId == ''"
+                   @click="parkingMapRef.open(buildingId)">车位绑定</el-button>
+      </div>
+      <div>
+        <el-input v-model="quickSearch" placeholder="通过车位编号模糊检索" @keydown.enter="getData"></el-input>
+      </div>
     </div>
 
-    <el-table :data="parkingData" style="margin-top: 10px" border @row-dblclick="detailDialogRef.open($event)">
+
+    <el-table :data="parkingData" border @row-dblclick="detailDialogRef.open($event)">
       <el-table-column prop="districtName" label="区县"></el-table-column>
       <el-table-column prop="communityName" label="小区"></el-table-column>
       <el-table-column prop="parkingNumber" label="车位编号"></el-table-column>
@@ -53,12 +59,18 @@
           <span v-if="row.isHire == 1" style="margin: 0 5px;">{{ row.hirePrice }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="出租状态">
+      <el-table-column label="出租状态" width="100">
         <template #default="{ row }">
           <el-tag v-if="row.isHire == 1" :type="row.hireStatus == 1 ? 'info' : 'success'" style="margin: 0 5px;">{{ row.hireStatus
             == 1 ? '已租' : '待租' }}</el-tag>
         </template>
       </el-table-column>
+      <el-table-column label="是否标记" width="100">
+        <template #default="{ row }">
+          <el-tag :type="row.mapId == 0 ? 'danger' : 'success'" style="margin: 0 5px;">{{ row.mapId
+          == 0 ? '未标记' : '已标记' }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" width="150" header-align="center">
         <template #default="{ row }">
           <div style="display: flex;justify-content: center;">
@@ -78,9 +90,19 @@
         </template>
       </el-table-column>
     </el-table>
+    <el-pagination style="background: #ffffff;padding: 20px 20px"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[20, 100, 200, 500]"
+      :background = "true"
+      layout="sizes, prev, pager, next, jumper"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
 
     <editDialog ref="editDialogRef" @close="getData"></editDialog>
-    <parkingMark ref="parkingMapRef"></parkingMark>
+    <markDialog ref="parkingMapRef" @close="getData"></markDialog>
     <detailDialog ref="detailDialogRef"></detailDialog>
 
   </div>
@@ -93,7 +115,7 @@ import request from "/@/api/request";
 import { building_list, community_list, district_list, parking } from "/@/api/controllerUrls";
 import { onMounted, ref } from "vue";
 import editDialog from "./editDialog.vue"
-import parkingMark from "./markDialog.vue"
+import markDialog from "./markDialog.vue"
 import detailDialog from "./detailDialog.vue"
 
 
@@ -108,6 +130,12 @@ let editDialogRef = ref()
 let parkingMapRef = ref()
 let detailDialogRef = ref()
 
+let quickSearch = ref('')
+
+let total = ref(0)
+let currentPage = ref(1)
+let pageSize = ref(20)
+
 //区县列表
 let districtList = ref([])
 function getDistrictList() {
@@ -167,7 +195,10 @@ function getData() {
   request.index(parking, {
     districtId: districtId.value,
     communityId: communityId.value,
-    buildingId: buildingId.value
+    buildingId: buildingId.value,
+    quickSearch:quickSearch.value,
+    limit:pageSize.value,
+    page:currentPage.value
   }).then((res: any) => {
     if (res.code == 1) {
       parkingData.value = res.data.list;
@@ -175,6 +206,13 @@ function getData() {
   });
 }
 
+const handleSizeChange = (val: number) => {
+  getData()
+}
+const handleCurrentChange = (val: number) => {
+  getData()
+}
+
 function openDialog(type: string, data: any = {}) {
   editDialogRef.value.open(type, data, districtId, communityId, buildingId)
 }

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

@@ -10,7 +10,7 @@
          @mouseup="moveOff" @mousemove="dragMove" @mouseleave="moveOff" @dblclick="dbClick" @wheel.prevent="wheel">
       <div id="labelMap" :style="mapStyle">
         <div :key="index" class="labelItem "
-             :style="{left: item.mapX*width/item.mapInitWidth+'px',top:item.mapY*width/item.mapInitWidth+'px',backgroundColor:setMarkStyle(item)?.backGround,width:item.mapSize+'px',height:item.mapSize+'px',fontSize:item.mapSize/3+'px'}"
+             :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'}"
              v-for="(item,index) in mapData" @dblclick="dbClickItem(item)">
           <span :style="{color:setMarkStyle(item)?.color}">{{ setMarkStyle(item)?.label }}</span>
         </div>
@@ -253,8 +253,8 @@ function dbClickItem(item) {
 //提交表单
 function submit() {
   if (dialogTitle.value == "添加") {
-    formData.value.mapX = (formData.value.mapX - formData.value.mapSize / 2).toFixed(0);
-    formData.value.mapY = (formData.value.mapY - formData.value.mapSize / 2).toFixed(0);
+    // formData.value.mapX = (formData.value.mapX - formData.value.mapSize / 2).toFixed(0);
+    // formData.value.mapY = (formData.value.mapY - formData.value.mapSize / 2).toFixed(0);
     formData.value.mapId = props.mapId;
     postMark();
     showDialog.value = false;

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

@@ -10,7 +10,7 @@
          @mouseup="moveOff" @mousemove="dragMove" @mouseleave="moveOff" @wheel.prevent="wheel">
       <div id="labelMap" :style="mapStyle">
         <div :key="index" class="labelItem "
-             :style="{left: item.mapX*width/item.mapInitWidth+'px',top:item.mapY*width/item.mapInitWidth+'px',backgroundColor:setMarkStyle(item)?.backGround,width:item.mapSize+'px',height:item.mapSize+'px',fontSize:item.mapSize/3+'px'}"
+             :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'}"
              v-for="(item,index) in props.value">
           <span :style="{color:setMarkStyle(item)?.color}">{{ setMarkStyle(item)?.label }}</span>
         </div>
@@ -51,6 +51,9 @@ const props = defineProps({
   }
 });
 
+defineExpose({
+  setImgSize
+})
 
 //图片高度
 let height = ref(0);
@@ -73,9 +76,9 @@ let labelMap;
 
 onMounted(() => {
   labelMap = document.getElementById("labelMap");
-  setTimeout(()=>{
-    setImgSize(props.imgUrl);
-  },100)
+  // setTimeout(()=>{
+  //   setImgSize(props.imgUrl);
+  // },100)
 });
 
 
@@ -88,13 +91,9 @@ function setImgSize(url) {
     height.value = m.clientWidth * (img.naturalHeight / img.naturalWidth);
   }
   img.src = url;
+  console.log(m.clientWidth);
 }
 
-watch(() => props.imgUrl, (newValue, oldValue) => {
-  console.log(newValue);
-  setImgSize(newValue);
-});
-
 
 //拖拽参数
 let dragOption = reactive({