地址搜索页面

linwe

2024-12-25 0045247a30b5606f4b9671f5ff5874242d20494d

地址搜索页面

 src/views/comprehensiveSearch/components/addressSearch.vue

New file
@@ -0,0 +1,101 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2024-12-20 18:04:37
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-21 16:59:07
 * @FilePath: \srs-police-affairs\src\views\comprehensiveSearch\components\enterpriseList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by shuishen, All Rights Reserved. 
-->
<!--  -->
<template>
  <div class='enterprise-list-box'>
    <searchGroup></searchGroup>
    <!-- 地址详情 -->
    <div class='search-detail-box'>
      <div class='search-detail-content'>
        <div class='search-detail-item'>
          <div class='search-detail-item-title'>前海卓越时代广场</div>
          <div class='search-detail-item-title'>商务写字楼</div>
          <div class='search-detail-item-title'>广东省深圳市宝安区新安街道</div>
        </div>
      </div>
    </div>


    <!-- 楼盘表 -->
    <buildingTable></buildingTable>
    <!-- 专题信息 -->
    <basicTopics></basicTopics>

  </div>
</template>

<script>
import searchGroup from './searchGroup'
import basicTopics from './basicTopics'
import buildingTable from './buildingTable'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    searchGroup,
    basicTopics,
    buildingTable

  },
  // 父组件给子组件传过来的参数
  props: {
  },
  data() {
    //这里存放数据
    return {
      show: false,
      tableData: [],
      currentRow: null
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange(val) {
      this.currentRow = val
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() { }, //生命周期 - 创建之前
  beforeMount() { }, //生命周期 - 挂载之前
  beforeUpdate() { }, //生命周期 - 更新之前
  updated() { }, //生命周期 - 更新之后
  beforeDestroy() { }, //生命周期 - 销毁之前
  destroyed() { }, //生命周期 - 销毁完成
  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.enterprise-list-box {
  height: 100%;
  display: flex;
  flex-direction: column;

  .list {
    height: 0;
    flex: 1;
  }
}
</style>

 src/views/comprehensiveSearch/components/basicTopics.vue

New file
@@ -0,0 +1,158 @@
<!--  -->
<template>
    <div class='basicTopics'>
        <div class="buildingTable-title" @click="openClick">
            <div>
                <img src="../../../../public/img/icon/business.png" alt="" srcset="">
            </div>
            <div style="margin-left: 5px;">
                <div class="buildingTable-title-text">
                    <span>专题信息</span>
                </div>
                <div class="buildingTable-title-text-botom"></div>
            </div>
        </div>

        <div class="basicTopics-info" v-if="basicTopics">
            <div class="basicTopics-info-item">
                <img src="../../../../public/img/icon/business.png" alt="" srcset="">
                <div>
                    <span>专题信息</span>
                    <div class="basicTopics-info-item-num">
                        908
                    </div>
                </div>
            </div>

            <div class="basicTopics-info-item">
                <img src="../../../../public/img/icon/business.png" alt="" srcset="">
                <div>
                    <span>专题信息</span>
                    <div class="basicTopics-info-item-num">
                        908
                    </div>
                </div>
            </div>

            <div class="basicTopics-info-item">
                <img src="../../../../public/img/icon/business.png" alt="" srcset="">
                <div>
                    <span>专题信息</span>
                    <div class="basicTopics-info-item-num">
                        908
                    </div>
                </div>
            </div>
        </div>
        <enterpriseList v-if="basicTopics"> </enterpriseList>
    </div>
</template>

<script>
import enterpriseList from './enterpriseList'

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        enterpriseList
    },
    data() {
        //这里存放数据
        return {
            basicTopics: false

        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        openClick() {
            this.basicTopics = !this.basicTopics
        }

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类


.basicTopics {
    margin-top: 10px;
    overflow: hidden;
    overflow-y: auto;
}

.buildingTable-title {
    display: flex;

    img {
        width: 30px;
        height: 30px;
    }

}

.buildingTable-title-text {
    display: flex;
    font-size: 16px;
    line-height: 24px;
    width: 90px;
}

.buildingTable-title-text:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 13px;
    border-top: solid 6px transparent;
    border-left: solid 6px #ffff;
    border-bottom: solid 6px transparent;
    margin-top: 6px;
}

.buildingTable-title-text-botom {
    height: 4px;
    background: linear-gradient(to right, #4c90ff, #c0d2f1);
}

.basicTopics-info {
    margin: 10px;
    display: flex;
    justify-content: space-between;

    .basicTopics-info-item {
        display: flex;
        // background-color: #c0d2f1;
        border-radius: 5px;
        padding: 10px;

        span {
            color: red;
        }

        .basicTopics-info-item-num {
            text-align: left;
        }
    }

}
</style>

 src/views/comprehensiveSearch/components/buildingTable.vue

New file
@@ -0,0 +1,116 @@
<!--  -->
<template>
    <div class='buildingTable'>
        <div class="buildingTable-title" @click="exportClick">
            <div>
                <img src="../../../../public/img/icon/business.png" alt="" srcset="">
            </div>
            <div style="margin-left: 5px;">
                <div class="buildingTable-title-text">
                    <span>楼盘表</span>
                </div>
                <div class="buildingTable-title-text-botom"></div>
            </div>
        </div>
        <div v-if="buildingTableShow" class="list">
            <div class="buildingTable-item" v-for="(item, index) in 60" :key="index">
                <div class="buildingTable-item-text">
                    {{ index }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            buildingTableShow: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        exportClick() {
            console.log('点击了');
            this.buildingTableShow = !this.buildingTableShow;
        },

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.buildingTable {
    overflow: hidden;
    overflow-y: auto;
}

.buildingTable-title {
    display: flex;

    img {
        width: 30px;
        height: 30px;
    }
}

.buildingTable-title-text {
    display: flex;
    font-size: 16px;
    line-height: 24px;
    width: 90px;
}

.buildingTable-title-text:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: 13px;
    border-top: solid 6px transparent;
    border-left: solid 6px #ffff;
    border-bottom: solid 6px transparent;
    margin-top: 6px;
}

.buildingTable-title-text-botom {
    height: 4px;
    background: linear-gradient(to right, #4c90ff, #c0d2f1);
}

.list {
    display: flex;
    flex-wrap: wrap;
}

.buildingTable-item-text {
    background-color: #f1f1f1;
    margin: 10px;
    color: black;
    text-align: center;
    font-size: 16px;
}
</style>

 src/views/comprehensiveSearch/components/companyDetail.vue

@@ -13,7 +13,7 @@
          <div class="title">企业详情</div>
          <div class="content-title">
            <!-- <div class="item-title">续存</div> -->
            <div class="item-title">{{ rowData.placeName }}</div>
            <div class="item-title">场所名称：{{ rowData.placeName }}</div>
          </div>
          <div>

@@ -337,9 +337,11 @@
//@import url(); 引入公共css类

.back-box {
  background-color: #602025;
  background-color: #f0eaeb;
  width: 60px;
  margin: 10px;
  color: black;
  border-radius: 10px;
}

.enterpriseList {

 src/views/comprehensiveSearch/components/companySearch.vue

 src/views/comprehensiveSearch/components/enterpriseList.vue

@@ -10,83 +10,78 @@
-->
<!--  -->
<template>
  <div class='enterprise-list-box'>
    <searchGroup></searchGroup>
    <div class='enterprise-list-box'>

    <div class="list">
      <!-- 企业列表 -->
      <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange"
        style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column align="center" prop="name" label="企业名称">
        </el-table-column>
      </el-table>
        <div class="list">
            <!-- 企业列表 -->
            <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange"
                style="width: 100%">
                <el-table-column align="center" type="index" label="序号" width="50">
                </el-table-column>
                <el-table-column align="center" prop="name" label="企业名称">
                </el-table-column>
            </el-table>

      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="100"> </el-pagination>
            <!-- <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="100"> </el-pagination> -->
        </div>
    </div>
  </div>
</template>

  
<script>
import searchGroup from './searchGroup'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    searchGroup,
  },
  // 父组件给子组件传过来的参数
  props: {
  },
  data () {
    //这里存放数据
    return {
      show: false,
      tableData: [],
      currentRow: null
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    setCurrent (row) {
      this.$refs.singleTable.setCurrentRow(row)
    //import引入的组件需要注入到对象中才能使用
    components: {},
    // 父组件给子组件传过来的参数
    props: {},
    data() {
        //这里存放数据
        return {
            show: false,
            tableData: [],
            currentRow: null
        }
    },
    handleCurrentChange (val) {
      this.currentRow = val
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row)
        },
        handleCurrentChange(val) {
            this.currentRow = val
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

.enterprise-list-box {
  height: 100%;
  display: flex;
  flex-direction: column;
    height: 100%;
    display: flex;
    flex-direction: column;

  .list {
    height: 0;
    flex: 1;
  }
    .list {
        height: 0;
        flex: 1;
    }
}
</style>

 src/views/comprehensiveSearch/index.vue

@@ -18,8 +18,8 @@
      </div>

      <div class="search-result-box">
        <enterpriseList v-if="searchIndex == 1"></enterpriseList>
        <companyList v-if="searchIndex == 2"></companyList>
        <addressSearch v-if="searchIndex == 1"></addressSearch>
        <companySearch v-if="searchIndex == 2"></companySearch>
      </div>
    </div>

@@ -28,32 +28,32 @@
</template>

<script>
import enterpriseList from './components/enterpriseList'
import companyList from './components/companyList'
import addressSearch from './components/addressSearch'
import companySearch from './components/companySearch'

import { initMapPosition } from '@/utils/mapPositionInit'

export default {
  // 将当前实例注入到子组件
  provide () {
  provide() {
    return {
      cSearchEle: this,
    }
  },

  components: {
    enterpriseList,
    companyList
    addressSearch,
    companySearch
  },

  data () {
  data() {
    return {
      boxShow: false,
      searchIndex: 1,
    }
  },

  created () {
  created() {
    const that = this

    that.$nextTick(() => {
@@ -61,7 +61,7 @@
    })
  },

  mounted () {
  mounted() {
    this.$parent.$parent.resize('400px', true)

    this.$nextTick(() => {
@@ -76,17 +76,17 @@
  },

  methods: {
    change (type) {
    change(type) {
      this.searchIndex = type
    },

    // 大小重置
    boxResize (val) {
    boxResize(val) {
      this.boxShow = val
    },
  },

  destroyed () {
  destroyed() {
    this.$parent.$parent.resize('0px')
  }
}