<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2023-01-13 15:52:59
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-05-10 17:33:36
|
* @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue
|
* @Description:
|
*
|
* Copyright (c) 2023 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
<template>
|
<div class="container">
|
<div class="box">
|
<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>
|
</div>
|
|
<div class="timeSeclect" v-show="historytype">
|
<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>
|
</div>
|
</div>
|
|
<div class="body" v-if="historytype == 0" ref="tableBox">
|
<ul class="title-header">
|
<li>
|
<span class="num">序号</span>
|
<span class="receiving-alarm-unit">接警单位</span>
|
<span class="receiving-alarm-time">报警时间</span>
|
<span class="call-police-content">报警内容</span>
|
<span class="incident-site">事发地址</span>
|
<span class="call-police-type">报警类型</span>
|
<span class="have-position">坐标</span>
|
<span class="alarm-bz">备注</span>
|
</li>
|
</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">
|
<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)">
|
<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-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>
|
</span>
|
<span class="alarm-bz" v-text="item.MEMO"></span>
|
</li>
|
</ul>
|
</el-carousel-item>
|
</el-carousel>
|
</div>
|
|
<!-- </vue-seamless-scroll> -->
|
|
<div class="warp no-data" v-else>暂无警情数据</div>
|
</div>
|
|
<div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
|
<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>
|
<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 :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="jqlxName" label="报警类型"></el-table-column>
|
<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="定位">
|
<i class="el-icon-location" style="color: #1AFA29;"></i>
|
</el-button>
|
</template>
|
</el-table-column>
|
<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>
|
</div>
|
</div>
|
|
<svg class="border-svg">
|
<defs>
|
<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" />
|
<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"
|
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" />
|
</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>
|
</svg>
|
</div>
|
</template>
|
|
<script>
|
let alarmTiming = null
|
|
// import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import { getAnswerPolices, getAlarmList } from "@/api/home/index.js"
|
|
export default {
|
inject: ["getWidth", 'userInfo'],
|
|
data () {
|
return {
|
alarmPageCount: 1,
|
alarmPageSize: 4,
|
timetype: 2,
|
historytype: 0,
|
// 实时
|
policeSituationRealtimeAllArr: [],
|
policeSituationRealtimeArr: [],
|
// 历史
|
policeSituationHistoryArr: [],
|
eventTime: '',
|
// 当前选择周时间
|
currentWeekTime: '',
|
// 当前选择月时间
|
currentMonthTime: '',
|
// 当前选择自定义时间
|
currentTime: [],
|
|
pickerOptions: {
|
shortcuts: [{
|
text: '最近一周',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近一个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
picker.$emit('pick', [start, end])
|
}
|
}, {
|
text: '最近三个月',
|
onClick (picker) {
|
const end = new Date()
|
const start = new Date()
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
|
picker.$emit('pick', [start, end])
|
}
|
}]
|
}, // 日期设置对象
|
classOption: {
|
step: 1
|
},
|
// 分页
|
pagesize: 15,
|
pagesCount: 1,
|
currentPage: 1,
|
// table高度
|
currentTableHeight: 0,
|
policeStaionID: '',
|
policeInforValue: '',
|
policeInforOptions: [
|
{
|
value: '',
|
label: '全部'
|
},
|
{
|
value: '盗窃',
|
label: '盗窃'
|
},
|
{
|
value: '涉诈',
|
label: '涉诈'
|
},
|
{
|
value: '纠纷',
|
label: '纠纷'
|
},
|
{
|
value: '涉赌',
|
label: '涉赌'
|
},
|
{
|
value: '涉毒',
|
label: '涉毒'
|
},
|
{
|
value: '涉黄',
|
label: '涉黄'
|
},
|
{
|
value: '求助',
|
label: '求助'
|
},
|
{
|
value: '其他',
|
label: '其他'
|
}
|
],
|
}
|
},
|
|
// components: {
|
// vueSeamlessScroll
|
// },
|
|
created () {
|
this.getHomeAllData()
|
|
this.defaultDate()
|
|
// disabledDate 为true表示不可选,false表示可选
|
this.pickerOptions = {
|
...this.pickerOptions,
|
disabledDate (time) {
|
// 设置可选择的日期为今天之后的一个月内
|
let curDate = (new Date()).getTime()
|
return time.getTime() > curDate
|
}
|
}
|
|
window.addEventListener('resize', this.setTableHeight)
|
},
|
|
mounted () {
|
if (this.getWidth() > 7000) {
|
this.classOption.step = 8
|
}
|
},
|
|
methods: {
|
/**
|
* @description: 获取当前组件内所有数据
|
* @return {*}
|
*/
|
getHomeAllData (id = '') {
|
this.policeStaionID = id
|
|
this.historyTabClick(0)
|
},
|
|
// 获取table高度
|
setTableHeight () {
|
this.$nextTick(() => {
|
if (this.$refs.ElTableBox && this.$refs.ElPagination) {
|
this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
|
}
|
})
|
},
|
|
// 分页选择事件
|
handleCurrentChange: function (currentPage) {
|
this.currentPage = currentPage
|
|
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 })
|
|
}
|
|
},
|
|
// 设置默认时间
|
defaultDate () {
|
var current = new Date()
|
|
var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)
|
|
this.currentTime = [seven, current] //将值设置给插件绑定的数据
|
},
|
|
// 时间改变事件
|
datePickerChange (e) {
|
// this.timetype
|
this.currentPage = 1
|
|
if (this.timetype == 0) {
|
|
this.getAlarmList({ type: this.timetype, time: this.dateFormat(e), current: this.currentPage })
|
|
} else if (this.timetype == 1) {
|
|
this.getAlarmList({ type: this.timetype, time: this.dateFormat(e), current: this.currentPage })
|
|
} else {
|
|
const date = e.map(item => {
|
return this.dateFormat(item)
|
})
|
|
this.getAlarmList({ start: date[0], end: date[1], current: this.currentPage })
|
|
}
|
},
|
|
// 获取当前日期
|
dateFormat (dateData) {
|
var date = new Date(dateData)
|
var y = date.getFullYear()
|
var m = date.getMonth() + 1
|
m = m < 10 ? ('0' + m) : m
|
var d = date.getDate()
|
d = d < 10 ? ('0' + d) : d
|
const time = y + '-' + m + '-' + d
|
return time
|
},
|
|
// 走马灯改变事件
|
changeAlarm (index) {
|
index = index + 1
|
// 改变数据
|
this.alarmDataHanlder(index)
|
},
|
|
// 获取实时接警记录
|
getAnswerPolices () {
|
getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
|
this.policeSituationRealtimeArr = []
|
|
if (res.data && res.data.length) {
|
// 计算页数
|
this.alarmPageCount = Math.ceil(res.data.length / this.alarmPageSize)
|
this.policeSituationRealtimeAllArr = res.data.map((item, index) => {
|
|
if (item.JJDWMC.indexOf('上饶市公安局') != -1) item.JJDWMC = item.JJDWMC.replace(/上饶市公安局/, '市局')
|
if (item.JJDWMC.indexOf('信州区分局') != -1) item.JJDWMC = item.JJDWMC.replace(/信州区分局/, '')
|
if (item.JJDWMC.indexOf('信州') != -1) item.JJDWMC = item.JJDWMC.replace(/信州/, '')
|
|
return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB && item.ZDDWYZB != 0 ? '有' : '无' }
|
})
|
// 数据处理
|
this.alarmDataHanlder(1)
|
} else {
|
this.alarmPageCount = 1
|
this.policeSituationRealtimeArr = []
|
}
|
|
this.$emit('policeSituationChange')
|
})
|
},
|
|
/**
|
* 实时警情数据处理（滚动）
|
* @param {*} index
|
*/
|
alarmDataHanlder (index) {
|
this.policeSituationRealtimeArr = []
|
//计算序号
|
var start = (index - 1) * this.alarmPageSize
|
var end = index * this.alarmPageSize
|
// 获取第 index 页数据
|
this.policeSituationRealtimeAllArr.forEach((item, index) => {
|
if (index < Number(end) && index >= Number(start)) {
|
this.policeSituationRealtimeArr.push(item)
|
}
|
})
|
},
|
|
|
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, bjlx: this.policeInforValue }).then(res => {
|
this.pagesCount = res.data.data.pages
|
|
this.policeSituationHistoryArr = []
|
|
if (res.data.data.records.length > 0) {
|
this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
|
|
if (item.JJDWMC.indexOf('上饶市公安局') != -1) item.JJDWMC = item.JJDWMC.replace(/上饶市公安局/, '市局')
|
if (item.JJDWMC.indexOf('信州区分局') != -1) item.JJDWMC = item.JJDWMC.replace(/信州区分局/, '')
|
if (item.JJDWMC.indexOf('信州') != -1) item.JJDWMC = item.JJDWMC.replace(/信州/, '')
|
|
return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB, position: item.ZDDWYZB && item.ZDDWYZB != 0 ? '有' : '无' }
|
})
|
} else {
|
this.policeSituationHistoryArr = []
|
}
|
|
this.setTableHeight()
|
|
this.$emit('policeSituationChange')
|
})
|
},
|
|
// 周月选择
|
timeTabClick (type) {
|
this.timetype = type
|
|
this.currentPage = 1
|
|
if (type == 2) {
|
|
this.defaultDate()
|
|
const date = this.currentTime.map(item => {
|
return this.dateFormat(item)
|
})
|
|
this.getAlarmList({ start: date[0], end: date[1], current: this.currentPage })
|
|
} else {
|
|
this.currentWeekTime = new Date()
|
|
this.currentMonthTime = new Date()
|
|
this.getAlarmList({ type, time: this.dateFormat(new Date()), current: this.currentPage })
|
|
}
|
},
|
|
// 实时历史选择
|
async historyTabClick (type) {
|
console.log('historyTabClick')
|
this.historytype = type
|
|
this.timetype = 2
|
|
this.$emit('changePoliceSituationHistoryType', type)
|
|
const date = this.currentTime.map(item => {
|
return this.dateFormat(item)
|
})
|
|
if (alarmTiming != null) {
|
clearInterval(alarmTiming)
|
alarmTiming = null
|
}
|
|
if (type == 0) {
|
await this.getAnswerPolices()
|
|
alarmTiming = setInterval(() => {
|
this.getAnswerPolices()
|
}, 60000)
|
} else {
|
this.currentPage = 1
|
|
await this.getAlarmList({
|
start: date[0],
|
end: date[1],
|
current: this.currentPage
|
})
|
}
|
|
},
|
|
chooseRealData () {
|
return this.policeSituationRealtimeArr
|
},
|
|
chooseTimeDate () {
|
return this.policeSituationHistoryArr
|
},
|
|
// 列表行选择
|
handleSelectClick (item) {
|
this.$emit('policeSituationSiteClick', item)
|
},
|
|
// 点击定位或者显示弹窗
|
policeSituationClick (item) {
|
this.$EventBus.$emit('toPosition', {
|
layerName: 'policeSituationyLayers',
|
siteJd: Number(item.ZDDWXZB),
|
siteWd: Number(item.ZDDWYZB)
|
})
|
|
this.$store.commit('SET_DETAILSPOPUP', {
|
showBox: true,
|
showBtn: true
|
})
|
|
this.$store.commit('SET_DATAPOPUP', item)
|
|
var popup = new global.DC.DivForms(global.viewer, {
|
domId: 'divFormsDomBox',
|
position: [
|
global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
Number(item.ZDDWXZB),
|
Number(item.ZDDWYZB),
|
0
|
)
|
)
|
]
|
})
|
}
|
},
|
|
destroyed () {
|
window.removeEventListener('resize', this.setTableHeight)
|
|
if (alarmTiming != null) {
|
clearInterval(alarmTiming)
|
alarmTiming = null
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
height: 100%;
|
width: 100%;
|
background-image: url(/img/box/bottom-box.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
|
.box {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 11;
|
}
|
|
.header {
|
position: relative;
|
width: 100%;
|
height: 56px;
|
|
.bottom-title {
|
position: absolute;
|
top: 0;
|
left: 18px;
|
height: 56px;
|
line-height: 56px;
|
color: #fff;
|
text-align: center;
|
font-size: 16px;
|
font-weight: bold;
|
font-style: oblique;
|
letter-spacing: 2px;
|
}
|
|
.timeTab {
|
position: absolute;
|
top: 22px;
|
right: 670px;
|
display: flex;
|
border-radius: 6px;
|
overflow: hidden;
|
|
span {
|
padding: 0 10px;
|
height: 26px;
|
text-align: center;
|
line-height: 26px;
|
background: $sub-tab-bg-color;
|
}
|
|
.beforetime {
|
color: #99cccc;
|
cursor: pointer;
|
}
|
|
.choosed {
|
color: #fff;
|
}
|
}
|
|
.timeSeclect {
|
width: 520px;
|
height: 30px;
|
position: absolute;
|
top: 20px;
|
right: 130px;
|
display: flex;
|
align-items: center;
|
|
&>div {
|
margin: 0 5px;
|
flex: 1;
|
display: flex;
|
align-items: center;
|
}
|
}
|
|
.history-tab {
|
position: absolute;
|
top: 22px;
|
right: 12px;
|
display: flex;
|
border-radius: 6px;
|
overflow: hidden;
|
|
span {
|
padding: 0 10px;
|
height: 26px;
|
text-align: center;
|
line-height: 26px;
|
background: $sub-tab-bg-color;
|
}
|
|
.beforetime {
|
color: #99cccc;
|
cursor: pointer;
|
}
|
|
.choosed {
|
color: #fff;
|
}
|
}
|
}
|
|
.body {
|
margin: 12px;
|
margin-top: 10px;
|
margin-bottom: 14px;
|
width: calc(100% - 24px);
|
height: calc(100% - 80px);
|
|
.title-header {
|
li {
|
color: #fff !important;
|
background: $table-header-bg-color !important;
|
}
|
}
|
|
/* 解决自定义滚动条 x 轴显示问题 */
|
.warp {
|
margin: 0 auto;
|
overflow: hidden;
|
width: 100%;
|
height: calc(100% - 44px);
|
}
|
|
.warp.no-data {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
ul {
|
li {
|
height: 44px;
|
line-height: 44px;
|
display: flex;
|
cursor: pointer;
|
|
span {
|
padding: 0 4px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.num {
|
width: 6%;
|
}
|
|
.receiving-alarm-unit {
|
width: 12.6%;
|
}
|
|
.receiving-alarm-people {
|
width: 7.6%;
|
}
|
|
.receiving-alarm-time {
|
width: 16%;
|
}
|
|
.call-people {
|
width: 7.6%;
|
}
|
|
.call-phone {
|
width: 10%;
|
}
|
|
.call-police-content {
|
width: 14%;
|
}
|
|
.incident-site {
|
width: 24%;
|
}
|
|
.call-police-type {
|
width: 8%;
|
}
|
|
.have-position {
|
width: 8%;
|
}
|
|
.alarm-bz {
|
flex: 1;
|
}
|
}
|
|
li:nth-child(2n) {
|
background: $table-body-tr-2n-color;
|
color: #fff !important;
|
}
|
|
li:nth-child(2n-1) {
|
background: $table-body-tr-n-color;
|
color: #fff;
|
}
|
}
|
}
|
|
.current-table-body {
|
margin: 12px;
|
margin-top: 10px;
|
margin-bottom: 14px;
|
width: calc(100% - 24px);
|
height: calc(100% - 80px);
|
|
.pages {
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
}
|
|
.border-svg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: 1;
|
}
|
}
|
</style>
|
