| src/api/home/index.js | ●●●●● patch | view | raw | blame | history | |
| src/components/map/components/mapPopup.vue | ●●●●● patch | view | raw | blame | history | |
| src/styles/media/index.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/home/components/bottomContainer.vue | ●●●●● patch | view | raw | blame | history |
src/api/home/index.js
@@ -2,7 +2,7 @@ * @Author: shuishen 1109946754@qq.com * @Date: 2022-12-27 14:19:19 * @LastEditors: shuishen 1109946754@qq.com * @LastEditTime: 2023-01-03 16:02:57 * @LastEditTime: 2023-01-05 15:16:20 * @FilePath: \srs-police-affairs\src\api\home\index.js * @Description: * @@ -28,6 +28,13 @@ }) } export const getAnswerPolices = () => { return request({ url: `/api/doorplate/doorplate/acceptAlarmList`, method: 'get', params: {} }) } export const getCallPolices = () => { return request({ src/components/map/components/mapPopup.vue
@@ -1,71 +1,73 @@ <template> <div> <div v-if="detailsPopup" id="divFormsDomBox" class="container"> <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox"> <div class="box"> <div class="divForms divForms-theme"> <div class="divForms-wrap"> <div class="area"> <div class="arrow-lt"></div> <div class="b-t"></div> <div class="b-r"></div> <div class="b-b"></div> <div class="b-l"></div> <div class="arrow-rb"></div> <div class="label-wrap"> <div class="title"> 详细信息 <div class="close" @click="closePopup" title="关闭"></div> <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox"> <div style="width: 100%; height: 100%; transform: translate(0, 50%);"> <div class="divForms divForms-theme"> <div class="divForms-wrap"> <div class="area"> <div class="arrow-lt"></div> <div class="b-t"></div> <div class="b-r"></div> <div class="b-b"></div> <div class="b-l"></div> <div class="arrow-rb"></div> <div class="label-wrap"> <div class="title"> 详细信息 <div class="close" @click="closePopup" title="关闭"></div> </div> <div class="change-btn"> <div class="on">接警信息</div> <div>出警信息</div> </div> <div class="label-content"> <div class="item"> <div>警情类别:</div> <div>{{ dataPopup.type }}</div> </div> <div class="label-content"> <div class="item"> <div>警情类别:</div> <div>{{dataPopup.type}}</div> </div> <div class="item"> <div>接警时间:</div> <div>{{dataPopup.dealTime}}</div> </div> <div class="item"> <div>警情状态:</div> <div>{{dataPopup.state}}</div> </div> <div class="item"> <div>经办民警:</div> <div>{{dataPopup.dealPolice}}</div> </div> <div class="item"> <div>报警人:</div> <div>{{dataPopup.callPeople}}</div> </div> <div class="item"> <div>报警电话:</div> <div>{{dataPopup.comingPhone}}</div> </div> <div class="item"> <div>报警人联系人:</div> <div>{{dataPopup.callPhone}}</div> </div> <div class="item"> <div>所属派出所:</div> <div>{{dataPopup.policeName}}</div> </div> <div class="item"> <div>经度:</div> <div>{{ dataPopup.position[0] }}</div> </div> <div class="item"> <div>纬度:</div> <div>{{ dataPopup.position[1] }}</div> </div> <div class="item"> <div>接警时间:</div> <div>{{ dataPopup.dealTime }}</div> </div> <div class="item"> <div>警情状态:</div> <div>{{ dataPopup.state }}</div> </div> <div class="item"> <div>经办民警:</div> <div>{{ dataPopup.dealPolice }}</div> </div> <div class="item"> <div>报警人:</div> <div>{{ dataPopup.callPeople }}</div> </div> <div class="item"> <div>报警电话:</div> <div>{{ dataPopup.comingPhone }}</div> </div> <div class="item"> <div>报警人联系人:</div> <div>{{ dataPopup.callPhone }}</div> </div> <div class="item"> <div>所属派出所:</div> <div>{{ dataPopup.policeName }}</div> </div> <div class="item"> <div>经度:</div> <div>{{ dataPopup.position[0] }}</div> </div> <div class="item"> <div>纬度:</div> <div>{{ dataPopup.position[1] }}</div> </div> </div> </div> <div class="b-t-l"></div> <div class="b-b-r"></div> </div> <div class="arrow"></div> <div class="b-t-l"></div> <div class="b-b-r"></div> </div> <div class="arrow"></div> </div> </div> </div> @@ -91,222 +93,209 @@ </script> <style lang="scss" scoped> .container { .divForms-dom { position: fixed; left: 0; z-index: 1 !important; width: 280px; height: 360px; // background: $bg-color; } .divForms .arrow { position: absolute; bottom: 50%; left: -8px; width: 45px; height: 2px; transform: rotate(-45deg); background-color: #28bbf0; } .divForms-theme .area { background-image: linear-gradient(135deg, transparent 30px, #1831a79a 30px, #3f487ba6 50%, transparent 50%), linear-gradient(-45deg, transparent 30px, #1831a79a 30px, #3f487ba6 50.1%, transparent 50%); } .divForms .area { position: relative; min-width: 420px; } .divForms-wrap { position: relative; overflow: hidden; padding: 30px; } .divForms-theme .b-b, .divForms-theme .b-b-r, .divForms-theme .b-l, .divForms-theme .b-r, .divForms-theme .b-t, .divForms-theme .b-t-l { background-color: #1831a7; box-shadow: 0 0 10px 2px #1831a7; } .divForms .b-t { position: absolute; top: 0; left: 44px; right: 0; height: 1px; z-index: 10; } .divForms .b-r { position: absolute; top: 0; right: 0; bottom: 44px; width: 1px; z-index: 10; } .divForms .b-l { position: absolute; top: 44px; left: 0; bottom: 0; width: 1px; z-index: 10; } .divForms .b-b { position: absolute; left: 0; right: 44px; bottom: 0; height: 1px; z-index: 10; } .divForms .b-b-r { position: absolute; bottom: 0; right: 0; width: 1px; height: 62px; transform: rotate(45deg) translate(-52px, 22px); z-index: 10; } .divForms .b-t-l { position: absolute; top: 0; left: 0; width: 1px; height: 62px; transform: rotate(45deg) translate(52px, -22px); z-index: 10; } .divForms .label-wrap { padding: 0 12px; color: #fff; display: flex; flex-direction: row; flex-wrap: wrap; justify-self: flex-start; align-content: flex-start; .title { height: 40px; line-height: 42px; width: 100%; position: relative; background-image: linear-gradient( 135deg, transparent 25px, #29baf1 25px ); .close { position: absolute; right: 5px; top: -2px; } .close::before { font-family: element-icons; content: '\e6db'; cursor: pointer; font-size: 16px; } .close:hover::before { color: #3d95f3; } } .item { font-size: 16px; white-space: nowrap; overflow: hidden; .change-btn { margin-top: 6px; display: flex; flex-direction: row; width: calc(100% - 20px); height: 30px; line-height: 30px; margin: 0 10px; text-align: left; align-items: center; justify-content: space-around; & > div:first-child { width: 100px; text-align: justify; display: inline-block; text-align-last: justify; margin-right: 20px; &>div { width: 36%; height: 36px; line-height: 36px; cursor: pointer; } & > div:nth-of-type(2) { width: calc(100% - 120px); &>div.on { border-bottom: 2px solid #1831a7; } } .divForms-dom { position: fixed; left: 0; z-index: 1 !important; } .box { width: 100%; height: 100%; transform: translate(0, 25%); } .divForms .arrow { position: absolute; bottom: 40%; left: 0; width: 45px; height: 2px; transform: rotate(-45deg) translate(5px, -15px); background-color: #28bbf0; } .divForms-theme .area { background-image: linear-gradient( 135deg, transparent 30px, #1831a79a 30px, #3f487ba6 50%, transparent 50% ), linear-gradient( -45deg, transparent 30px, #1831a79a 30px, #3f487ba6 50.1%, transparent 50% ); } .divForms .area { position: relative; min-width: 320px; } .divForms-wrap { position: relative; overflow: hidden; padding: 30px; } .divForms-theme .b-b, .divForms-theme .b-b-r, .divForms-theme .b-l, .divForms-theme .b-r, .divForms-theme .b-t, .divForms-theme .b-t-l { background-color: #1831a7; box-shadow: 0 0 10px 2px #1831a7; } .divForms .b-t { position: absolute; top: 0; left: 44px; right: 0; height: 1px; z-index: 10; } .divForms .b-r { position: absolute; top: 0; right: 0; bottom: 44px; width: 1px; z-index: 10; } .divForms .b-l { position: absolute; top: 44px; left: 0; bottom: 0; width: 1px; z-index: 10; } .divForms .b-b { position: absolute; left: 0; right: 44px; bottom: 0; height: 1px; z-index: 10; } .divForms .b-b-r { position: absolute; bottom: 0; right: 0; width: 1px; height: 62px; transform: rotate(45deg) translate(-52px, 22px); z-index: 10; } .divForms .b-t-l { position: absolute; top: 0; left: 0; width: 1px; height: 62px; transform: rotate(45deg) translate(52px, -22px); z-index: 10; } .divForms .label-wrap { padding: 0 12px; color: #fff; font-size: 16px; white-space: nowrap; overflow: hidden; } .divForms-theme .title { background-image: linear-gradient( 135deg, transparent 25px, #1c309e9a 25px ); } .divForms .title { margin-top: 20px; padding: 0 12px 0 30px; height: 36px; line-height: 36px; position: relative; } .divForms .label-content { .label-content { padding: 4px 0; .item { display: flex; flex-direction: row; width: calc(100% - 20px); height: 30px; line-height: 30px; margin: 0 10px; text-align: left; &>div:first-child { width: 96px; text-align: justify; display: inline-block; text-align-last: justify; margin-right: 20px; } &>div:nth-of-type(2) { width: calc(100% - 120px); } } } .divForms-theme .arrow, .divForms-theme .title::before { background-color: #1c309e; } } .divForms .title::before { content: ''; .divForms .title { position: relative; margin-top: 20px; padding: 0 12px 0 30px; height: 36px; line-height: 36px; .close { position: absolute; bottom: -4px; left: 0; right: 0; z-index: 10; height: 2px; right: 5px; top: -2px; } .close::before { font-family: element-icons; content: '\e6db'; cursor: pointer; font-size: 16px; } .close:hover::before { color: #3d95f3; } } .divForms-theme .title { background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px); } .divForms-theme .arrow, .divForms-theme .title::before { background-color: #1c309e; } .divForms .title::before { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; z-index: 10; height: 2px; } </style> src/styles/media/index.scss
@@ -2324,137 +2324,98 @@ } #divFormsDomBox { width: countSizeVw(280, 1920); height: countSizeVh(360); .title { height: countSizeVh(40); line-height: countSizeVh(42); background-image: linear-gradient(135deg, transparent countSizeVh(25), #29baf1 countSizeVh(25)); .close { right: countSizeVh(5); top: countSizeVh(-2); .divForms { .arrow { left: countSizeVw(-8, 1920); width: countSizeVw(45, 1920); height: countSizeVh(2); transform: rotate(-45deg); } .close::before { .area { min-width: countSizeVw(420, 1920); } .b-t { left: countSizeVh(44); height: countSizeVh(1); } .b-r { bottom: countSizeVh(44); width: countSizeVh(1); } .b-l { top: countSizeVh(44); width: countSizeVh(1); } .b-b { right: countSizeVh(44); height: countSizeVh(1); } .b-b-r { width: countSizeVh(1); height: countSizeVh(62); transform: rotate(45deg) translate(countSizeVw(-52, 1920), countSizeVh(22)); } .b-t-l { width: countSizeVh(1); height: countSizeVh(62); transform: rotate(45deg) translate(countSizeVw(52, 1920), countSizeVh(-22)); } .label-content { padding: countSizeVh(4) 0; } .label-wrap { padding: 0 countSizeVw(12, 1920); font-size: countSizeVh(16); } } .item { width: calc(100% - 20px); height: countSizeVh(30); line-height: countSizeVh(30); margin: 0 countSizeVw(10, 1920); .title { margin-top: countSizeVh(20); padding: 0 countSizeVw(12, 1920) 0 countSizeVw(30, 1920); height: countSizeVh(36); line-height: countSizeVh(36); &>div:first-child { width: countSizeVw(100, 1920); margin-right: countSizeVw(20, 1920); &::before { bottom: countSizeVh(-4); height: countSizeVh(2); } .close { right: countSizeVw(5, 1920); top: countSizeVh(-2); } .close::before { font-size: countSizeVh(16); } } } &>div:nth-of-type(2) { width: calc(100% - countSizeVw(120, 1920)); } } .divForms .arrow { width: countSizeVw(24, 1920); height: countSizeVh(2); transform: rotate(-45deg) translate(countSizeVh(5), countSizeVh(-15)); } .divForms-theme .area { background-image: linear-gradient(135deg, transparent countSizeVw(30, 1920), #1831a79a countSizeVw(30, 1920), transparent countSizeVh(30), #1831a79a countSizeVh(30), #3f487ba6 50%, transparent 50%), linear-gradient(-45deg, transparent countSizeVw(30, 1920), #1831a79a countSizeVw(30, 1920), transparent countSizeVh(30), #1831a79a countSizeVh(30), #3f487ba6 50.1%, transparent 50%); } .divForms .area { // min-width: countSizeVw(320,1920); min-width: countSizeVw(260, 1920); } .divForms-wrap { padding: countSizeVh(30); } .divForms-theme .b-b, .divForms-theme .b-b-r, .divForms-theme .b-l, .divForms-theme .b-r, .divForms-theme .b-t, .divForms-theme .b-t-l { box-shadow: 0 0 countSizeVh(10) countSizeVh(2) #1831a7; } .divForms .b-t { left: countSizeVh(84); height: countSizeVh(1); } .divForms .b-r { bottom: countSizeVh(84); width: countSizeVh(1); } .divForms .b-l { top: countSizeVh(84); width: countSizeVh(1); } .divForms .b-b { right: countSizeVh(84); height: countSizeVh(1); } .divForms .b-b-r { width: countSizeVw(1, 1920); height: countSizeVh(150); transform: rotate(45deg) translate(-52px, 22px); } .divForms .b-t-l { width: countSizeVw(1, 1920); height: countSizeVh(62); transform: rotate(45deg) translate(countSizeVw(52, 1920), countSizeVw(-22, 1920)); } .divForms .label-wrap { padding: 0 countSizeVw(12, 1920); font-size: countSizeVh(16); } .divForms-theme .title { background-image: linear-gradient(135deg, transparent countSizeVw(25, 1920), #1c309e9a countSizeVw(25, 1920)); } .divForms .title { margin-top: countSizeVh(20); padding: 0 countSizeVh(12) 0 countSizeVw(30, 1920); height: countSizeVh(36); line-height: countSizeVh(36); } .divForms .label-content { padding: countSizeVh(4) 0; } .divForms .title::before { bottom: countSizeVh(-4); height: countSizeVh(2); padding: countSizeVh(30) countSizeVw(30, 1920); } } } src/views/home/components/bottomContainer.vue
@@ -8,9 +8,17 @@ <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="结束日期" :picker-options="pickerOptions"></el-date-picker> <!-- <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="currentTime" type="week" format="yyyy 第 WW 周" :picker-options="pickerOptions" placeholder="选择周"> </el-date-picker> <el-date-picker @change="datePickerChange" v-show="timetype == 1" v-model="currentTime" type="month" :picker-options="pickerOptions" placeholder="选择月"> </el-date-picker> </div> <div class="history-tab"> <span class="beforetime" :class="{ choosed: historytype == 0 }" @@ -25,34 +33,40 @@ <ul class="title-header"> <li> <span class="num">序号</span> <span class="type">警情类别</span> <span class="dealTime">接警时间</span> <span class="state">警情状态</span> <span class="dealPolice">经办民警</span> <span class="callPeople">报警人</span> <span class="comingPhone">报警电话</span> <span class="callPhone">报警人联系人</span> <span class="callContent">报警内容</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 :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr" class="warp" :class-option="classOption"> <vue-seamless-scroll v-if="currentUseDataLength > 0" :data="listCurrentData" class="warp" :class-option="classOption"> <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> --> <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="type" v-text="item.type"></span> <span class="dealTime" v-text="item.dealTime"></span> <span class="state" v-text="item.state"></span> <span class="dealPolice" v-text="item.dealPolice"></span> <span class="callPeople" v-text="item.callPeople"></span> <span class="comingPhone" v-text="item.comingPhone"></span> <span class="callPhone" v-text="item.callPhone"></span> <span class="callContent" v-text="item.callContent"></span> <span class="receiving-alarm-unit" v-text="JJDWMC"></span> <span class="receiving-alarm-people" v-text="JJYXM"></span> <span class="receiving-alarm-time" v-text="JJSJ"></span> <span class="call-people" v-text="BJRXM"></span> <span class="call-phone" v-text="LXDH"></span> <span class="call-police-content" v-text="BJNR"></span> <span class="incident-site" v-text="SFDZ"></span> <span class="call-police-type" v-text="BJLX"></span> <span class="alarm-bz" v-text="MEMO"></span> </li> </ul> </vue-seamless-scroll> <div class="warp no-data" v-else> 暂无数据 </div> </div> </div> @@ -89,10 +103,9 @@ <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 } from "@/api/home/index.js" import { getCallPolices, getAnswerPolices } from "@/api/home/index.js" export default { data () { @@ -103,33 +116,8 @@ policeSituationHistoryArr: [], policeSituationHistorySaveArr: [], eventTime: '', 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]) } }] }, currentTime: '', pickerOptions: {}, // 日期设置对象 classOption: { step: 1 } @@ -142,12 +130,43 @@ 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.getCallPolices() setInterval(() => { console.log(this.currentTime) }, 5000) // disabledDate 为true表示不可选,false表示可选 this.pickerOptions = { disabledDate (time) { // 设置可选择的日期为今天之后的一个月内 let curDate = (new Date()).getTime() return time.getTime() > curDate } } }, mounted () { @@ -163,12 +182,44 @@ }, methods: { datePickerChange (e) { // this.timetype const dateStr = this.dateFormat(e) }, // 获取当前日期 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 }, getCallPolices () { getCallPolices().thne(res => { setTimeout(() => { console.log(res, 465464) }, 5000) }) // getCallPolices().then(res => { // res.data.result // }) // getAnswerPolices().then(res => { // this.policeSituationRealtimeArr = res.data.result // }) this.policeSituationRealtimeArr = [ { JJDW: '公安局', lat: 28, lng: 112 }, { JJDW: '派出所' }, ] }, timeTabClick (type) { @@ -186,31 +237,6 @@ this.historytype = type 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 (arr) { @@ -399,6 +425,12 @@ height: calc(100% - 44px); } .warp.no-data { display: flex; align-items: center; justify-content: center; } ul { li { height: 44px; @@ -407,38 +439,42 @@ cursor: pointer; .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; } }