| | |
| | | |
| | | <template> |
| | | <div class="home-page container"> |
| | | <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail" |
| | | @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container> |
| | | <left-container |
| | | class="left-container" |
| | | @showpeopledetail="showpeopledetail" |
| | | @showlanddetail="showlanddetail" |
| | | @showkeypersondetail="showkeypersondetail" |
| | | ref="leftContainer" |
| | | ></left-container> |
| | | |
| | | <right-container class="right-container" @showequimentdetail="showequimentdetail" |
| | | @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType" |
| | | ref="rightContainer"></right-container> |
| | | <right-container |
| | | class="right-container" |
| | | @showequimentdetail="showequimentdetail" |
| | | @selectPoliceChangeEventData="selectPoliceChangeEventData" |
| | | @changeActivityType="changeActivityType" |
| | | ref="rightContainer" |
| | | ></right-container> |
| | | |
| | | <bottom-container class="bottom-container" ref="bottomContainer" |
| | | <bottom-container |
| | | class="bottom-container" |
| | | ref="bottomContainer" |
| | | @changePoliceSituationHistoryType="changePoliceSituationHistoryType" |
| | | @policeSituationChange="policeSituationChange" |
| | | @policeSituationSiteClick="policeSituationSiteClick"></bottom-container> |
| | | @policeSituationSiteClick="policeSituationSiteClick" |
| | | ></bottom-container> |
| | | |
| | | <div class="center-container"> |
| | | <div class="layers-control-btn house"> |
| | |
| | | </div> |
| | | |
| | | <div ref="RegionSelect" style="left: 0;" class="region-select"> |
| | | <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue" |
| | | :options="policeStationOptions" :optionsName="'name'"></map-select> |
| | | <map-select |
| | | class="map-select" |
| | | @selectCheck="policeStationSelect" |
| | | :checkValue="policeStationCheckValue" |
| | | :options="policeStationOptions" |
| | | :optionsName="'name'" |
| | | ></map-select> |
| | | |
| | | <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions" |
| | | :optionsName="'name'"></map-select> |
| | | <map-select |
| | | class="map-select" |
| | | @selectCheck="areaSelect" |
| | | :checkValue="areaCheckValue" |
| | | :options="areaOptions" |
| | | :optionsName="'name'" |
| | | ></map-select> |
| | | |
| | | <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue" |
| | | :options="housingOptions" :optionsName="'name'"></map-select> |
| | | <map-select |
| | | class="map-select" |
| | | @selectCheck="housingSelect" |
| | | :checkValue="housingCheckValue" |
| | | :options="housingOptions" |
| | | :optionsName="'name'" |
| | | ></map-select> |
| | | </div> |
| | | |
| | | <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible" |
| | | :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box"> |
| | | <el-dialog |
| | | :title="panoramaTitle" |
| | | :modal="true" |
| | | :visible.sync="panoramaVisible" |
| | | :before-close="panoramaBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="panorama-details-box" |
| | | > |
| | | <!-- <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>--> |
| | | <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0" /> |
| | | </el-dialog> |
| | | |
| | | <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose" |
| | | :close-on-click-modal="true" class="phone-details-box"> |
| | | <el-dialog |
| | | :title="phoneTitle" |
| | | :modal="true" |
| | | :visible.sync="phoneVisible" |
| | | :before-close="phoneBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="phone-details-box" |
| | | > |
| | | <div class="item"> |
| | | <div>责任人:</div> |
| | | <div>{{ phoneDetails.person }}</div> |
| | |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="personInfoClose" |
| | | :close-on-click-modal="true" class="area-details-box"> |
| | | <el-dialog |
| | | :title="peopleTitle" |
| | | :modal="true" |
| | | :visible.sync="peopleVisible" |
| | | :before-close="personInfoClose" |
| | | :close-on-click-modal="true" |
| | | class="area-details-box" |
| | | > |
| | | <div class="header"> |
| | | <div> |
| | | 负责人: |
| | |
| | | <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" /> |
| | | </div> |
| | | <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button> |
| | | <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-delete" |
| | | @click="clearPeopleDetailSearchValue" |
| | | >清空</el-button> |
| | | </div> |
| | | <el-table :data="peopleInfoList" style="width: 100%" |
| | | <el-table |
| | | :data="peopleInfoList" |
| | | style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"> |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" |
| | | > |
| | | <el-table-column label="序号" type="index" align="center"> |
| | | <template slot-scope="scope"> |
| | | <span>{{(peoplePage.currentPage - 1) * peoplePage.pageSize + scope.$index + 1}}</span> |
| | |
| | | </el-table> |
| | | |
| | | <div class="pages" ref="tablePagination"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize" |
| | | :total="peoplePage.total" :current-page="peoplePage.currentPage" |
| | | @current-change="handlePeopleCurrentChange"></el-pagination> |
| | | <el-pagination |
| | | background |
| | | layout="prev, pager, next" |
| | | :page-size="peoplePage.pageSize" |
| | | :total="peoplePage.total" |
| | | :current-page="peoplePage.currentPage" |
| | | @current-change="handlePeopleCurrentChange" |
| | | ></el-pagination> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible" |
| | | :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box"> |
| | | <el-dialog |
| | | :title="equimentTitle" |
| | | :modal="true" |
| | | :visible.sync="equimentVisible" |
| | | :before-close="equimentBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="equiment-details-box" |
| | | > |
| | | <div class="equiment-detail"> |
| | | <div class="others"> |
| | | <el-table :data="equimentTableData" style="width: 100%" |
| | | <el-table |
| | | :data="equimentTableData" |
| | | style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" |
| | | :row-class-name="tableRowClassName"> |
| | | :row-class-name="tableRowClassName" |
| | | > |
| | | <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column> |
| | | <el-table-column prop="channelId" label="通道编号"></el-table-column> |
| | | <el-table-column prop="deviceId" label="设备编号"></el-table-column> |
| | |
| | | </el-table-column> |
| | | <el-table-column label="操作"> |
| | | <template slot-scope="scope"> |
| | | <el-button @click="play(scope.row)" type="text" size="small" title="播放视频"> |
| | | <el-button |
| | | @click="play(scope.row)" |
| | | type="text" |
| | | size="small" |
| | | title="播放视频" |
| | | > |
| | | <i class="el-icon-video-play"></i> |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="pages"> |
| | | <el-pagination background layout="prev, pager, next" :total="equimentPagingTotal" |
| | | :page-size="pagesize" pager-count="3" :current-page="currentPage" |
| | | @current-change="handleCurrentChange"></el-pagination> |
| | | <el-pagination |
| | | background |
| | | layout="prev, pager, next" |
| | | :total="equimentPagingTotal" |
| | | :page-size="pagesize" |
| | | pager-count="3" |
| | | :current-page="currentPage" |
| | | @current-change="handleCurrentChange" |
| | | ></el-pagination> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose" |
| | | :close-on-click-modal="true" class="land-details-box"> |
| | | <el-dialog |
| | | :title="landTitle" |
| | | :modal="true" |
| | | :visible.sync="landVisible" |
| | | :before-close="landBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="land-details-box" |
| | | > |
| | | <div class="header"> |
| | | <div> |
| | | 负责人: |
| | |
| | | <input type="text" v-model="callPhone" placeholder="请输入联系电话" /> |
| | | </div> |
| | | <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button> |
| | | <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-delete" |
| | | @click="clearLandDetailSearchValue" |
| | | >清空</el-button> |
| | | </div> |
| | | |
| | | <el-table :data="landDetailArr" style="width: 100%" |
| | | <el-table |
| | | :data="landDetailArr" |
| | | style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"> |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" |
| | | > |
| | | <el-table-column label="序号" type="index" width="50" align="center"> |
| | | <template slot-scope="scope"> |
| | | <span>{{(landPage.currentPage - 1) * landPage.pageSize + scope.$index + 1}}</span> |
| | |
| | | <el-table-column prop="phone" label="联系电话"></el-table-column> |
| | | </el-table> |
| | | <div class="pages" ref="tablePagination"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="landPage.pageSize" |
| | | :total="landPage.total" :current-page="landPage.currentPage" |
| | | @current-change="landHandleCurrentChange"></el-pagination> |
| | | <el-pagination |
| | | background |
| | | layout="prev, pager, next" |
| | | :page-size="landPage.pageSize" |
| | | :total="landPage.total" |
| | | :current-page="landPage.currentPage" |
| | | @current-change="landHandleCurrentChange" |
| | | ></el-pagination> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible" |
| | | :before-close="personInfoClose" :close-on-click-modal="true" class="keyPerson-details-box"> |
| | | <el-dialog |
| | | :title="keyPersonTitle" |
| | | :modal="true" |
| | | :visible.sync="keyPersonVisible" |
| | | :before-close="personInfoClose" |
| | | :close-on-click-modal="true" |
| | | class="keyPerson-details-box" |
| | | > |
| | | <div class="header"> |
| | | <div> |
| | | 人员名称: |
| | |
| | | <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" /> |
| | | </div> |
| | | <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button> |
| | | <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-delete" |
| | | @click="clearPeopleDetailSearchValue" |
| | | >清空</el-button> |
| | | </div> |
| | | |
| | | <el-table :data="keyPersonDetailArr" style="width: 100%" |
| | | <el-table |
| | | :data="keyPersonDetailArr" |
| | | style="width: 100%" |
| | | :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"> |
| | | :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" |
| | | > |
| | | <el-table-column prop="zdryxl" label="重点人员类型"></el-table-column> |
| | | <el-table-column prop="realName" label="姓名"></el-table-column> |
| | | <el-table-column prop="address" label="地址"></el-table-column> |
| | |
| | | </el-table> |
| | | |
| | | <div class="pages" ref="tablePagination"> |
| | | <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize" |
| | | :total="peoplePage.total" :current-page="peoplePage.currentPage" |
| | | @current-change="handlePersonPageChange"></el-pagination> |
| | | <el-pagination |
| | | background |
| | | layout="prev, pager, next" |
| | | :page-size="peoplePage.pageSize" |
| | | :total="peoplePage.total" |
| | | :current-page="peoplePage.currentPage" |
| | | @current-change="handlePersonPageChange" |
| | | ></el-pagination> |
| | | </div> |
| | | </el-dialog> |
| | | |
| | | <el-dialog title="警情信息" :modal="true" :visible.sync="policeSituationVisible" |
| | | :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box"> |
| | | <el-dialog |
| | | title="警情信息" |
| | | :modal="true" |
| | | :visible.sync="policeSituationVisible" |
| | | :before-close="policeSituationBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="policeSituation-details-box" |
| | | > |
| | | <div class="btn-change"> |
| | | <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div> |
| | | <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div> |
| | | <div |
| | | :class="{ on: policeInformationType == '接警信息' }" |
| | | @click="alarmOrActAsPolice('接警信息')" |
| | | >接警信息</div> |
| | | <div |
| | | :class="{ on: policeInformationType == '出警信息' }" |
| | | @click="alarmOrActAsPolice('出警信息')" |
| | | >出警信息</div> |
| | | </div> |
| | | |
| | | <div v-show="policeInformationType == '接警信息'" class="box"> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" class="box"> |
| | | <div |
| | | v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" |
| | | class="box" |
| | | > |
| | | <div class="item"> |
| | | <div>处警单位编号:</div> |
| | | <div>{{ CJdata.CJDWBH }}</div> |
| | |
| | | </div> |
| | | </div> |
| | | |
| | | <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" class="box no-data">暂无数据 |
| | | </div> |
| | | <div |
| | | v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" |
| | | class="box no-data" |
| | | >暂无数据</div> |
| | | </el-dialog> |
| | | |
| | | <el-dialog :title="dialogEquimentVideoTitle" :modal="true" :visible.sync="dialogEquimentVideoVisible" |
| | | :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box"> |
| | | <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement" |
| | | style="object-fit: fill"></video> |
| | | <el-dialog |
| | | :title="dialogEquimentVideoTitle" |
| | | :modal="true" |
| | | :visible.sync="dialogEquimentVideoVisible" |
| | | :before-close="dialogBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="car-video-box" |
| | | > |
| | | <video |
| | | autoplay |
| | | controls |
| | | width="100%" |
| | | height="100%" |
| | | ref="videoElement" |
| | | id="videoElement" |
| | | style="object-fit: fill" |
| | | ></video> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |