srs-police-affairs.git

			@@ -2,7 +2,7 @@
			* @Author: shuishen 1109946754@qq.com
			* @Date: 2023-01-13 15:52:59
			* @LastEditors: shuishen 1109946754@qq.com
			* @LastEditTime: 2023-04-10 17:40:16
			* @LastEditTime: 2023-05-06 21:50:44
			* @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue
			* @Description:
			*
			@@ -14,28 +14,92 @@
			<div class="header">
			<div class="bottom-title">警情动态</div>
			<div class="timeTab" v-show="historytype">
			<span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
			<span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
			<span class="beforetime" :class="{ choosed: timetype == 2 }" @click="timeTabClick(2)">自定义</span>
			<span
			class="beforetime"
			:class="{ choosed: timetype == 0 }"
			@click="timeTabClick(0)"
			>周</span>
			<span
			class="beforetime"
			:class="{ choosed: timetype == 1 }"
			@click="timeTabClick(1)"
			>月</span>
			<span
			class="beforetime"
			:class="{ choosed: timetype == 2 }"
			@click="timeTabClick(2)"
			>自定义</span>
			</div>

			<div class="timeSeclect" v-show="historytype">
			<el-date-picker v-show="timetype == 0" v-model="currentWeekTime" @change="datePickerChange" type="week"
			align="center" format="yyyy 第 WW 周" placeholder="选择周"
			popper-class="date-week-style"></el-date-picker>

			<el-date-picker v-show="timetype == 1" v-model="currentMonthTime" @change="datePickerChange"
			type="month" align="center" placeholder="选择月" popper-class="date-mouth-style"></el-date-picker>

			<el-date-picker v-show="timetype == 2" :clearable="false" v-model="currentTime" type="daterange"
			align="center" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
			@change="datePickerChange" :picker-options="pickerOptions"
			popper-class="date-day-style"></el-date-picker>
			<div v-show="timetype == 0">
			<el-date-picker
			size="small"
			v-model="currentWeekTime"
			@change="datePickerChange"
			type="week"
			align="center"
			format="yyyy 第 WW 周"
			placeholder="选择周"
			popper-class="date-week-style"
			></el-date-picker>
			</div>
			<div v-show="timetype == 1">
			<el-date-picker
			size="small"
			v-model="currentMonthTime"
			@change="datePickerChange"
			type="month"
			align="center"
			placeholder="选择月"
			popper-class="date-mouth-style"
			></el-date-picker>
			</div>
			<div v-show="timetype == 2">
			<el-date-picker
			size="small"
			:clearable="false"
			v-model="currentTime"
			type="daterange"
			align="center"
			unlink-panels
			range-separator="至"
			start-placeholder="开始日期"
			end-placeholder="结束日期"
			@change="datePickerChange"
			:picker-options="pickerOptions"
			popper-class="date-day-style"
			></el-date-picker>
			</div>
			<div>
			<el-select
			style="flex: 1;"
			size="small"
			v-model="policeInforValue"
			@change="policeTypeChange"
			placeholder="请选择"
			>
			<el-option
			v-for="item in policeInforOptions"
			:key="item.value"
			:label="item.label"
			:value="item.value"
			></el-option>
			</el-select>
			</div>
			</div>

			<div class="history-tab">
			<span class="beforetime" :class="{ choosed: historytype == 0 }" @click="historyTabClick(0)">实时</span>
			<span class="beforetime" :class="{ choosed: historytype == 1 }" @click="historyTabClick(1)">历史</span>
			<span
			class="beforetime"
			:class="{ choosed: historytype == 0 }"
			@click="historyTabClick(0)"
			>实时</span>
			<span
			class="beforetime"
			:class="{ choosed: historytype == 1 }"
			@click="historyTabClick(1)"
			>历史</span>
			</div>
			</div>

			@@ -54,22 +118,46 @@
			</ul>

			<!-- <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr" class="warp" :class-option="classOption"> -->
			<div v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr" class="warp"
			:class-option="classOption">
			<el-carousel indicator-position="none" direction="vertical" @change="changeAlarm">
			<div
			v-if="policeSituationRealtimeArr.length > 0"
			:data="policeSituationRealtimeArr"
			class="warp"
			:class-option="classOption"
			>
			<el-carousel
			indicator-position="none"
			direction="vertical"
			@change="changeAlarm"
			>
			<el-carousel-item v-for="item in alarmPageCount" :key="item">
			<ul class="item">
			<li v-for="(item, index) in policeSituationRealtimeArr" :key="index" class="row"
			@click.stop="handleSelectClick(item)">
			<li
			v-for="(item, index) in policeSituationRealtimeArr"
			:key="index"
			class="row"
			@click.stop="handleSelectClick(item)"
			>
			<span class="num" v-text="item.index"></span>
			<span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
			<span class="receiving-alarm-time" v-text="item.BJSJ"></span>
			<span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
			<span class="incident-site" :title="item.SFDZ" v-text="item.SFDZ"></span>
			<span
			class="call-police-content"
			:title="item.BJNR"
			v-text="item.BJNR"
			></span>
			<span
			class="incident-site"
			:title="item.SFDZ"
			v-text="item.SFDZ"
			></span>
			<span class="call-police-type" v-text="item.BJLX"></span>
			<span class="have-position">
			<i v-show="item.position == '有'" class="el-icon-location" style="color: #1AFA29;"
			@click.stop="policeSituationClick(item)"></i>
			<i
			v-show="item.position == '有'"
			class="el-icon-location"
			style="color: #1AFA29;"
			@click.stop="policeSituationClick(item)"
			></i>
			</span>
			<span class="alarm-bz" v-text="item.MEMO"></span>
			</li>
			@@ -84,21 +172,40 @@
			</div>

			<div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
			<el-table :data="policeSituationHistoryArr" :key="currentPage" style="width: 100%"
			<el-table
			:data="policeSituationHistoryArr"
			:key="currentPage"
			style="width: 100%"
			:height="currentTableHeight"
			:header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="handleSelectClick">
			<el-table-column :show-overflow-tooltip="true" prop="index" label="序号" width="60"></el-table-column>
			:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
			@cell-click="handleSelectClick"
			>
			<el-table-column
			:show-overflow-tooltip="true"
			prop="index"
			label="序号"
			width="60"
			></el-table-column>
			<el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位"></el-table-column>
			<el-table-column prop="BJSJ" label="报警时间">
			</el-table-column>
			<el-table-column prop="BJSJ" label="报警时间"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型"></el-table-column>
			<el-table-column :show-overflow-tooltip="true" prop="position" label="坐标" width="60">
			<el-table-column
			:show-overflow-tooltip="true"
			prop="position"
			label="坐标"
			width="60"
			>
			<template slot-scope="scope">
			<el-button v-show="scope.row.position == '有'" @click.stop="policeSituationClick(scope.row)"
			type="text" size="small" title="定位">
			<el-button
			v-show="scope.row.position == '有'"
			@click.stop="policeSituationClick(scope.row)"
			type="text"
			size="small"
			title="定位"
			>
			<i class="el-icon-location" style="color: #1AFA29;"></i>
			</el-button>
			</template>
			@@ -106,33 +213,59 @@
			<el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注"></el-table-column>
			</el-table>

			<div class="pages all-pagination-sty" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0">
			<el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
			:current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
			<div
			class="pages all-pagination-sty"
			ref="ElPagination"
			v-if="policeSituationHistoryArr.length > 0"
			>
			<el-pagination
			background
			layout="prev, pager, next"
			:page-size="pagesize"
			:page-count="pagesCount"
			:current-page="currentPage"
			@current-change="handleCurrentChange"
			></el-pagination>
			</div>
			</div>
			</div>

			<svg class="border-svg">
			<defs>
			<path id="bottom-box-path"
			<path
			id="bottom-box-path"
			d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
			fill="transparent" />
			fill="transparent"
			/>
			<radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
			<stop offset="0%" stop-color="#fff" stop-opacity="1" />
			<stop offset="100%" stop-color="#fff" stop-opacity="0" />
			</radialGradient>
			<mask id="border-box-mask">
			<circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)">
			<animateMotion dur="8s"
			<animateMotion
			dur="8s"
			path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
			rotate="auto" repeatCount="indefinite" />
			rotate="auto"
			repeatCount="indefinite"
			/>
			</circle>
			</mask>
			</defs>

			<use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd">
			<animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" repeatCount="indefinite" />
			<use
			stroke-width="2"
			xlink:href="#bottom-box-path"
			mask="url(#border-box-mask)"
			stroke="#4fd2dd"
			>
			<animate
			attributeName="stroke-dasharray"
			from="0, 3220"
			to="3220, 0"
			dur="8s"
			repeatCount="indefinite"
			/>
			</use>
			</svg>
			</div>
			@@ -204,7 +337,46 @@
			currentPage: 1,
			// table高度
			currentTableHeight: 0,
			policeStaionID: ''
			policeStaionID: '',
			policeInforValue: '',
			policeInforOptions: [
			{
			value: '',
			label: '全部'
			},
			{
			value: '盗窃',
			label: '盗窃'
			},
			{
			value: '诈骗',
			label: '诈骗'
			},
			{
			value: '纠纷',
			label: '纠纷'
			},
			{
			value: '涉赌',
			label: '涉赌'
			},
			{
			value: '涉毒',
			label: '涉毒'
			},
			{
			value: '涉黄',
			label: '涉黄'
			},
			{
			value: '求救',
			label: '求救'
			},
			{
			value: '其他',
			label: '其他'
			}
			],
			}
			},

			@@ -469,9 +641,30 @@
			})
			},


			policeTypeChange () {
			this.currentPage = 1

			if (this.timetype == 0) {

			this.getAlarmList({ type: this.timetype, time: this.dateFormat(this.currentWeekTime), current: this.currentPage })

			} else if (this.timetype == 1) {

			this.getAlarmList({ type: this.timetype, time: this.dateFormat(this.currentMonthTime), current: this.currentPage })

			} else {
			const date = this.currentTime.map(item => {
			return this.dateFormat(item)
			})

			this.getAlarmList({ start: date[0], end: date[1], current: this.currentPage })
			}
			},

			// 获取历史接警记录
			getAlarmList (params) {
			getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
			getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id, bjlx: this.policeInforValue }).then(res => {
			this.pagesCount = res.data.data.pages

			this.policeSituationHistoryArr = []
			@@ -660,9 +853,6 @@

			// 点击定位或者显示弹窗
			policeSituationClick (item) {

			console.log(item, 959999)

			this.$EventBus.$emit('toPosition', {
			layerName: 'policeSituationyLayers',
			siteJd: Number(item.ZDDWXZB),
			@@ -742,7 +932,7 @@
			.timeTab {
			position: absolute;
			top: 22px;
			right: 400px;
			right: 670px;
			display: flex;
			border-radius: 6px;
			overflow: hidden;
			@@ -766,11 +956,20 @@
			}

			.timeSeclect {
			width: 250px;
			width: 520px;
			height: 30px;
			position: absolute;
			top: 12px;
			top: 20px;
			right: 130px;
			display: flex;
			align-items: center;

			& > div {
			margin: 0 5px;
			flex: 1;
			display: flex;
			align-items: center;
			}
			}

			.history-tab {