forked from srs-police-affairs
src/views/home/components/bottomContainer.vue
@@ -1,192 +1,365 @@ c<template> <template> <div class="container"> <div class="header"> <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 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> </div> <div class="timeSeclect" v-show="historytype"> <!-- <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> --> <el-date-picker @change="datePickerChange" v-show="timetype == 0" v-model="currentWeekTime" type="week" format="yyyy 第 WW 周" :picker-options="pickerOptions" placeholder="选择周"> </el-date-picker> <el-date-picker @change="datePickerChange" v-show="timetype == 1" v-model="currentMonthTime" type="month" :picker-options="pickerOptions" placeholder="选择月"> </el-date-picker> </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="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> <div class="body" ref="tableBox" @click="handleSelectClick($event)"> <ul class="title-header"> <li> <span class="num">序号</span> <span class="receiving-alarm-unit">接警单位</span> <span class="receiving-alarm-people">接警员</span> <span class="receiving-alarm-time">接警时间</span> <span class="call-people">报警人</span> <span class="call-phone">联系电话</span> <span class="call-police-content">报警内容</span> <span class="incident-site">事发地址</span> <span class="call-police-type">报警类型</span> <span class="alarm-bz">备注</span> </li> </ul> <vue-seamless-scroll v-if="currentUseDataLength > 0" :data="listCurrentData" class="warp" :class-option="classOption"> <ul class="item"> <li v-for="(item, index) in listCurrentData" :key="index" :data-obj="JSON.stringify(item)" class="row"> <span class="num" v-text="index + 1"></span> <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span> <span class="receiving-alarm-people" v-text="item.JJYXM"></span> <span class="receiving-alarm-time" v-text="item.JJSJ"></span> <span class="call-people" v-text="item.BJRXM"></span> <span class="call-phone" v-text="item.LXDH"></span> <span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span> <span class="incident-site" v-text="item.SFDZ"></span> <span class="call-police-type" v-text="item.BJLX"></span> <span class="alarm-bz" v-text="item.MEMO"></span> </li> </ul> </vue-seamless-scroll> <div class="warp no-data" v-else> 暂无数据 </div> </div> </div> <div class="body" ref="tableBox" @click="handleSelectClick($event)"> <ul> <li style="color: #fff; background: rgb(1, 76, 137);"> <span class="num">序号</span> <span class="type">警情类别</span> <span class="state">警情状态</span> <span class="comingPhone">报警电话</span> <span class="dealTime">接警时间</span> <span class="dealPolice">经办民警</span> <span class="callPeople">报警人</span> <span class="callPhone">报警人联系人</span> <span class="callContent">报警内容</span> </li> </ul> <vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr" class="warp" > <ul class="item"> <li v-for="(item, index) in (historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr)" :key="index" :data-obj="JSON.stringify(item)" class="row" > <!-- <span class="num" v-text="item.num"></span> --> <span class="num" v-text="index + 1"></span> <span class="type" v-text="item.type"></span> <span class="state" v-text="item.state"></span> <span class="comingPhone" v-text="item.comingPhone"></span> <span class="dealTime" v-text="item.dealTime"></span> <span class="dealPolice" v-text="item.dealPolice"></span> <span class="callPeople" v-text="item.callPeople"></span> <span class="callPhone" v-text="item.callPhone"></span> <span class="callContent" v-text="item.callContent"></span> </li> </ul> </vue-seamless-scroll> </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,0 c55.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,25 c0,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,10 c-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-20 c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" fill="transparent"> </path> <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="#fff" stop-opacity="1"></stop> <stop offset="100%" stop-color="#fff" stop-opacity="0"></stop> </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,0 c55.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,25 c0,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,10 c-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-20 c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z" rotate="auto" repeatCount="indefinite"></animateMotion> </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"> </animate> </use> </svg> </div> </template> <script> import vueSeamlessScroll from 'vue-seamless-scroll' import realtimeArr from '@/assets/data/policeSituationArr/realtimeArr.js' import historyArr from '@/assets/data/policeSituationArr/historyArr.js' import { getCallPolices, getAnswerPolices, getAlarmList } from "@/api/home/index.js" export default { data () { return { timetype: 0, historytype: 0, // 实时 policeSituationRealtimeArr: [], // 历史 policeSituationHistoryArr: [], policeSituationHistorySaveArr: [], eventTime: '', currentWeekTime: '', currentMonthTime: '', pickerOptions: {}, // 日期设置对象 classOption: { step: 1 } } }, inject: ["getWidth"], components: { vueSeamlessScroll }, computed: { listCurrentData () { if (this.historytype == 0) { return this.policeSituationRealtimeArr } else { return this.policeSituationHistoryArr } }, currentUseDataLength () { if (this.historytype == 0) { return this.policeSituationRealtimeArr.length } else { return this.policeSituationHistoryArr.length } } }, created () { this.policeSituationRealtimeArr = realtimeArr this.policeSituationHistoryArr = historyArr this.policeSituationHistorySaveArr = historyArr this.getAnswerPolices() // disabledDate 为true表示不可选,false表示可选 this.pickerOptions = { disabledDate (time) { // 设置可选择的日期为今天之后的一个月内 let curDate = (new Date()).getTime() return time.getTime() > curDate } } }, mounted () { if (this.timetype == 0) { this.policeSituationHistoryArr = this.chooseWeekTimeDate(this.policeSituationHistorySaveArr) } else { this.policeSituationHistoryArr = this.chooseMouthTimeDate(this.policeSituationHistorySaveArr) if (this.getWidth() > 7000) { this.classOption.step = 8 } }, methods: { timeTabClick (type) { this.timetype = type this.$emit('changePoliceSituationTimeType', type) this.$emit('policeSituationChange') if (type == 0) { this.policeSituationHistoryArr = this.chooseWeekTimeDate(this.policeSituationHistorySaveArr) } else { this.policeSituationHistoryArr = this.chooseMouthTimeDate(this.policeSituationHistorySaveArr) } // 时间改变事件 datePickerChange (e) { // this.timetype const dateStr = this.dateFormat(e) this.getAlarmList(this.timetype, dateStr) }, // 获取当前日期 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 }, // 获取实时接警记录 getAnswerPolices () { // getAnswerPolices().then(res => { // this.policeSituationRealtimeArr = res.data.result // }) this.policeSituationRealtimeArr = [{ ZDDWXZB: 112, ZDDWYZB: 25, JJDWMC: '信州公安局派出所', JJYXM: '欧阳西门', JJSJ: '2022-12-12 12:12:12', BJRXM: '西门庆祝', LXDH: 17335843642, BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所', SFDZ: '上饶市信州区万达华府小区', BJLX: '聚众赌博', MEMO: '人群聚集赌博' }, { JJDWMC: '信州公安局派出所', JJYXM: '欧阳西门', JJSJ: '2022-12-12 12:12:12', BJRXM: '西门庆祝', LXDH: 17335843642, BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所', SFDZ: '上饶市信州区万达华府小区', BJLX: '聚众赌博', MEMO: '人群聚集赌博' }, { JJDWMC: '信州公安局派出所', JJYXM: '欧阳西门', JJSJ: '2022-12-12 12:12:12', BJRXM: '西门庆祝', LXDH: 17335843642, BJNR: '今日在某小区查获私人赌博场所', SFDZ: '上饶市信州区万达华府小区', BJLX: '聚众赌博', MEMO: '人群聚集赌博' }, { JJDWMC: '信州公安局派出所', JJYXM: '欧阳西门', JJSJ: '2022-12-12 12:12:12', BJRXM: '西门庆祝', LXDH: 17335843642, BJNR: '今日在某小区查获私人赌博场所', SFDZ: '上饶市信州区万达华府小区', BJLX: '聚众赌博', MEMO: '人群聚集赌博' }, { JJDWMC: '信州公安局派出所', JJYXM: '欧阳西门', JJSJ: '2022-12-12 12:12:12', BJRXM: '西门庆祝', LXDH: 17335843642, BJNR: '今日在某小区查获私人赌博场所', SFDZ: '上饶市信州区万达华府小区', BJLX: '聚众赌博', MEMO: '人群聚集赌博' }, { JJDWMC: '信州公安局派出所', JJYXM: '欧阳西门', JJSJ: '2022-12-12 12:12:12', BJRXM: '西门庆祝', LXDH: 17335843642, BJNR: '今日在某小区查获私人赌博场所', SFDZ: '上饶市信州区万达华府小区', BJLX: '聚众赌博', MEMO: '人群聚集赌博' }, { JJDWMC: '信州公安局派出所', JJYXM: '欧阳西门', JJSJ: '2022-12-12 12:12:12', BJRXM: '西门庆祝', LXDH: 17335843642, BJNR: '今日在某小区查获私人赌博场所', SFDZ: '上饶市信州区万达华府小区', BJLX: '聚众赌博', MEMO: '人群聚集赌博' }] }, // 获取历史接警记录 getAlarmList (type, time) { getAlarmList(type, time).then(res => { this.policeSituationHistoryArr = res.data.data.records }) }, // 周月选择 timeTabClick (type) { this.timetype = type if (type == 0) { this.getAlarmList(type, this.dateFormat(this.currentWeekTime)) } else { this.currentMonthTime == '' ? this.currentMonthTime = new Date() : '' this.getAlarmList(type, this.dateFormat(this.currentMonthTime)) } this.$emit('changePoliceSituationTimeType', type) this.$emit('policeSituationChange') }, // 实时历史选择 historyTabClick (type) { this.historytype = type this.currentWeekTime = new Date() if (type == 0) { this.getAnswerPolices() } else { this.getAlarmList(type, this.dateFormat(this.currentWeekTime)) } this.$emit('changePoliceSituationHistoryType', type) this.$emit('policeSituationChange') }, selectPoliceSituatiionArr (name) { if (name == '全部') { this.policeSituationRealtimeArr = realtimeArr this.policeSituationHistoryArr = historyArr this.timeTabClick(this.timetype) } else { let realtimeNewArr = [] let historyNewArr = [] realtimeArr.forEach(item => { if (item.policeName == name) { realtimeNewArr.push(item) } }) this.policeSituationRealtimeArr = realtimeNewArr historyArr.forEach(item => { if (item.policeName == name) { historyNewArr.push(item) } }) this.policeSituationHistorySaveArr = historyNewArr this.policeSituationHistoryArr = historyNewArr this.timeTabClick(this.timetype) chooseWeekTimeDate () { return this.policeSituationHistoryArr }, chooseMouthTimeDate () { return this.policeSituationHistoryArr }, // 列表行选择 handleSelectClick (e) { let element for (let i = 0; i < e.path.length; i++) { if (e.path[i].className == "row") { element = e.path[i] break } } let currentItem = JSON.parse(element.dataset.obj) this.policeSituationClick(currentItem) }, chooseWeekTimeDate (arr) { let lastWeekArr = [] let realtimeTimeStamp = new Date().valueOf() - 24 * 60 * 60 * 1000 let lastWeekTimeStamp = new Date().valueOf() - 7 * 24 * 60 * 60 * 1000 arr.forEach(item => { if (new Date(item.dealTime).valueOf() < realtimeTimeStamp && new Date(item.dealTime).valueOf() > lastWeekTimeStamp) { lastWeekArr.push(item) } }) return lastWeekArr }, chooseMouthTimeDate (arr) { let lastMouthArr = [] let realtimeTimeStamp = new Date().valueOf() - 24 * 60 * 60 * 1000 let lastMouthTimeStamp = new Date().valueOf() - 30 * 24 * 60 * 60 * 1000 arr.forEach(item => { if (new Date(item.dealTime).valueOf() < realtimeTimeStamp && new Date(item.dealTime).valueOf() > lastMouthTimeStamp) { lastMouthArr.push(item) } }) return lastMouthArr }, // 点击定位或者显示弹窗 policeSituationClick (item) { if (item.position) { if (item.ZDDWXZB && item.ZDDWXZB != 0 && item.ZDDWYZB && item.ZDDWYZB != 0) { this.$EventBus.$emit('toPosition', { layerName: 'policeSituationyLayers', siteJd: Number(item.position[0]), siteWd: Number(item.position[1]) siteJd: Number(item.ZDDWXZB), siteWd: Number(item.ZDDWYZB) }) this.$store.commit('SET_DETAILSPOPUP', 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.position[0]), Number(item.position[1]), Number(item.ZDDWXZB), Number(item.ZDDWYZB), 0 ) ) @@ -195,20 +368,7 @@ } else { this.$emit('policeSituationSiteClick', item) } }, handleSelectClick (e) { let e1 for (let i = 0; i < e.path.length; i++) { if (e.path[i].className == "row") { e1 = e.path[i] break } } let item = JSON.parse(e1.dataset.obj) this.policeSituationClick(item) } } } </script> @@ -218,55 +378,42 @@ 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: 36px; .bottom-title::before { content: ''; top: 0; left: 0; position: absolute; width: 0px; height: 0px; border: 18px solid #3366e2; border-bottom-color: transparent; border-left-color: transparent; transform: translate(-100%, 0); } height: 56px; .bottom-title { margin: 0 auto; position: absolute; left: 0; right: 0; width: 26%; height: 36px; line-height: 36px; top: 0; left: 18px; height: 56px; line-height: 56px; color: #fff; text-align: center; background: #3366e2; } .bottom-title::after { content: ''; top: 0; right: 0; position: absolute; width: 0px; height: 0px; border: 18px solid #3366e2; border-bottom-color: transparent; border-right-color: transparent; transform: translate(100%, 0); font-size: 16px; font-weight: bold; font-style: oblique; letter-spacing: 2px; } .timeTab { position: absolute; top: 10px; right: 10px; top: 22px; right: 400px; display: flex; border-radius: 6px; overflow: hidden; @@ -276,11 +423,11 @@ height: 26px; text-align: center; line-height: 26px; background: rgb(1, 76, 137); background: $sub-tab-bg-color; } .beforetime { color: rgb(98, 95, 95); color: #99cccc; cursor: pointer; } @@ -288,23 +435,33 @@ color: #fff; } } .timeSeclect { width: 250px; height: 30px; position: absolute; top: 12px; right: 130px; } .history-tab { position: absolute; top: 10px; left: 10px; top: 22px; right: 12px; display: flex; border-radius: 6px; overflow: hidden; span { padding: 0 10px; height: 26px; text-align: center; line-height: 26px; background: rgb(1, 76, 137); background: $sub-tab-bg-color; } .beforetime { color: rgb(98, 95, 95); color: #99cccc; cursor: pointer; } @@ -315,9 +472,18 @@ } .body { margin: 10px; width: calc(100% - 20px); height: calc(100% - 56px); 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 { @@ -327,6 +493,12 @@ height: calc(100% - 44px); } .warp.no-data { display: flex; align-items: center; justify-content: center; } ul { li { height: 44px; @@ -334,53 +506,73 @@ display: flex; cursor: pointer; span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .num { width: 6%; } .receiving-alarm-unit { width: 12%; } .receiving-alarm-people { width: 8%; } .type { .receiving-alarm-time { width: 10%; } .state { .call-people { width: 8%; } .comingPhone { width: 14%; } .dealTime { width: 14%; } .dealPolice { .call-phone { width: 8%; } .callPeople { .call-police-content { width: 12%; } .incident-site { width: 12%; } .call-police-type { width: 8%; } .callPhone { width: 14%; } .callContent { .alarm-bz { flex: 1; } } li:nth-child(2n) { background: rgba(20, 50, 123, 1); background: $table-body-tr-2n-color; color: #fff !important; } li:nth-child(2n-1) { background: rgba(29, 38, 105, 1); background: $table-body-tr-n-color; color: #fff; } } } .border-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } } </style>
