forked from srs-police-affairs
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 = []
