From 08e2db5b94d878189f5377fc5ed0f7bd4b2bb19e Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 03 Feb 2023 15:26:46 +0800
Subject: [PATCH] 接口及首页数据联动调整
---
src/views/home/components/bottomContainer.vue | 250 +++++++++++++------------------------------------
1 files changed, 67 insertions(+), 183 deletions(-)
diff --git a/src/views/home/components/bottomContainer.vue b/src/views/home/components/bottomContainer.vue
index 13a001f..952fffe 100644
--- a/src/views/home/components/bottomContainer.vue
+++ b/src/views/home/components/bottomContainer.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-01-13 15:52:59
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2023-02-01 16:57:05
+ * @LastEditTime: 2023-02-03 15:18:05
* @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue
* @Description:
*
@@ -14,81 +14,34 @@
<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 == 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 == 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>
+ <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>
<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>
- <div
- class="body"
- v-if="historytype == 0"
- ref="tableBox"
- @click="handleSelectClick($event)"
- >
+ <div class="body" v-if="historytype == 0" ref="tableBox" @click="handleSelectClick($event)">
<ul class="title-header">
<li>
<span class="num">序号</span>
@@ -104,27 +57,16 @@
</li>
</ul>
- <vue-seamless-scroll
- v-if="policeSituationRealtimeArr.length > 0"
- :data="policeSituationRealtimeArr"
- class="warp"
- :class-option="classOption"
- >
+ <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr"
+ class="warp" :class-option="classOption">
<ul class="item">
- <li
- v-for="(item, index) in policeSituationRealtimeArr"
- :key="index"
- :data-obj="JSON.stringify(item)"
- class="row"
- >
+ <li v-for="(item, index) in policeSituationRealtimeArr" :key="index"
+ :data-obj="JSON.stringify(item)" class="row">
<span class="num" v-text="item.index"></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"
- :title="item.BJSJ"
- v-text="item.BJSJ.substring(0, 10)"
- ></span>
+ <span class="receiving-alarm-time" :title="item.BJSJ"
+ v-text="item.BJSJ.substring(0, 10)"></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>
@@ -139,133 +81,67 @@
</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="rowClick"
- >
- <el-table-column
- :show-overflow-tooltip="true"
- prop="index"
- label="序号"
- min-width="6%"
- ></el-table-column>
- <el-table-column
- :show-overflow-tooltip="true"
- prop="JJDWMC"
- label="接警单位"
- min-width="12.6%"
- ></el-table-column>
- <el-table-column
- :show-overflow-tooltip="true"
- prop="JJYXM"
- label="接警员"
- min-width="7.6%"
- ></el-table-column>
+ :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
+ <el-table-column :show-overflow-tooltip="true" prop="index" label="序号"
+ min-width="6%"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位"
+ min-width="12.6%"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" prop="JJYXM" label="接警员"
+ min-width="7.6%"></el-table-column>
<el-table-column label="报警时间" min-width="9.6%">
<template slot-scope="scope">
<span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
</template>
</el-table-column>
- <el-table-column
- :show-overflow-tooltip="true"
- prop="BJRXM"
- label="报警人"
- min-width="7.6%"
- ></el-table-column>
- <el-table-column
- :show-overflow-tooltip="true"
- prop="LXDH"
- label="联系电话"
- min-width="10%"
- ></el-table-column>
- <el-table-column
- :show-overflow-tooltip="true"
- prop="BJNR"
- label="报警内容"
- min-width="12%"
- ></el-table-column>
- <el-table-column
- :show-overflow-tooltip="true"
- prop="SFDZ"
- label="事发地址"
- min-width="12%"
- ></el-table-column>
- <el-table-column
- :show-overflow-tooltip="true"
- prop="BJLX"
- label="报警类型"
- min-width="8%"
- ></el-table-column>
- <el-table-column
- :show-overflow-tooltip="true"
- prop="MEMO"
- label="备注"
- min-width="12%"
- ></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" prop="BJRXM" label="报警人"
+ min-width="7.6%"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" prop="LXDH" label="联系电话"
+ min-width="10%"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容"
+ min-width="12%"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址"
+ min-width="12%"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型"
+ min-width="8%"></el-table-column>
+ <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注"
+ min-width="12%"></el-table-column>
</el-table>
<div class="pages" 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>
+ <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,0
+ <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"
- />
+ c0-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,0
+ <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"
- />
+ c0-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 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>
@@ -332,6 +208,7 @@
currentPage: 1,
// table高度
currentTableHeight: 0,
+ policeStaionID: ''
}
},
@@ -340,7 +217,7 @@
},
created () {
- this.getAnswerPolices()
+ this.getHomeAllData()
this.defaultDate()
@@ -354,10 +231,7 @@
}
}
-
-
window.addEventListener('resize', this.setTableHeight)
-
},
mounted () {
@@ -367,6 +241,16 @@
},
methods: {
+ /**
+ * @description: 获取当前组件内所有数据
+ * @return {*}
+ */
+ getHomeAllData (id = '') {
+ this.policeStaionID = id
+
+ this.getAnswerPolices()
+ },
+
// 获取table高度
setTableHeight () {
this.$nextTick(() => {
@@ -434,7 +318,7 @@
// 获取实时接警记录
getAnswerPolices () {
- getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => {
+ getAnswerPolices({ deptId: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
this.policeSituationRealtimeArr = []
if (res.data.result.length > 0) {
@@ -535,7 +419,7 @@
// 获取历史接警记录
getAlarmList (params) {
- getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.userInfo.dept_id }).then(res => {
+ getAlarmList({ ...params, size: this.pagesize, jjdwbh: this.policeStaionID != '' ? this.policeStaionID : this.userInfo.dept_id }).then(res => {
this.pagesCount = res.data.data.pages
this.policeSituationHistoryArr = []
--
Gitblit v1.9.3