综合搜索页面样式调整

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

@@ -60,7 +60,8 @@


        <!-- elment 弹窗 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <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' }"
@@ -89,7 +90,7 @@

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


export default {
@@ -97,12 +98,7 @@
    components: {},
    // 父组件给子组件传过来的参数
    props: {
        rowData: {
            type: Object,
            default: () => {
                return {}
            }
        },

    },
    data() {
        //这里存放数据
@@ -111,8 +107,8 @@
            dataList: [],
            residentLoading: false,
            residentNoDataText: '暂无数据',

        };
      rowData: {},
    }
    },
    //监听属性 类似于data概念
    computed: {},
@@ -120,6 +116,9 @@
    watch: {},
    //方法集合
    methods: {
    init (id) {
      this.getDetailById(id)
    },

        getDetailById(id) {
            getDetail(id).then(res => {
@@ -128,19 +127,18 @@
        },

        backClick() {
            console.log('返回')
            this.$EventBus.$emit("showDetail", {
                showDetail: false
            })
      this.$parent.showDetailClick()
        },

        openList() {
            this.dialogVisible = true
        },

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

    },
@@ -150,7 +148,6 @@
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.getDetailById(this.rowData.id)
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前

 src/views/comprehensiveSearch/components/companyList.vue

@@ -1,45 +1,46 @@
<!--  -->
<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='company-list-box'>
    <searchGroup></searchGroup>

    <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>
                    <div>
                        <div class="enterpriseListItemTitle">

        <div class="enterprise-list-item-wrapper">
          <div class="enterprise-list-item-title">
                            <div>{{ item.placeName }}</div>
                            <div class="enterpriseListItemType">企业</div>
            <div class="enterprise-list-item-type">企业</div>
                        </div>
                        <div class="enterpriseListItemContent">

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

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

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

        <companyDetail v-if="showDetail" :rowData="rowData"></companyDetail>


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

<script>
import searchGroup from './searchGroup'

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

import companyDetail from './companyDetail'

@@ -47,18 +48,19 @@
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        companyDetail
    companyDetail,
    searchGroup,
    },
    // 父组件给子组件传过来的参数
    props: {
    },

    data() {
        //这里存放数据
        return {
            showDetail: false,
            dataList: [],
            rowData: {},
        };
    }
    },
    //监听属性 类似于data概念
    computed: {},
@@ -66,16 +68,21 @@
    watch: {},
    //方法集合
    methods: {
        change(row) {
            this.showDetail = true;
            this.rowData = row;
    showDetailClick (data = {}, flag = false) {
      this.showDetail = flag

      if (flag) {
        this.$refs.companyDetail.init(data.id)
      }
        },

        handleCurrentChange(val) {
            this.currentRow = val;
      this.currentRow = val
        },
        init(searchKey) {
            searchPlaceList(searchKey).then(res => {
                this.dataList = res.data.data.records;

    searchBtn (params) {
      searchPlaceList(params.searchContent).then(res => {
        this.dataList = res.data.data.records
            })
        },
    },
@@ -85,18 +92,6 @@
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        // this.init('');
        this.$EventBus.$on("searchKey", (params) => {
            this.searchIndex = params.searchIndex
            if (params.searchKey) {
                this.init(params.searchKey)
            }
        })

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

    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
@@ -110,83 +105,19 @@
<style lang='scss' scoped>
//@import url(); 引入公共css类

.enterpriseList {
    margin: 10px;

    .enterpriseListItem {
.company-list-box {
  height: 100%;
        display: flex;
        // justify-content: flex-start;
        text-align: left;
        background-color: #fff;
        line-height: 20px;
        margin: 10px;
        border-radius: 10px;
        padding: 10px;
  flex-direction: column;

        .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;
  .list {
                    height: 0;
                    border-left: 10px solid transparent;
                    border-right: 10px solid transparent;
                    border-bottom: 10px solid #2400ee;
                    // 三角形旋转
                    transform: rotate(180deg);
    flex: 1;
                }
            }


        }

        .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,8 +1,19 @@
<!--
 * @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">
    <div class="list">
            <!-- 企业列表 -->
            <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange"
                style="width: 100%">
@@ -18,9 +29,13 @@
</template>

<script>
import searchGroup from './searchGroup'

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
  components: {
    searchGroup,
  },
    // 父组件给子组件传过来的参数
    props: {
    },
@@ -28,10 +43,9 @@
        //这里存放数据
        return {
            show: false,
            serachIndex: 1,
            tableData: [],
            currentRow: null
        };
    }
    },
    //监听属性 类似于data概念
    computed: {},
@@ -40,10 +54,10 @@
    //方法集合
    methods: {
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
      this.$refs.singleTable.setCurrentRow(row)
        },
        handleCurrentChange(val) {
            this.currentRow = val;
      this.currentRow = val
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
@@ -52,9 +66,6 @@
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.$EventBus.$on("searchIndex", (params) => {
            this.serachIndex = params.serachIndex
        })
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
@@ -68,7 +79,14 @@
<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,17 +1,8 @@
<!--  -->
<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>

    <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>

@@ -25,9 +16,8 @@
    data() {
        //这里存放数据
        return {
            serachIndex: 1,
            searchKey: '',
        };
      searchContent: '',
    }
    },
    //监听属性 类似于data概念
    computed: {},
@@ -35,60 +25,13 @@
    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.$parent.searchBtn({
        searchContent: this.searchContent
                })
    },

            }
        },

    },
    //生命周期 - 创建完成（可以访问当前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>
      <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() {
    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()
    const that = this

    that.$nextTick(() => {
@@ -75,10 +62,6 @@
  },

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

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

  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
    },

    // 大小重置
@@ -257,11 +87,7 @@
  },

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

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

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

.list {
    .menu-chang-btns {
  display: flex;
  flex-direction: column;

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

.isOneClick {
  color: #fcbd56 !important;
    .search-result-box {
      height: 0;
      flex: 1;
    }
  }
}
</style>