矛盾纠纷展示恢复及调整调整

zrj

2024-06-27 1d51102e2f7439db0b2647624e9807873052fcec

矛盾纠纷展示恢复及调整调整

 src/views/contradictionEventShow/components/detailDialog.vue

@@ -1,128 +1,188 @@
<template>
    <el-dialog class="syld-details-box prm-dialog-popup business-detail-box" :title="title" append-to-body
        :close-on-click-modal="false" :visible.sync="popupShow" center @close="popupClose">
        <div class="all-box">
            <div class="type-tab-box" v-if="tabList.length != 0">
                <div class="tab-item" :class="{ 'tab-choose-item': chooseTab == order }" @click="tabClick(order)"
                    v-for="(part, order) in tabList" :key="order">
                    {{ part }}</div>
            </div>
            <div class="content" v-show="chooseTab == 0">
                <div class="item-box" v-for="(item, index) in lableList" :key="index">
                    <div class="label">{{ item.label }}：</div>
                    <div class="value" v-if="item.isPic != true">{{ item.value }}</div>
                    <div class="value" v-if="item.isPic == true">
                        <el-image
                            :style="{ width: item.value != '' ? '100px' : '', height: item.value != '' ? '100px' : '' }"
                            :src="getImgUrls(item.value)" :preview-src-list="getImgUrls(item.value)">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i> 暂无图片
                            </div>
                        </el-image>
                    </div>
                </div>
            </div>
            <div class="content" v-show="chooseTab == 1">
                <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="name" :show-overflow-tooltip="true" label="名称"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="idCard" :show-overflow-tooltip="true" label="身份证号"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="phoneNumber" :show-overflow-tooltip="true" label="手机号"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="employer" :show-overflow-tooltip="true" label="工作单位"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="confirmFlag" :show-overflow-tooltip="true" label="审核状态" :key="Math.random()">
                        <template slot-scope="scope">
                            <div>{{ scope.row.confirmFlag == 1 ? '待确认' : '已确认' }}</div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
  <el-dialog
    class="syld-details-box prm-dialog-popup business-detail-box"
    :title="title"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="popupShow"
    center
    @close="popupClose"
  >
    <div class="all-box">
      <div class="type-tab-box" v-if="tabList.length != 0">
        <div
          class="tab-item"
          :class="{ 'tab-choose-item': chooseTab == order }"
          @click="tabClick(order)"
          v-for="(part, order) in tabList"
          :key="order"
        >
          {{ part }}
        </div>
    </el-dialog>
      </div>
      <div class="content" v-show="chooseTab == 0">
        <div
          class="item-box"
          v-for="(item, index) in lableList"
          :key="index"
          :style="{ width: item.width }"
        >
          <div class="label">{{ item.label }}：</div>
          <div class="value" v-if="item.isPic != true">
            {{ item.value }}
          </div>
          <div class="value" v-if="item.isPic == true">
            <el-image
              :style="{
                width: item.value != '' ? '100px' : '',
                height: item.value != '' ? '100px' : '',
              }"
              :src="getImgUrls(item.value)"
              :preview-src-list="getImgUrls(item.value)"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i> 暂无图片
              </div>
            </el-image>
          </div>
          <!-- </div> -->
        </div>
      </div>
      <div class="content" v-show="chooseTab == 1">
        <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="name"
            :show-overflow-tooltip="true"
            label="名称"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="idCard"
            :show-overflow-tooltip="true"
            label="身份证号"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="phoneNumber"
            :show-overflow-tooltip="true"
            label="手机号"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="employer"
            :show-overflow-tooltip="true"
            label="工作单位"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="confirmFlag"
            :show-overflow-tooltip="true"
            label="审核状态"
            :key="Math.random()"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.confirmFlag == 1 ? "待确认" : "已确认" }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
    name: 'detailDialog',
  name: "detailDialog",

    data () {
        return {
            title: '',
            popupShow: false,
            lableList: [],
            chooseTab: 0,
            tabList: [],
            tableData: []
        }
  data() {
    return {
      title: "",
      popupShow: false,
      lableList: [],
      chooseTab: 0,
      tabList: [],
      tableData: [],
    };
  },

  methods: {
    // 打开弹窗初始化数据
    initOpen(row, title, tabList, tableData) {
      this.chooseTab = 0;
      this.popupShow = true;
      this.lableList = row;
      this.title = title;
      this.tabList = tabList;
      this.tableData = tableData;
    },

    methods: {
        // 打开弹窗初始化数据
        initOpen (row, title, tabList, tableData) {
            this.chooseTab = 0
            this.popupShow = true
            this.lableList = row
            this.title = title
            this.tabList = tabList
            this.tableData = tableData
        },

        // 关闭弹窗按钮
        popupClose () {
            this.popupShow = false
        },

        // 图片转换
        getImgUrls (imageUrls) {
            if (imageUrls && imageUrls != '' && imageUrls.length > 0) {
                imageUrls = imageUrls.split(',').filter(ele => ele != '').map(ele => {
                    return 'http://10.141.11.11/place/' + ele
                    // return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
                })
            }
            return imageUrls || []
        },

        // tab切换
        tabClick (type) {
            this.chooseTab = type
        },
    // 关闭弹窗按钮
    popupClose() {
      this.popupShow = false;
    },
}

    // 图片转换
    getImgUrls(imageUrls) {
      if (imageUrls && imageUrls != "" && imageUrls.length > 0) {
        imageUrls = imageUrls
          .split(",")
          .filter((ele) => ele != "")
          .map((ele) => {
            return "http://10.141.11.11/place/" + ele;
            // return 'https://srgdjczzxtpt.com:2080/gminio/jczz/' + ele
          });
      }
      return imageUrls || [];
    },

    // tab切换
    tabClick(type) {
      this.chooseTab = type;
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-image__error) {
    height: 120px;
  height: 120px;
}

.all-box {
  display: flex;
  flex-direction: column;

  .content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-top: 20px;

    .content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;
    .item-box {
      display: flex;
      margin-bottom: 20px;
      width: 50%;

        .item-box {
            width: 50%;
            display: flex;
            margin-bottom: 20px;


            .label {
                min-width: 120px;
                text-align: right;
                padding-right: 10px;
            }
        }
      .label {
        min-width: 120px;
        text-align: right;
        padding-right: 10px;
      }
    }

  }
}
</style>
</style>

 src/views/contradictionEventShow/index 匹配e呼即办.vue

New file
@@ -0,0 +1,453 @@
<template>
    <div class="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.dictKey" :label="item.dictValue"
                            :value="item.dictKey"></el-option>
                    </el-select>
                </div>
                <div class="search-item-box">
                    <el-input size="small" placeholder="请输入(地址、纠纷内容)" v-model="searchKey" clearable></el-input>
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="resetBtn" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
                <!-- <div class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(1)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">已化解（{{ yhj ? yhj :
            '0'
                        }}）</el-button>
                    <el-button @click="filterBtn(2)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">未化解（{{ whj ? whj :
            '0'
                        }}）</el-button>
                    <el-button @click="filterBtn(3)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">移交E呼即办（{{ ysehjb ? ysehjb :
            '0'
                        }}）</el-button>
                </div> -->
            </div>

            <div class="list police-info" ref="tableBox">
                <el-table :data="tableData" style="width: 100%" :height="currentTableHeight"
                    :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="address" :show-overflow-tooltip="true" label="事发地址"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="事发时间"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="disputeTypeName" :show-overflow-tooltip="true" label="纠纷类型"
                        :key="Math.random()"></el-table-column>

                    <el-table-column 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" style="padding-top:-15px">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize"
                        :total="pages.total" :pager-count="4" :current-page="pages.currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <detailDialog ref="detailDialog" />
    </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import {
    getDisputeRecordList, getStatistic
} from "@/api/contradictionEventShow/index.js"
import { getDictionaryListByCode } from "@/api/rentalInfo/index.js"

