企业搜索

linwe

2024-12-19 6a499c96d0c3d789e2a3409b32c23ac3903e18fd

企业搜索

 src/views/comprehensiveSearch/components/enterpriseList.vue

New file
@@ -0,0 +1,85 @@
<!--  -->
<template>
    <div class=''>

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

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


    </div>
</template>

<script>
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            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类

.enterpriseList {
    margin: 10px;
}
</style>

 src/views/comprehensiveSearch/components/searchGroup.vue

New file
@@ -0,0 +1,75 @@
<!--  -->
<template>
    <div class=''>
        <!-- // 地址搜索 企业搜索 两个按钮  -->
        <div class="search-group-box">
            <el-button type="primary" plain>地址搜索</el-button>
            <el-button type="success" plain>企业搜索</el-button>
        </div>
        <!-- 企业地址搜索框-->
        <div class="search-group-input">
            <el-input clearable v-model="input" placeholder="请输入内容"></el-input>
            <el-button type="primary" icon="el-icon-search" plain>搜索</el-button>
        </div>



    </div>
</template>

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

        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {

    },
    //生命周期 - 创建完成（可以访问当前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>

 src/views/comprehensiveSearch/index.vue

New file
@@ -0,0 +1,368 @@
<!--
 * @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
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->

<template>
  <div class="site-page-home police-page container">
    <div v-show="boxShow" class="container-content" ref="containerContent">

      <!-- <div class="time-select" ref="timeSelect">
        <div class="search-item-box">
          <span>报警类型：</span>

          <el-select clearable style="flex: 1;" size="small" v-model="typeValue" @change="typeChange"
            placeholder="请选择报警类型">
            <el-option v-for="item in typeOptions" :key="item.key" :label="item.title" :value="item.key"></el-option>
          </el-select>
        </div>

        <div class="search-item-box">
          <span>报警内容：</span>

          <el-input style="flex: 1;" size="small" placeholder="请输入 报警内容" v-model="alarmDescribe" @change="searchChange"
            clearable></el-input>
        </div>

        <div class="search-item-box" style="justify-content: center;">
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
          <el-button @click="clearRow" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word;">
          <el-button @click="filterBtn(2)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">已处置（{{ ycz
            ? ycz :
            '0'
          }}）</el-button>
          <el-button @click="filterBtn(1)" class="bjnr-btn" :class="{ isOneClick: criminalRecordFlag == 1 }">未处置（{{ dcz
            ? dcz :
            '0'
          }}）</el-button>

        </div>
      </div> -->

      <!-- <div class="list police-info" ref="tableBox">
        <el-table :data="tableData" style="width: 100%"
          :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
          :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'default' }"
          :row-class-name="tableRowClassName" class="police-infor-table">
          <el-table-column prop="pcsName" :show-overflow-tooltip="true" label="接警单位"></el-table-column>
          <el-table-column prop="createTime" :show-overflow-tooltip="true" label="报警时间"></el-table-column>
          <el-table-column prop="alarmTypeName" :show-overflow-tooltip="true" label="报警类型"></el-table-column>
          <el-table-column width="80" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" title="定位" :disabled="positionDisabled(scope.row)"
                @click="rowClick(scope.row)">
                <i class="el-icon-location" :style="{ color: positionColor(scope.row) }"></i>
              </el-button>
              <el-button type="text" size="small" title="详情" @click="goDetail(scope.row)">
                <i class="el-icon-document" style="color:#66b1ff"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pages all-pagination-sty" ref="tablePagination">
          <el-pagination background layout="prev, pager, next" :page-size="pages.size" :total="pages.total"
            :pager-count="4" :current-page="pages.current" @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div> -->

      <searchGroup></searchGroup>
      <enterpriseList></enterpriseList>

    </div>

    <!-- <PoliceDetailPopup ref="PoliceDetailPopup"></PoliceDetailPopup> -->
  </div>
</template>

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

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

let loading = null

export default {
  inject: ['userInfo'],
  components: {
    searchGroup,
    enterpriseList
  },

  data() {
    return {
      status: null,
      dcz: 0,
      ycz: 0,
      boxShow: false,
      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(() => {
      initMapPosition()
    })
  },

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

    this.$nextTick(() => {
      this.$EventBus.$emit('closeMxTileset')
    })
  },

  computed: {
    positionColor() {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
          return "#1AFA29"
        } else {
          return "#ccc"
        }
      }
    },

    positionDisabled() {
      return (row) => {
        if (row.X && row.X != 0 || row.lng && row.lng != 0 || row.longitude && row.longitude != 0 || row.x && row.x != 0) {
          return false
        } else {
          return true
        }
      }
    },
  },

  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()//重置列表
    },

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

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

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

    this.clearRow()
  }
}
</script>

<style scoped lang="scss">
.container {
  position: relative;
  width: 100%;
  height: 100%;

  &-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: #fff;
    background: $bg-color;
  }
}

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

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

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