综合搜索页面样式调整

shuishen

2024-12-23 3a37e1456ccbfa612c87745b6c9419e04a93eb7b

综合搜索页面样式调整

 public/images/sign.png

 src/styles/media/index.scss

@@ -3266,6 +3266,131 @@
    }
  }

  // 综合搜索页面样式
  .comprehen-page {
    .menu-chang-btns {
      padding: countSizeVh(8) countSizeVw(10, 1920);

      .el-button {
        padding: 0 countSizeVw(10, 1920);
        height: countSizeVh(34);
        line-height: countSizeVh(34);
        font-size: countSizeVh(18);
      }
    }

    .search-result-box {
      padding: 0 countSizeVw(10, 1920);

      .search-group-input {
        width: 100%;
        display: flex;

        .el-input,
        .el-button {
          font-size: countSizeVh(14);
          line-height: countSizeVh(32);
        }

        .el-button {
          padding: 0 countSizeVw(10, 1920);
        }
      }

      .list {
        margin: countSizeVh(8) 0;

        .enterprise-list-item {
          display: flex;
          // justify-content: flex-start;
          text-align: left;
          background-color: rgba(29, 92, 228, 0.3);
          line-height: 20px;
          margin: countSizeVh(8) 0;
          border-radius: countSizeVh(8);
          padding: countSizeVh(8);
          min-height: countSizeVh(112);
          box-shadow: inset 0 0 countSizeVh(10) countSizeVh(-4) #fff;
          cursor: pointer;

          &:first-child {
            margin-top: 0;
          }

          &:last-child {
            margin-bottom: 0;
          }

          .enterprise-list-item-index {
            width: countSizeVw(50, 1920);
            text-align: center;

            .index_text {
              position: relative;
              width: countSizeVw(32, 1920);
              height: countSizeVw(32, 1920);
              line-height: countSizeVw(24, 1920);
              font-size: countSizeVh(14);
              background: url(/images/sign.png) center no-repeat;
              background-size: 100% 100%;
            }
          }

          .enterprise-list-item-wrapper {
            width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .enterprise-list-item-title {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              font-size: countSizeVh(14);
              // font-weight: bold;
              height: countSizeVh(24);


              .enterprise-list-item-type {
                height: countSizeVh(24);
                line-height: countSizeVh(24);
                background-color: #bfbfbf;
                border-radius: countSizeVh(5);
                padding: 0 countSizeVh(5);
                box-sizing: border-box;
              }
            }

            .enterprise-list-item-content {
              height: 0;
              flex: 1;
              font-size: countSizeVh(12);
              color: #bfbfbf;
              // white-space: nowrap;
              /* 确保文本不会换行 */
              // overflow: hidden;
              /* 隐藏超出容器的文本 */
              // text-overflow: ellipsis;
              /* 当文本超出容器时显示省略号 */
              // width: 380px;
              /* 设置一个宽度，你可以根据需要调整 */
            }

            .enterprise-list-item-contact {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              height: countSizeVh(24);
              font-size: countSizeVh(14);
              color: red;
            }
          }
        }
      }
    }
  }

  .site-dialog-popup,
  .prm-dialog-popup {
    .el-dialog {

 src/views/comprehensiveSearch/components/companyDetail.vue

@@ -1,218 +1,215 @@
<!--  -->
<template>
    <div class=''>
        <!-- 返回按钮 -->
        <div class="back-box">
            <div class="back-btn" @click="backClick">返回</div>
        </div>
  <div class=''>
    <!-- 返回按钮 -->
    <div class="back-box">
      <div class="back-btn" @click="backClick">返回</div>
    </div>


        <div class="enterpriseList">
            <div class="title">企业详情</div>
            <div>
                <div class="content">
                    <div class="content-title">
                        <div class="item-title">续存</div>
                        <div class="item-title">{{ rowData.placeName }}</div>
                    </div>
                    <div>
                        <el-row :gutter="20">
                            <el-col :span="12" style="display: flex;">
                                <div class=" ">法人代表：</div>
                                <div class=" ">{{ rowData.principal }}</div>
                            </el-col>
                            <el-col :span="12" style="display: flex;">
                                <div class=" ">法人电话：</div>
                                <div class=" ">{{ rowData.principalPhone }}</div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <!-- <el-col :span="12" style="display: flex;">
    <div class="enterpriseList">
      <div class="title">企业详情</div>
      <div>
        <div class="content">
          <div class="content-title">
            <div class="item-title">续存</div>
            <div class="item-title">{{ rowData.placeName }}</div>
          </div>
          <div>
            <el-row :gutter="20">
              <el-col :span="12" style="display: flex;">
                <div class=" ">法人代表：</div>
                <div class=" ">{{ rowData.principal }}</div>
              </el-col>
              <el-col :span="12" style="display: flex;">
                <div class=" ">法人电话：</div>
                <div class=" ">{{ rowData.principalPhone }}</div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <!-- <el-col :span="12" style="display: flex;">
                                <div class=" ">注册时间：</div>
                                <div class=" ">2016-10-10</div>
                            </el-col> -->
                            <el-col :span="24" style="display: flex;">
                                <div class=" ">地址：</div>
                                <div class=" ">{{ rowData.location }}</div>
                            </el-col>
                        </el-row>
                    </div>

                </div>

                <div class="item-box">
                    <div class="item-title">企业人数：100 人</div>
                    <div @click="openList" class="detail">员工详情 >></div>
                </div>

                <div class="item-detail">
                    <div class="item-title">企业信用代码：91440300MA5DAX598F</div>
                    <div class="item-title">企业注册地址：深圳市福田区沙头街道天安社区泰然六路泰然..</div>
                    <div class="item-title">企业经营地址：广东省深圳市宝安区新安街道海天路15号前海..</div>
                    <div class="item-title">企业经营范围：一般经营项目是:钟表、手表、配件的研发与..</div>
                    <div class="item-title">企业类型：有限责任公司</div>
                    <div class="item-title">行业：批发和零售业科技型企业标签名称：</div>
                    <div class="item-title">-上市板块：-</div>
                </div>
            </div>
              <el-col :span="24" style="display: flex;">
                <div class=" ">地址：</div>
                <div class=" ">{{ rowData.location }}</div>
              </el-col>
            </el-row>
          </div>

        </div>

        <div class="item-box">
          <div class="item-title">企业人数：100 人</div>
          <div @click="openList" class="detail">员工详情 >></div>
        </div>

        <!-- elment 弹窗 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>员工信息</span>
            <el-table :data="dataList"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
                element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText" style="width: 100%"
                @cell-click="cellClick" v-if="current == 1">
                <el-table-column align="center" prop="tenantName" label="租户名称"> </el-table-column>
                <el-table-column align="center" prop="phone" label="租户电话"> </el-table-column>
                <el-table-column align="center" prop="rentalTime" label="租房时间"> </el-table-column>
                <el-table-column align="center" prop="dueTime" label="到期时间"> </el-table-column>

            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <div class="item-detail">
          <div class="item-title">企业信用代码：91440300MA5DAX598F</div>
          <div class="item-title">企业注册地址：深圳市福田区沙头街道天安社区泰然六路泰然..</div>
          <div class="item-title">企业经营地址：广东省深圳市宝安区新安街道海天路15号前海..</div>
          <div class="item-title">企业经营范围：一般经营项目是:钟表、手表、配件的研发与..</div>
          <div class="item-title">企业类型：有限责任公司</div>
          <div class="item-title">行业：批发和零售业科技型企业标签名称：</div>
          <div class="item-title">-上市板块：-</div>
        </div>
      </div>

    </div>


    <!-- elment 弹窗 -->
    <el-dialog title="提示" :modal-append-to-body="false" :visible.sync="dialogVisible" width="30%"
      :before-close="handleClose">
      <span>员工信息</span>
      <el-table :data="dataList"
        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" v-loading="residentLoading"
        element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(17, 38, 163, 1)" :empty-text="residentNoDataText" style="width: 100%"
        @cell-click="cellClick" v-if="current == 1">
        <el-table-column align="center" prop="tenantName" label="租户名称"> </el-table-column>
        <el-table-column align="center" prop="phone" label="租户电话"> </el-table-column>
        <el-table-column align="center" prop="rentalTime" label="租房时间"> </el-table-column>
        <el-table-column align="center" prop="dueTime" label="到期时间"> </el-table-column>

      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>


import {
    getDetail
} from '@/api/company/company';
  getDetail
} from '@/api/company/company'


export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    // 父组件给子组件传过来的参数
    props: {
        rowData: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    data() {
        //这里存放数据
        return {
            dialogVisible: false,
            dataList: [],
            residentLoading: false,
            residentNoDataText: '暂无数据',
  //import引入的组件需要注入到对象中才能使用
  components: {},
  // 父组件给子组件传过来的参数
  props: {

        };
  },
  data () {
    //这里存放数据
    return {
      dialogVisible: false,
      dataList: [],
      residentLoading: false,
      residentNoDataText: '暂无数据',
      rowData: {},
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    init (id) {
      this.getDetailById(id)
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

        getDetailById(id) {
            getDetail(id).then(res => {
                this.rowData = res.data
            })
        },

        backClick() {
            console.log('返回')
            this.$EventBus.$emit("showDetail", {
                showDetail: false
            })
        },
        openList() {
            this.dialogVisible = true
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                }).catch(_ => { });
        }

    getDetailById (id) {
      getDetail(id).then(res => {
        this.rowData = res.data
      })
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    backClick () {
      this.$parent.showDetailClick()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getDetailById(this.rowData.id)

    openList () {
      this.dialogVisible = true
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发

    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        }).catch(_ => { })
    }

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

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

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

.enterpriseList {
    color: black;
  color: black;
  margin: 10px;

  .content {
    text-align: left;
    background-color: #d6e3ff;
    margin: 10px;
    border-radius: 10px;
    padding: 5px;

    .content {
        text-align: left;
        background-color: #d6e3ff;
        margin: 10px;
        border-radius: 10px;
        padding: 5px;
    .content-title {
      display: flex;
      justify-content: flex-start;

        .content-title {
            display: flex;
            justify-content: flex-start;

            .item-title {
                margin: 3px 5px;
            }
        }
      .item-title {
        margin: 3px 5px;
      }
    }
  }

    .item-box {
        text-align: left;
        background-color: #f2f2f7;
        margin: 10px;
        padding: 5px;
        display: flex;
        justify-content: space-between;
        font-size: 16px;
        border-radius: 10px;
  .item-box {
    text-align: left;
    background-color: #f2f2f7;
    margin: 10px;
    padding: 5px;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    border-radius: 10px;

        .detail {
            color: #0000ff;
        }
    .detail {
      color: #0000ff;
    }
  }

    .item-detail {
        text-align: left;
        background-color: #f2f2f7;
        margin: 10px;
        border-radius: 10px;
        padding: 5px;
    }
  .item-detail {
    text-align: left;
    background-color: #f2f2f7;
    margin: 10px;
    border-radius: 10px;
    padding: 5px;
  }

}
</style>

 src/views/comprehensiveSearch/components/companyList.vue

@@ -1,192 +1,123 @@
<!--  -->
<template>
    <div class=''>
        <div class="enterpriseList" v-if="!showDetail">
            <div v-for="(item, index) in dataList" :key="index" @click="change(item)">
                <div class="enterpriseListItem">
                    <div class="enterpriseListItemIndex">
                        <div class="index_text">
                            {{ index + 1 }}
                        </div>
                    </div>
                    <div>
                        <div class="enterpriseListItemTitle">
                            <div>{{ item.placeName }}</div>
                            <div class="enterpriseListItemType">企业</div>
                        </div>
                        <div class="enterpriseListItemContent">
                            {{ item.location }}
                        </div>
                        <div class="enterpriseListItemContact">
                            <div>{{ item.principal }}</div>
                            <div>{{ item.principalIdCard }}</div>
                            <div>{{ item.principalPhone }}</div>
                        </div>
                    </div>
  <div class='company-list-box'>
    <searchGroup></searchGroup>

                </div>
            </div>
            <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="100"> </el-pagination>
    <div class="list" v-show="!showDetail">
      <div class="enterprise-list-item" v-for="(item, index) in dataList" :key="index"
        @click="showDetailClick(item, true)">
        <div class="enterprise-list-item-index">
          <div class="index_text">
            {{ index + 1 }}
          </div>
        </div>

        <companyDetail v-if="showDetail" :rowData="rowData"></companyDetail>
        <div class="enterprise-list-item-wrapper">
          <div class="enterprise-list-item-title">
            <div>{{ item.placeName }}</div>
            <div class="enterprise-list-item-type">企业</div>
          </div>

          <div class="enterprise-list-item-content">
            {{ item.location }}
          </div>

          <div class="enterprise-list-item-contact">
            <div>{{ item.principal }}</div>
            <div>{{ item.principalIdCard }}</div>
            <div>{{ item.principalPhone }}</div>
          </div>
        </div>
      </div>
    </div>

    <companyDetail ref="companyDetail" v-show="showDetail"></companyDetail>
  </div>
</template>

<script>
import searchGroup from './searchGroup'

import {
    searchPlaceList
} from '@/api/company/company';
  searchPlaceList
} from '@/api/company/company'

import companyDetail from './companyDetail'


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

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        // this.init('');
        this.$EventBus.$on("searchKey", (params) => {
            this.searchIndex = params.searchIndex
            if (params.searchKey) {
                this.init(params.searchKey)
            }
        })
  data () {
    //这里存放数据
    return {
      showDetail: false,
      dataList: [],
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    showDetailClick (data = {}, flag = false) {
      this.showDetail = flag

        this.$EventBus.$on("showDetail", (params) => {
            this.showDetail = params.showDetail
        })

      if (flag) {
        this.$refs.companyDetail.init(data.id)
      }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发

    handleCurrentChange (val) {
      this.currentRow = val
    },

    searchBtn (params) {
      searchPlaceList(params.searchContent).then(res => {
        this.dataList = res.data.data.records
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

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

.enterpriseList {
    margin: 10px;
.company-list-box {
  height: 100%;
  display: flex;
  flex-direction: column;

    .enterpriseListItem {
        display: flex;
        // justify-content: flex-start;
        text-align: left;
        background-color: #fff;
        line-height: 20px;
        margin: 10px;
        border-radius: 10px;
        padding: 10px;
  .list {
    height: 0;
    flex: 1;
  }
}

        .enterpriseListItemIndex {
            width: 50px;
            text-align: center;

            .index_text {
                position: relative;
                width: 20px;
                height: 20px;
                background-color: blue;
                border-radius: 45%;

                // 写一个伪元素三角形 让伪元素往上移动

                &::after {
                    position: absolute;
                    bottom: -5px;
                    left: 0;
                    content: '';
                    display: inline-block;
                    width: 0;
                    height: 0;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid #2400ee;
                    // 三角形旋转
                    transform: rotate(180deg);
                }
            }


        }

        .enterpriseListItemTitle {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            // font-weight: bold;
            color: #0e0d0d;

            .enterpriseListItemType {
                background-color: #cfcbcb;
                border-radius: 5px;
                padding: 2px 5px;
            }
        }

        .enterpriseListItemContent {
            font-size: 12px;
            color: #cfcbcb;
            // white-space: nowrap;
            /* 确保文本不会换行 */
            // overflow: hidden;
            /* 隐藏超出容器的文本 */
            // text-overflow: ellipsis;
            /* 当文本超出容器时显示省略号 */
            // width: 380px;
            /* 设置一个宽度，你可以根据需要调整 */
        }

        .enterpriseListItemContact {
            color: red;
            display: flex;
            justify-content: space-between;
        }
    }
.list {
  overflow: hidden;
  overflow-y: auto;
}
</style>

 src/views/comprehensiveSearch/components/enterpriseList.vue

@@ -1,74 +1,92 @@
<!--
 * @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='' v-if="serachIndex == 1">
  <div class='enterprise-list-box'>
    <searchGroup></searchGroup>

        <div class="enterpriseList">
            <!-- 企业列表 -->
            <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>
        </div>
      <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="100"> </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    // 父组件给子组件传过来的参数
    props: {
    },
    data() {
        //这里存放数据
        return {
            show: false,
            serachIndex: 1,
            tableData: [],
            currentRow: null
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
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)
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.$EventBus.$on("searchIndex", (params) => {
            this.serachIndex = params.serachIndex
        })
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    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类

.enterpriseList {
    margin: 10px;
.enterprise-list-box {
  height: 100%;
  display: flex;
  flex-direction: column;

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

 src/views/comprehensiveSearch/components/searchGroup.vue

@@ -1,94 +1,37 @@
<!--  -->
<template>
    <div class=''>
        <!-- // 地址搜索 企业搜索 两个按钮  -->
        <div class="search-group-box">
            <el-button @click="change(1)" :type="serachIndex == 1 ? 'primary' : ''">地址搜索</el-button>
            <el-button @click="change(2)" :type="serachIndex == 2 ? 'primary' : ''">企业搜索</el-button>
        </div>
        <!-- 企业地址搜索框-->
        <div class="search-group-input">
            <el-input clearable v-model="searchKey" placeholder="请输入内容"></el-input>
            <el-button @click="searchClick" type="primary" icon="el-icon-search" plain></el-button>
        </div>

    </div>
  <!-- 企业地址搜索框-->
  <div class="search-group-input">
    <el-input size="small" clearable v-model="searchContent" placeholder="请输入内容"></el-input>
    <el-button size="small" @click="searchClick" type="primary" icon="el-icon-search" plain></el-button>
  </div>
</template>

<script>
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    // 父组件给子组件传过来的参数
    props: {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  // 父组件给子组件传过来的参数
  props: {
  },
  data () {
    //这里存放数据
    return {
      searchContent: '',
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    searchClick () {
      this.$parent.searchBtn({
        searchContent: this.searchContent
      })
    },
    data() {
        //这里存放数据
        return {
            serachIndex: 1,
            searchKey: '',
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        change(type) {
            this.serachIndex = type
            this.$EventBus.$emit("searchIndex", {
                searchIndex: this.serachIndex
            })
        },
        searchClick() {
            // 判断是综合搜索还是企业搜索
            if (this.serachIndex == 1) {
                // 搜索地址
            } else {
                // 搜索企业
                this.$EventBus.$emit("searchKey", {
                    searchKey: this.searchKey
                })
            }
        },

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

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

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

.search-group-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 10px;
}

.search-group-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 10px;

    .el-input {
        width: 80%;
    }
}
</style>
<style lang='scss' scoped></style>

 src/views/comprehensiveSearch/index.vue

@@ -2,21 +2,25 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2024-12-09 19:55:09
 * @FilePath: \srs-police-affairs\src\views\policeAlarmRecordsManage\index.vue
 * @LastEditTime: 2024-12-21 17:33:38
 * @FilePath: \srs-police-affairs\src\views\comprehensiveSearch\index.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
  <div class="site-page-home police-page container">
  <div class="comprehen-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">
      <div class="menu-chang-btns">
        <el-button @click="change(1)" :type="searchIndex == 1 ? 'primary' : ''">地址搜索</el-button>
        <el-button @click="change(2)" :type="searchIndex == 2 ? 'primary' : ''">企业搜索</el-button>
      </div>

      <searchGroup></searchGroup>
      <enterpriseList v-if="searchIndex == 1"></enterpriseList>
      <companyList v-if="searchIndex == 2"></companyList>

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

    <!-- <PoliceDetailPopup ref="PoliceDetailPopup"></PoliceDetailPopup> -->
@@ -24,49 +28,32 @@
</template>

<script>
import searchGroup from './components/searchGroup'
import enterpriseList from './components/enterpriseList'
import companyList from './components/companyList'

import { initMapPosition } from '@/utils/mapPositionInit'
import { getList, getApplyAlarmType, getStatistic } from "@/api/policeAlarmRecordsManage/index.js"

let loading = null

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

  components: {
    searchGroup,
    enterpriseList,
    companyList
  },

  data() {
  data () {
    return {
      status: null,
      dcz: 0,
      ycz: 0,
      boxShow: false,
      searchIndex: 1,
      alarmDescribe: '',
      typeValue: '',
      tableData: [],
      typeOptions: [],
      pages: {
        current: 1,
        size: 22,
        total: 0,
        count: 0,
      },
      scycNum: 0,
      criminalRecordFlag: '',
    }
  },

  created() {
    this.getApplyAlarmType()
    this.getStatistic()
    this.onLoad()
  created () {
    const that = this

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

  mounted() {
    this.$EventBus.$on("searchIndex", (params) => {
      this.searchIndex = params.searchIndex
      console.log(params.searchIndex, '55555555555555555555555555')
    })
  mounted () {
    this.$parent.$parent.resize('400px', true)

    this.$nextTick(() => {
@@ -93,175 +76,18 @@
  },

  methods: {
    filterBtn(status) {
      this.status = status
      this.onLoad()
    },
    // 切换登记类型
    typeChange() {
      this.pages.current = 1
      this.onLoad()
      this.getStatistic()
    },

    // 搜索条件改变
    searchChange() {
      if (this.keyword.trim() == '') {
        this.pages.current = 1
        this.onLoad()
        this.getStatistic()
      }
    },

    // 点击搜索
    searchBtn() {
      this.pages.current = 1
      this.onLoad()
      this.getStatistic()
    },

    // 重置搜索
    resetSearch() {
      this.pages.current = 1
      this.alarmDescribe = ''
      this.typeValue = ''
      this.status = null
      this.onLoad()
      this.getStatistic()
    },

    // 分页处理
    handleCurrentChange(current) {
      this.pages.current = current
      this.onLoad()
      this.getStatistic()
    },

    // 加载动画
    loading() {
      loading = this.$loading({
        lock: true,
        text: '拼命加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
    },
    getStatistic() {
      var that = this
      getStatistic({
        alarmDescribe: this.alarmDescribe,
        alarmType: this.typeValue
      }).then(res => {
        that.dcz = res.data.data.dcz
        that.ycz = res.data.data.ycz
      })
    },

    // 获取列表数据
    onLoad() {
      this.loading()

      getList({
        status: this.status,
        current: this.pages.current,
        size: this.pages.size,
        alarmDescribe: this.alarmDescribe,
        alarmType: this.typeValue
      }).then(res => {
        const data = res.data.data
        this.tableData = data.records
        this.pages.total = data.total

        // 字典读取
        data.records.forEach(element => {
          this.typeOptions.forEach(item => {
            if (item.key == element.alarmType) {
              element.alarmTypeName = item.title
            }
          })
        })

        setTimeout(() => {
          loading && loading.close()
        }, 300)
      }).catch(error => {
        setTimeout(() => {
          loading && loading.close()
        }, 300)
      })
    },

    // 点击定位
    rowClick(row) {
      let lng = global.DC.CoordTransform.GCJ02ToWGS84(row.longitude, row.latitude)[0]
      let lat = global.DC.CoordTransform.GCJ02ToWGS84(row.longitude, row.latitude)[1]

      this.$EventBus.$emit('toPosition', {
        siteJd: lng,
        siteWd: lat,
        siteGd: 2000
      })

      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$EventBus.$emit('layerPointAdd', {
        layerName: 'scanLayer',
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          size: [25.8, 32.4],
          url: `/img/icon/site.png`,
          setStyle: {
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        },
        incident: this.siteClick
      })
    },

    // 查看详情
    goDetail(row) {
      this.$refs.PoliceDetailPopup.initOpen(row)
    },

    // 点击图标
    siteClick(e) {
      this.$refs.PoliceDetailPopup.initOpen(e.overlay.attrParams)
    },

    getApplyAlarmType() {
      getApplyAlarmType().then(res => {
        this.typeOptions = res.data.data
      })
    },

    // 清空按钮-清除图标图层
    clearRow() {
      this.$EventBus.$emit('mapClearLayer', {
        layerName: 'scanLayer',
        type: 'VectorLayer'
      })
      this.$store.commit('SET_DIALOGDETAILPOPUP', false)
      this.resetSearch()//重置列表
    change (type) {
      this.searchIndex = type
    },

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

  destroyed() {
    loading && loading.close()

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

    this.clearRow()
  }
}
</script>
@@ -279,21 +105,17 @@
    height: 100%;
    color: #fff;
    background: $bg-color;

    .menu-chang-btns {
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }

    .search-result-box {
      height: 0;
      flex: 1;
    }
  }
}

.list {
  display: flex;
  flex-direction: column;

  .pages {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.isOneClick {
  color: #fcbd56 !important;
}
</style>