import detailDialog from './components/detailDialog.vue'

let loading = null

export default {
    inject: ['userInfo'],

    components: { detailDialog },

    data () {
        return {
            handleResult: null,
            yhj: 0,
            whj: 0,
            ysehjb: 0,
            typeValue: '',
            typeOptions: [],
            searchKey: '',
            currentTableHeight: 0,
            tableData: [],
            boxShow: false,
            pages: {
                currentPage: 1,
                total: 0,
                pageSize: 22,
                count: 0,
            },
            disputeTypeList: [],
            disputeSourceList: []
        }
    },

    created () {
        const that = this

        that.$nextTick(() => {
            initMapPosition()
            that.getDictionaryListByCode()
            that.getStatistic()
            that.getList()
        })
    },

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

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

            this.setTableHeight()
        })

        window.addEventListener('resize', this.setTableHeight)
    },

    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: {
        // 统计
        getStatistic () {
            var that = this
            getStatistic({
                disputeType: this.typeValue,
                searchKey: this.searchKey
            }).then(res => {
                that.yhj = res.data.data.yhj
                that.whj = res.data.data.whj
                that.ysehjb = res.data.data.ysehjb
            })
        },
        // 获取字典列表
        getDictionaryListByCode () {
            getDictionaryListByCode('disputeType').then(res => {
                this.disputeTypeList = res.data.data
            })
            getDictionaryListByCode('disputeSource').then(res => {
                this.disputeSourceList = res.data.data
            })
            // 矛盾纠纷类型获取
            getDictionaryListByCode('disputeType').then(res => {
                this.typeOptions = res.data.data
            })
        },

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

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchAILayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    url: `/img/icon/location.png`
                },
            })
        },

        // 点击详情
        goDetail (row) {
            let detailList = []
            let title = '矛盾纠纷事件详情'

            detailList = [
                {
                    label: '事发地址',
                    value: row.address
                },
                {
                    label: '事发时间',
                    value: row.eventTime
                },
                {
                    label: '纠纷内容',
                    value: row.disputeContent,
                },
                {
                    label: '纠纷类型',
                    value: this.disputeTypeList.find(i => i.dictKey == row.disputeType).dictValue
                },
                // {
                //     label: '是否受伤',
                //     value: row.injuryFlag == 1 ? '是' : '否'
                // },
                {
                    label: '处置情况',
                    value: row.injuryDesc
                },
                // {
                //     label: '报警次数',
                //     value: row.alarmNum
                // },
                // {
                //     label: '信息来源',
                //     value: this.disputeSourceList.find(i => i.dictKey == row.source).dictValue
                // },
                // {
                //     label: '当事人1姓名',
                //     value: row.nameOne
                // },
                // {
                //     label: '当事人1性别',
                //     value: row.genderOne == 1 ? '男' : row.genderOne == 2 ? '女' : '未知'
                // },
                // {
                //     label: '当事人1电话',
                //     value: row.phoneOne
                // },
                // {
                //     label: '当事人1身份证号',
                //     value: row.idCardOne
                // },
                // {
                //     label: '当事人2姓名',
                //     value: row.nameTwo
                // },
                // {
                //     label: '当事人2性别',
                //     value: row.genderTwo == 1 ? '男' : '女'
                // },
                // {
                //     label: '当事人2电话',
                //     value: row.phoneTwo
                // },
                // {
                //     label: '当事人2身份证号',
                //     value: row.idCardTwo
                // },
                // {
                //     label: '地区',
                //     value: row.townName
                // },
                {
                    label: '辖区派出所',
                    value: row.pcsName
                },
                // {
                //     label: '处理结果',
                //     value: row.handleResult == 1 ? '已化解' : row.handleResult == 2 ? '未化解' : row.handleResult == 3 ? '移送e呼即办' : ''
                // }
            ]

            this.$refs.detailDialog.initOpen(detailList, title, [], [])
        },
        // 切换登记类型
        typeChange () {
            this.pages.currentPage = 1
            this.getList()
            this.getStatistic()
        },
        // 获取列表
        getList () {
            this.loading()
            let params = {
                handleResult: this.handleResult,
                disputeType: this.typeValue,
                searchKey: this.searchKey,
                size: this.pages.pageSize,
                current: this.pages.currentPage
            }

            this.getDisputeRecordList(params)
        },

        // 矛盾纠纷列表
        getDisputeRecordList (params) {
            getDisputeRecordList(params).then(res => {
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 搜索按钮
        searchBtn () {
            this.pages.currentPage = 1
            this.getList()
            this.getStatistic()
        },

        // 清空按钮
        resetBtn () {
            this.searchKey = ''
            this.typeValue = null
            this.handleResult = null
            this.pages.currentPage = 1
            this.getList()
            this.getStatistic()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
        },
        filterBtn (handleResult) {
            this.handleResult = handleResult
            this.getList()
        },

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

        // 加载动画
        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        // 表格高度
        setTableHeight () {
            this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
        },

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

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

        window.removeEventListener('resize', this.setTableHeight)

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

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchAILayer',
            type: 'VectorLayer'
        })
    }
}
</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;

        .type-tab-box {
            display: flex;

            .tab-item {
                cursor: pointer;
                width: 50%;
            }

            .tab-choose-item {
                background-color: #3d5ad5;
            }
        }
    }
}

