| | |
| | | |
| | | <template> |
| | | <div class="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" |
| | | @activityChange="activityChange" ref="rightContainer"></right-container> |
| | | <right-container |
| | | class="right-container" |
| | | @showequimentdetail="showequimentdetail" |
| | | @selectPoliceChangeEventData="selectPoliceChangeEventData" |
| | | @changeActivityType="changeActivityType" |
| | | @activityChange="activityChange" |
| | | ref="rightContainer" |
| | | ></right-container> |
| | | |
| | | <bottom-container class="bottom-container" ref="bottomContainer" |
| | | <bottom-container |
| | | class="bottom-container" |
| | | ref="bottomContainer" |
| | | @changePoliceSituationHistoryType="changePoliceSituationHistoryType" |
| | | @changePoliceSituationTimeType="changePoliceSituationTimeType" |
| | | @policeSituationChange="policeSituationChange"></bottom-container> |
| | | @policeSituationChange="policeSituationChange" |
| | | @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="'policeStationName'"></map-select> |
| | | <map-select |
| | | class="map-select" |
| | | @selectCheck="policeStationSelect" |
| | | :checkValue="policeStationCheckValue" |
| | | :options="policeStationOptions" |
| | | :optionsName="'policeStationName'" |
| | | ></map-select> |
| | | |
| | | <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions" |
| | | :optionsName="'areaCheckName'"></map-select> |
| | | <map-select |
| | | class="map-select" |
| | | @selectCheck="areaSelect" |
| | | :checkValue="areaCheckValue" |
| | | :options="areaOptions" |
| | | :optionsName="'areaCheckName'" |
| | | ></map-select> |
| | | |
| | | <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue" |
| | | :options="housingOptions" :optionsName="'housingsName'"></map-select> |
| | | <map-select |
| | | class="map-select" |
| | | @selectCheck="housingSelect" |
| | | :checkValue="housingCheckValue" |
| | | :options="housingOptions" |
| | | :optionsName="'housingsName'" |
| | | ></map-select> |
| | | </div> |
| | | |
| | | <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" |
| | | :close-on-click-modal="true"> |
| | | <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" |
| | | style="object-fit: fill"></video> |
| | | <el-dialog |
| | | :title="dialogTitle" |
| | | :modal="true" |
| | | :visible.sync="dialogVisible" |
| | | :before-close="dialogBeforeClose" |
| | | :close-on-click-modal="true" |
| | | > |
| | | <video |
| | | src="/video/sp.mp4" |
| | | autoplay |
| | | controls |
| | | width="100%" |
| | | height="100%" |
| | | ref="videoElement" |
| | | style="object-fit: fill" |
| | | ></video> |
| | | </el-dialog> |
| | | |
| | | <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> |
| | | <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> |
| | | </el-dialog> |
| | | |
| | | <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible" |
| | | :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box"> |
| | | <el-dialog |
| | | :title="activityTitle" |
| | | :modal="true" |
| | | :visible.sync="activityVisible" |
| | | :before-close="activityBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="activity-details-box" |
| | | > |
| | | <div class="item"> |
| | | <div>活动名称:</div> |
| | | <div>{{ activityDetailArr.activityName }}</div> |
| | |
| | | </div> |
| | | </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="peopleBeforeClose" |
| | | :close-on-click-modal="true" class="area-details-box"> |
| | | <el-dialog |
| | | :title="peopleTitle" |
| | | :modal="true" |
| | | :visible.sync="peopleVisible" |
| | | :before-close="peopleBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="area-details-box" |
| | | > |
| | | <div class="item"> |
| | | <div>责任区负责人:</div> |
| | | <div>王某某</div> |
| | |
| | | </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="left"> |
| | | <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick" |
| | | ref="tree" node-key="id"></el-tree> |
| | | <el-tree |
| | | :data="jurisdictionData" |
| | | :props="defaultProps" |
| | | @node-click="jurisdictionNodeClick" |
| | | ref="tree" |
| | | node-key="id" |
| | | ></el-tree> |
| | | </div> |
| | | <div class="right"> |
| | | <div class="monitor" v-if="monitorContent"> |
| | | <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" |
| | | style="object-fit: fill"></video> |
| | | <video |
| | | src="/video/sp.mp4" |
| | | autoplay |
| | | controls |
| | | width="100%" |
| | | height="100%" |
| | | ref="videoElement" |
| | | style="object-fit: fill" |
| | | ></video> |
| | | </div> |
| | | <div class="others" v-if="othersContent"> |
| | | <el-table :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)" |
| | | <el-table |
| | | :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)" |
| | | 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 prop="carID" label="车牌号" v-if="carArrShow"></el-table-column> |
| | | <el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column> |
| | | <el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column> |
| | | <el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column> |
| | | <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column> |
| | | <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column> |
| | | <el-table-column |
| | | prop="recorderID" |
| | | label="执法记录仪号" |
| | | v-if="recorderArrShow" |
| | | ></el-table-column> |
| | | <el-table-column |
| | | prop="recorderType" |
| | | label="记录仪机型" |
| | | v-if="recorderArrShow" |
| | | ></el-table-column> |
| | | <el-table-column prop="policeStation" label="所属派出所"></el-table-column> |
| | | <el-table-column prop="area" label="所属责任区"></el-table-column> |
| | | </el-table> |
| | | <div class="pages"> |
| | | <el-pagination background layout="prev, pager, next" :total="showArr.length" |
| | | :page-size="pagesize" pager-count="3" :current-page="currentPage" |
| | | @current-change="handleCurrentChange"></el-pagination> |
| | | <el-pagination |
| | | background |
| | | layout="prev, pager, next" |
| | | :total="showArr.length" |
| | | :page-size="pagesize" |
| | | pager-count="3" |
| | | :current-page="currentPage" |
| | | @current-change="handleCurrentChange" |
| | | ></el-pagination> |
| | | </div> |
| | | </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-table :data="landDetailArr" style="width: 100%" |
| | | <el-dialog |
| | | :title="landTitle" |
| | | :modal="true" |
| | | :visible.sync="landVisible" |
| | | :before-close="landBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="land-details-box" |
| | | > |
| | | <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 prop="housingEastate" label="小区名称" width="100"></el-table-column> |
| | | <el-table-column prop="location" label="位置" width="140"></el-table-column> |
| | | <el-table-column prop="area" label="面积" width="120"></el-table-column> |
| | |
| | | </el-table> |
| | | </el-dialog> |
| | | |
| | | <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible" |
| | | :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box"> |
| | | <el-table :data="keyPersonDetailArr" style="width: 100%" |
| | | <el-dialog |
| | | :title="keyPersonTitle" |
| | | :modal="true" |
| | | :visible.sync="keyPersonVisible" |
| | | :before-close="keyPersonBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="keyPerson-details-box" |
| | | > |
| | | <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="type" label="重点人员类型"></el-table-column> |
| | | <el-table-column prop="name" label="姓名"></el-table-column> |
| | | <el-table-column prop="sex" label="性别"></el-table-column> |
| | |
| | | </el-table> |
| | | </el-dialog> |
| | | |
| | | <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible" |
| | | :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box"> |
| | | <el-dialog |
| | | :title="policeSituationTitle" |
| | | :modal="true" |
| | | :visible.sync="policeSituationVisible" |
| | | :before-close="policeSituationBeforeClose" |
| | | :close-on-click-modal="true" |
| | | class="policeSituation-details-box" |
| | | > |
| | | <div class="item"> |
| | | <div>所属派出所:</div> |
| | | <div>{{ policeSituationDetailArr.policeName }}</div> |
| | |
| | | }, |
| | | |
| | | policeSituationSiteClick (e) { |
| | | this.policeSituationDetailArr = e.overlay.attrParams |
| | | if ('overlay' in e) { |
| | | this.policeSituationDetailArr = e.overlay.attrParams |
| | | this.policeSituationTitle = e.overlay.attrParams.name |
| | | } else { |
| | | this.policeSituationDetailArr = e |
| | | this.policeSituationTitle = e.num + '号警情' |
| | | } |
| | | this.policeSituationVisible = true |
| | | this.policeSituationTitle = e.overlay.attrParams.name |
| | | }, |
| | | |
| | | equimentBeforeClose () { |
| | |
| | | background-color: #66b1ff87; |
| | | } |
| | | |
| | | :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) { |
| | | :deep(.el-tree--highlight-current |
| | | .el-tree-node.is-current |
| | | > .el-tree-node__content) { |
| | | background: #454545; |
| | | } |
| | | |