经开分局优化

linwe

2025-11-28 bc84029a7e70dcff40e393a9c09b434592d4b1dc

经开分局优化

 src/components/map/components/mapSearchPopup.vue

@@ -9,94 +9,107 @@
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div>
        <div v-if="mapSearchPopup" class="popup-dom" id="mapSearchPopup">
            <div style="transform: translate(-50%, 0);">
                <!-- 样式自己修改 -->
                <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
                    {{ mapSearchPopupData.name }}
                </div>
                <div class="bottom-arrow"></div>
            </div>
  <div>
    <div v-if="mapSearchPopup" class="popup-dom" id="mapSearchPopup">
      <div style="transform: translate(-50%, 0);">
        <!-- 样式自己修改 -->
        <div class="content" :class="{ 'scale-dom': scaleDomFlag }">
          <div class="url-code" v-if="mapSearchPopupData.showImg">
            <el-image style="width: 100px; height: 100px" :src="mapSearchPopupData.url"
              :preview-src-list="[mapSearchPopupData.url]">
            </el-image>
          </div>
          {{ mapSearchPopupData.name }}
        </div>
        <div class="bottom-arrow"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: 'mapSearchPopup',
  name: 'mapSearchPopup',

    inject: ["getWidth", 'userInfo'],
  inject: ["getWidth", 'userInfo'],

    data () {
        return {
            scaleDomFlag: false
        }
    },

    computed: {
        ...mapGetters([
            'mapSearchPopup',
            'mapSearchPopupData'
        ])
    },

    mounted () {
        if (this.getWidth() > 7000) {
            this.scaleDomFlag = true
        } else {
            this.scaleDomFlag = false
        }

    },

    methods: {

  data () {
    return {
      scaleDomFlag: false
    }
  },

  computed: {
    ...mapGetters([
      'mapSearchPopup',
      'mapSearchPopupData'
    ])
  },

  mounted () {
    if (this.getWidth() > 7000) {
      this.scaleDomFlag = true
    } else {
      this.scaleDomFlag = false
    }

  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>
.popup-dom {
    position: fixed;
    top: -16px;
    left: 0;
    z-index: 1 !important;
  position: fixed;
  top: -16px;
  left: 0;
  z-index: 1 !important;

    &>.popup-box {
        position: relative;
  &>.popup-box {
    position: relative;
  }

  .bottom-arrow {
    position: absolute;
    left: 50%;
    bottom: 0px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: $bg-color;
    transform: translate(-50%, 100%);
  }

  .scale-dom {
    transform: scale(3);
    transform-origin: left;
  }

  .content {
    padding: 0.5vh;
    width: 220px;
    background: $bg-color;
    border-radius: 4px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .url-code {
      ::v-deep(img) {
        width: 64px;
        height: 64px;
        vertical-align: middle;
      }
    }

    .bottom-arrow {
        position: absolute;
        left: 50%;
        bottom: 0px;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: $bg-color;
        transform: translate(-50%, 100%);
    }

    .scale-dom {
        transform: scale(3);
        transform-origin: left;
    }

    .content {
        padding: 0.5vh;
        width: 220px;
        background: $bg-color;
        border-radius: 4px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;


    }
  }

}
</style>

 src/components/mapAddressSearchBox/index.vue

@@ -136,6 +136,8 @@

      this.$store.commit("SET_MAPSEARCHPOPUPDATA", {
        ...item,
        url: 'http://47.217.32.232/qrcode_image/' + item.picName,
        showImg: true,
        name: item.address
      })


 src/styles/media/index.scss

@@ -2686,9 +2686,21 @@
                    }
                }

                .popup-dom .content .data-box .line {
                .popup-dom {

                  .content .data-box .line {
                    font-size: countSizeVw(14, 1920);
                }
                  }


                  .url-code {
                    img {
                      width: countSizeVh(64);
                      height: countSizeVh(64);
                      vertical-align: middle;
                    }
                  }
                } 

            }


 src/views/home/components/dialog/countByDetailsBox.vue

@@ -12,22 +12,22 @@
  <el-dialog :title="landTitleName" :visible.sync="landVisible" :before-close="landBeforeClose" :modal="true"
    :modal-append-to-body="false" :close-on-click-modal="false" class="land-details-box">
    <div class="header">
      <!-- <div v-show="landType == 2">
      <div>
        标准地址：
        <input type="text" v-model="address" placeholder="请输入标准地址" />
      </div> -->
      </div>
      <!-- <div v-show="landType == 1">
        责任区名称：
        <input type="text" v-model="landSearchAoiName" placeholder="请输入责任区名称" />
      </div> -->
      <div>
      <!-- <div>
        包干民警：
        <input type="text" v-model="policeName" placeholder="请输入包干民警名称" />
      </div>
      <div>
      </div> -->
      <!-- <div>
        联系电话：
        <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
      </div>
      </div> -->
      <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button>
    </div>
@@ -44,10 +44,16 @@
            <span>{{ (landPage.currentPage - 1) * landPage.pageSize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="town" label="镇街"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="community" label="村社区"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="address" label="标准地址"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="policeName" label="包干民警"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
        <!-- <el-table-column :show-overflow-tooltip="true" prop="policeName" label="包干民警"></el-table-column> -->
        <!-- <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column> -->
        <el-table-column label="门牌类型">
          <template slot-scope="scope">
            {{ getmplx(scope.row.type) || '中门牌' }}
          </template>
        </el-table-column>
        <!-- 是否制牌 -->
        <el-table-column prop="isCardMaking" label="是否制牌">
          <template slot-scope="scope">
@@ -111,6 +117,59 @@
  },

  methods: {
    getmplx (type) {
      let echartsData = [
        {
          type: 'building',
          value: 0,
          onValue: 0,
          offValue: 0,
          notValue: 0,
          name: '楼栋牌'
        },
        {
          type: 'aoi',
          value: 0,
          onValue: 0,
          offValue: 0,
          notValue: 0,
          name: '大门牌'
        },
        {
          type: 'road_no',
          value: 0,
          onValue: 0,
          offValue: 0,
          notValue: 0,
          name: '中门牌'
        },

        {
          type: 'unit',
          value: 0,
          onValue: 0,
          offValue: 0,
          notValue: 0,
          name: '单元牌'
        },
        {
          type: 'room',
          value: 0,
          onValue: 0,
          offValue: 0,
          notValue: 0,
          name: '户室牌'
        },

      ]
      // 查找匹配项，如果找不到则返回中门牌
      const result = echartsData.find(item => item.type === type)
      // console.log(result, "99999")
      const name = result || echartsData.find(item => item.type === 'road_no')
      return name.name
    },


    previewImage (url) {
      // 检查URL是否存在
      if (!url) {