.list {
    height: calc(100% - 48px);
    display: flex;
    flex-direction: column;

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

    .state-box {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #adadad;
    }

    .online {
        background-color: #4ccc7d;
    }
}
</style>

 src/views/contradictionEventShow/index.vue

@@ -1,453 +1,575 @@
<template>
    <div class="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>
  <div class="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.dictKey" :label="item.dictValue"
                            :value="item.dictKey"></el-option>
                    </el-select>
                </div>
                <div class="search-item-box">
                    <el-input size="small" placeholder="请输入(地址、纠纷内容)" v-model="searchKey" clearable></el-input>
                    <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn">搜索</el-button>
                    <el-button @click="resetBtn" icon="el-icon-delete" class="bjnr-btn">清除</el-button>
                </div>
                <!-- <div class="search-item-box" style="overflow-wrap: break-word;">
                    <el-button @click="filterBtn(1)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">已化解（{{ yhj ? yhj :
            '0'
                        }}）</el-button>
                    <el-button @click="filterBtn(2)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">未化解（{{ whj ? whj :
            '0'
                        }}）</el-button>
                    <el-button @click="filterBtn(3)" class="bjnr-btn"
                        :class="{ isOneClick: criminalRecordFlag == 1 }">移交E呼即办（{{ ysehjb ? ysehjb :
            '0'
                        }}）</el-button>
                </div> -->
            </div>

            <div class="list police-info" ref="tableBox">
                <el-table :data="tableData" style="width: 100%" :height="currentTableHeight"
                    :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="address" :show-overflow-tooltip="true" label="事发地址"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="eventTime" :show-overflow-tooltip="true" label="事发时间"
                        :key="Math.random()"></el-table-column>
                    <el-table-column prop="disputeTypeName" :show-overflow-tooltip="true" label="纠纷类型"
                        :key="Math.random()"></el-table-column>

                    <el-table-column 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" style="padding-top:-15px">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.pageSize"
                        :total="pages.total" :pager-count="4" :current-page="pages.currentPage"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
          <el-select
            clearable
            style="flex: 1"
            size="small"
            v-model="typeValue"
            @change="typeChange"
            placeholder="请选择矛盾纠纷类型"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            ></el-option>
          </el-select>
        </div>
        <detailDialog ref="detailDialog" />
        <div class="search-item-box">
          <el-input
            size="small"
            placeholder="请输入(地址、纠纷内容)"
            v-model="searchKey"
            clearable
          ></el-input>
          <el-button @click="searchBtn" icon="el-icon-search" class="bjnr-btn"
            >搜索</el-button
          >
          <el-button @click="resetBtn" icon="el-icon-delete" class="bjnr-btn"
            >清除</el-button
          >
        </div>
        <div class="search-item-box" style="overflow-wrap: break-word">
          <el-button
            @click="filterBtn(1)"
            class="bjnr-btn"
            :class="{ isOneClick: criminalRecordFlag == 1 }"
            >已化解（{{ yhj ? yhj : "0" }}）</el-button
          >
          <el-button
            @click="filterBtn(2)"
            class="bjnr-btn"
            :class="{ isOneClick: criminalRecordFlag == 1 }"
            >未化解（{{ whj ? whj : "0" }}）</el-button
          >
          <el-button
            @click="filterBtn(3)"
            class="bjnr-btn"
            :class="{ isOneClick: criminalRecordFlag == 1 }"
            >移交E呼即办（{{ ysehjb ? ysehjb : "0" }}）</el-button
          >
        </div>
      </div>

      <div class="list police-info" ref="tableBox">
        <el-table
          :data="tableData"
          style="width: 100%;"
          :height="currentTableHeight"
          :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="address"
            :show-overflow-tooltip="true"
            label="事发地址"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="eventTime"
            :show-overflow-tooltip="true"
            label="事发时间"
            :key="Math.random()"
          ></el-table-column>
          <el-table-column
            prop="disputeTypeName"
            :show-overflow-tooltip="true"
            label="纠纷类型"
            :key="Math.random()"
          ></el-table-column>

          <el-table-column 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"
          style="padding-top: -15px"
        >
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pages.pageSize"
            :total="pages.total"
            :pager-count="4"
            :current-page="pages.currentPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <detailDialog ref="detailDialog" />
  </div>
</template>

<script>
import { initMapPosition } from '@/utils/mapPositionInit'
import { initMapPosition } from "@/utils/mapPositionInit";
import {
    getDisputeRecordList, getStatistic
} from "@/api/contradictionEventShow/index.js"
import { getDictionaryListByCode } from "@/api/rentalInfo/index.js"
  getDisputeRecordList,
  getStatistic,
} from "@/api/contradictionEventShow/index.js";
import { getDictionaryListByCode } from "@/api/rentalInfo/index.js";

import detailDialog from './components/detailDialog.vue'
import detailDialog from "./components/detailDialog.vue";

let loading = null
let loading = null;

export default {
    inject: ['userInfo'],
  inject: ["userInfo"],

    components: { detailDialog },
  components: { detailDialog },

    data () {
        return {
            handleResult: null,
            yhj: 0,
            whj: 0,
            ysehjb: 0,
            typeValue: '',
            typeOptions: [],
            searchKey: '',
            currentTableHeight: 0,
            tableData: [],
            boxShow: false,
            pages: {
                currentPage: 1,
                total: 0,
                pageSize: 22,
                count: 0,
            },
            disputeTypeList: [],
            disputeSourceList: []
  data() {
    return {
      handleResult: null,
      yhj: 0,
      whj: 0,
      ysehjb: 0,
      typeValue: "",
      typeOptions: [],
      searchKey: "",
      currentTableHeight: 0,
      tableData: [],
      boxShow: false,
      pages: {
        currentPage: 1,
        total: 0,
        pageSize: 22,
        count: 0,
      },
      disputeTypeList: [],
      disputeSourceList: [],
    };
  },

  created() {
    const that = this;

    that.$nextTick(() => {
      initMapPosition();
      that.getDictionaryListByCode();
      that.getStatistic();
      that.getList();
    });
  },

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

    this.$nextTick(() => {
      this.$EventBus.$emit("closeMxTileset");

      this.setTableHeight();
    });

    window.addEventListener("resize", this.setTableHeight);
  },

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

    created () {
        const that = this
    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;
        }
      };
    },
  },

        that.$nextTick(() => {
            initMapPosition()
            that.getDictionaryListByCode()
            that.getStatistic()
            that.getList()
  methods: {
    // 统计
    getStatistic() {
      var that = this;
      getStatistic({
        disputeType: this.typeValue,
        searchKey: this.searchKey,
      }).then((res) => {
        that.yhj = res.data.data.yhj;
        that.whj = res.data.data.whj;
        that.ysehjb = res.data.data.ysehjb;
      });
    },
    // 获取字典列表
    getDictionaryListByCode() {
      getDictionaryListByCode("disputeType").then((res) => {
        this.disputeTypeList = res.data.data;
      });
      getDictionaryListByCode("disputeSource").then((res) => {
        this.disputeSourceList = res.data.data;
      });
      // 矛盾纠纷类型获取
      getDictionaryListByCode("disputeType").then((res) => {
        this.typeOptions = res.data.data;
      });
    },

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

      this.$EventBus.$emit("toPosition", {
        siteJd: lng,
        siteWd: lat,
        siteGd: 200,
      });
      this.$EventBus.$emit("mapClearLayer", {
        layerName: "searchAILayer",
        type: "VectorLayer",
      });
      this.$EventBus.$emit("layerPointAdd", {
        layerName: "searchAILayer",
        type: "billboard",
        params: {
          ...row,
          lng: lng,
          lat: lat,
          alt: 1,
          url: `/img/icon/location.png`,
        },
      });
    },

    // 点击详情
    goDetail(row) {
      let detailList = [];
      let title = "矛盾纠纷事件详情";

      detailList = [
        {
          label: "事发地址",
          value: row.address,
          width: "50%",
        },
        {
          label: "事发时间",
          value: row.eventTime,
          width: "50%",
        },
        {
          label: "纠纷内容",
          value: row.disputeContent,
          width: "100%",
        },
        {
          label: "纠纷类型",
          // value: this.disputeTypeList.find(i => i.dictKey == row.disputeType).dictValue
          value: this.disputeTypeList.some((i) => i.dictKey == row.disputeType)
            ? this.disputeTypeList.find((i) => i.dictKey == row.disputeType)
                .dictValue
            : "",
          width: "50%",
        },
        {
          label: "是否受伤",
          value: row.injuryFlag == 1 ? "是" : "否",
          width: "50%",
        },
        {
          label: "受伤描述",
          value: row.injuryDesc,
          width: "100%",
        },
        {
          label: "报警次数",
          value: row.alarmNum,
          width: "50%",
        },
        {
          label: "信息来源",
          // value: this.disputeSourceList.find(i => i.dictKey == row.source).dictValue
          value: this.disputeSourceList.some((i) => i.dictKey == row.source)
            ? this.disputeSourceList.find((i) => i.dictKey == row.source)
                .dictValue
            : "",
          width: "50%",
        },
        {
          label: "当事人1姓名",
          value: row.nameOne,
          width: "50%",
        },
        {
          label: "当事人1性别",
          value: row.genderOne == 1 ? "男" : row.genderOne == 2 ? "女" : "未知",
          width: "50%",
        },
        {
          label: "当事人1电话",
          value: row.phoneOne,
          width: "50%",
        },
        {
          label: "当事人1身份证号",
          value: row.idCardOne,
          width: "50%",
        },
        {
          label: "当事人2姓名",
          value: row.nameTwo,
          width: "50%",
        },
        {
          label: "当事人2性别",
          value: row.genderTwo == 1 ? "男" : "女",
          width: "50%",
        },
        {
          label: "当事人2电话",
          value: row.phoneTwo,
          width: "50%",
        },
        {
          label: "当事人2身份证号",
          value: row.idCardTwo,
          width: "50%",
        },
        {
          label: "地区",
          value: row.townName,
          width: "50%",
        },
        {
          label: "辖区派出所",
          value: row.pcsName,
          width: "50%",
        },
        {
          label: "处理结果",
          value:
            row.handleResult == 1
              ? "已化解"
              : row.handleResult == 2
              ? "未化解"
              : row.handleResult == 3
              ? "移送e呼即办"
              : "",
          width: "50%",
        },
      ];

      this.$refs.detailDialog.initOpen(detailList, title, [], []);
    },
    // 切换登记类型
    typeChange() {
      this.pages.currentPage = 1;
      this.getList();
      this.getStatistic();
    },
    // 获取列表
    getList() {
      this.loading();
      let params = {
        handleResult: this.handleResult,
        disputeType: this.typeValue,
        searchKey: this.searchKey,
        size: this.pages.pageSize,
        current: this.pages.currentPage,
      };

      this.getDisputeRecordList(params);
    },

    // 矛盾纠纷列表
    getDisputeRecordList(params) {
      getDisputeRecordList(params)
        .then((res) => {
          this.tableData = res.data.data.records;
          this.pages.total = res.data.data.total;
          setTimeout(() => {
            loading && loading.close();
          }, 300);
        })
        .catch((error) => {
          setTimeout(() => {
            loading && loading.close();
          }, 300);
        });
    },

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

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

            this.setTableHeight()
        })

        window.addEventListener('resize', this.setTableHeight)
    // 搜索按钮
    searchBtn() {
      this.pages.currentPage = 1;
      this.getList();
      this.getStatistic();
    },

    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
                }
            }
        },
    // 清空按钮
    resetBtn() {
      this.searchKey = "";
      this.typeValue = null;
      this.handleResult = null;
      this.pages.currentPage = 1;
      this.getList();
      this.getStatistic();
      this.$EventBus.$emit("mapClearLayer", {
        layerName: "searchAILayer",
        type: "VectorLayer",
      });
    },
    filterBtn(handleResult) {
      this.handleResult = handleResult;
      this.getList();
    },

    methods: {
        // 统计
        getStatistic () {
            var that = this
            getStatistic({
                disputeType: this.typeValue,
                searchKey: this.searchKey
            }).then(res => {
                that.yhj = res.data.data.yhj
                that.whj = res.data.data.whj
                that.ysehjb = res.data.data.ysehjb
            })
        },
        // 获取字典列表
        getDictionaryListByCode () {
            getDictionaryListByCode('disputeType').then(res => {
                this.disputeTypeList = res.data.data
            })
            getDictionaryListByCode('disputeSource').then(res => {
                this.disputeSourceList = res.data.data
            })
            // 矛盾纠纷类型获取
            getDictionaryListByCode('disputeType').then(res => {
                this.typeOptions = res.data.data
            })
        },

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

            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchAILayer',
                type: "billboard",
                params: {
                    ...row,
                    lng: lng,
                    lat: lat,
                    alt: 1,
                    url: `/img/icon/location.png`
                },
            })
        },

        // 点击详情
        goDetail (row) {
            let detailList = []
            let title = '矛盾纠纷事件详情'

            detailList = [
                {
                    label: '事发地址',
                    value: row.address
                },
                {
                    label: '事发时间',
                    value: row.eventTime
                },
                {
                    label: '纠纷内容',
                    value: row.disputeContent,
                },
                {
                    label: '纠纷类型',
                    value: this.disputeTypeList.find(i => i.dictKey == row.disputeType).dictValue
                },
                // {
                //     label: '是否受伤',
                //     value: row.injuryFlag == 1 ? '是' : '否'
                // },
                {
                    label: '处置情况',
                    value: row.injuryDesc
                },
                // {
                //     label: '报警次数',
                //     value: row.alarmNum
                // },
                // {
                //     label: '信息来源',
                //     value: this.disputeSourceList.find(i => i.dictKey == row.source).dictValue
                // },
                // {
                //     label: '当事人1姓名',
                //     value: row.nameOne
                // },
                // {
                //     label: '当事人1性别',
                //     value: row.genderOne == 1 ? '男' : row.genderOne == 2 ? '女' : '未知'
                // },
                // {
                //     label: '当事人1电话',
                //     value: row.phoneOne
                // },
                // {
                //     label: '当事人1身份证号',
                //     value: row.idCardOne
                // },
                // {
                //     label: '当事人2姓名',
                //     value: row.nameTwo
                // },
                // {
                //     label: '当事人2性别',
                //     value: row.genderTwo == 1 ? '男' : '女'
                // },
                // {
                //     label: '当事人2电话',
                //     value: row.phoneTwo
                // },
                // {
                //     label: '当事人2身份证号',
                //     value: row.idCardTwo
                // },
                // {
                //     label: '地区',
                //     value: row.townName
                // },
                {
                    label: '辖区派出所',
                    value: row.pcsName
                },
                // {
                //     label: '处理结果',
                //     value: row.handleResult == 1 ? '已化解' : row.handleResult == 2 ? '未化解' : row.handleResult == 3 ? '移送e呼即办' : ''
                // }
            ]

            this.$refs.detailDialog.initOpen(detailList, title, [], [])
        },
        // 切换登记类型
        typeChange () {
            this.pages.currentPage = 1
            this.getList()
            this.getStatistic()
        },
        // 获取列表
        getList () {
            this.loading()
            let params = {
                handleResult: this.handleResult,
                disputeType: this.typeValue,
                searchKey: this.searchKey,
                size: this.pages.pageSize,
                current: this.pages.currentPage
            }

            this.getDisputeRecordList(params)
        },

        // 矛盾纠纷列表
        getDisputeRecordList (params) {
            getDisputeRecordList(params).then(res => {
                this.tableData = res.data.data.records
                this.pages.total = res.data.data.total
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            }).catch(error => {
                setTimeout(() => {
                    loading && loading.close()
                }, 300)
            })
        },

        // 搜索按钮
        searchBtn () {
            this.pages.currentPage = 1
            this.getList()
            this.getStatistic()
        },

        // 清空按钮
        resetBtn () {
            this.searchKey = ''
            this.typeValue = null
            this.handleResult = null
            this.pages.currentPage = 1
            this.getList()
            this.getStatistic()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchAILayer',
                type: 'VectorLayer'
            })
        },
        filterBtn (handleResult) {
            this.handleResult = handleResult
            this.getList()
        },

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

        // 加载动画
        loading () {
            loading = this.$loading({
                lock: true,
                text: '拼命加载中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.5)'
            })
        },

        // 表格高度
        setTableHeight () {
            this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.timeSelect.offsetHeight
        },

        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },
    // 分页处理
    handleCurrentChange(currentPage) {
      this.pages.currentPage = currentPage;
      this.getList();
      this.getStatistic();
    },

    destroyed () {
        loading && loading.close()
    // 加载动画
    loading() {
      loading = this.$loading({
        lock: true,
        text: "拼命加载中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
      });
    },

        window.removeEventListener('resize', this.setTableHeight)
    // 表格高度
    setTableHeight() {
      this.currentTableHeight =
        this.$refs.containerContent.offsetHeight -
        this.$refs.timeSelect.offsetHeight-45;
    },

        this.$parent.$parent.resize('0px')
    // 大小重置
    boxResize(val) {
      this.boxShow = val;
    },
  },

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'searchAILayer',
            type: 'VectorLayer'
        })
    }
}
  destroyed() {
    loading && loading.close();

    window.removeEventListener("resize", this.setTableHeight);

    this.$parent.$parent.resize("0px");

    this.$EventBus.$emit("mapClearLayer", {
      layerName: "searchAILayer",
      type: "VectorLayer",
    });
  },
};
</script>

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

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

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

        .type-tab-box {
            display: flex;
      .tab-item {
        cursor: pointer;
        width: 50%;
      }

            .tab-item {
                cursor: pointer;
                width: 50%;
            }

            .tab-choose-item {
                background-color: #3d5ad5;
            }
        }
      .tab-choose-item {
        background-color: #3d5ad5;
      }
    }
  }
}

.list {
    height: calc(100% - 48px);
  height: calc(100% - 48px);
//   display: flex;
  flex-direction: column;

  .pages {
    height: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

    .pages {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
  .state-box {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin: 0 auto;
    border-radius: 50%;
    background-color: #adadad;
  }

    .state-box {
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        margin: 0 auto;
        border-radius: 50%;
        background-color: #adadad;
    }

    .online {
        background-color: #4ccc7d;
    }
  .online {
    background-color: #4ccc7d;
  }
}
</style>