|
|
@@ -0,0 +1,374 @@
|
|
|
+<template>
|
|
|
+ <div class="maintenance-supervision">
|
|
|
+ <div class="maintenance-supervision_header">
|
|
|
+ <el-input v-model="search" placeholder="请输入建筑名"></el-input>
|
|
|
+ <el-select clearable style="width: 100px;" v-model="value" placeholder="选择警情类型">
|
|
|
+ <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select clearable style="width: 100px;" v-model="value1" placeholder="警情时段">
|
|
|
+ <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-button style="width: 100px; margin: 0;" @click="searchTab">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="row header">
|
|
|
+ <span class="time">警情类型</span>
|
|
|
+ <span class="person">地址</span>
|
|
|
+ <span class="result">主站单位</span>
|
|
|
+ <span class="result1">处置状态</span>
|
|
|
+ <span class="result2">报警时间</span>
|
|
|
+ </div>
|
|
|
+ <!-- <VueSeamlessScroll :data="list" :class-option="classOption" class="warp" hoverStop> -->
|
|
|
+ <div class="" style="height: 100vh;overflow: auto;">
|
|
|
+ <ul class="item">
|
|
|
+ <div v-for="(item, index) in czztList" :key="index">
|
|
|
+ <li class="row" @click="tab(item.id)" :class="item.id === id ? 'selected' : ''">
|
|
|
+ <span class="time" style="width: 110px;overflow: hidden;height: 40px;">{{item.zqlx}}</span>
|
|
|
+ <span class="person"
|
|
|
+ style="width: 110px;overflow: hidden;height: 40px;">{{item.ddmc}}</span>
|
|
|
+ <span class="result"
|
|
|
+ style="width: 110px;overflow: hidden;height: 40px;">{{item.sszhid }}</span>
|
|
|
+ <span class="result1"
|
|
|
+ style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.ajzt}}</span>
|
|
|
+ <span class="result2"
|
|
|
+ style="width: 110px;overflow: hidden;height: 40px;text-align: center;">{{item.lasj}}</span>
|
|
|
+ </li>
|
|
|
+ <div class="bjxxBack" v-if="item.id === id ">
|
|
|
+ <div class="bjTetx">报警电话：{{item.bjrlxdh || '-'}}</div>
|
|
|
+ <div class="bjTetx">人员被困情况：{{item.bjrsfbk ||'-'}}</div>
|
|
|
+ <div class="bjTetx">有无明火：{{item.jqJyqk || '-'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- </VueSeamlessScroll> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getBjxx
|
|
|
+ } from '@/api/jqdt.js'
|
|
|
+ export default {
|
|
|
+ name: "MaintenanceSupervision",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ value: "",
|
|
|
+ value1: "",
|
|
|
+ type: "",
|
|
|
+ search: '',
|
|
|
+ id: null,
|
|
|
+ options: [{
|
|
|
+ value: '火灾扑救',
|
|
|
+ label: '火灾扑救'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '抢险救援',
|
|
|
+ label: '抢险救援'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '反恐排爆',
|
|
|
+ label: '反恐排爆'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '公务执勤',
|
|
|
+ label: '公务执勤'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '社会救助',
|
|
|
+ label: '社会救助'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '其他出动',
|
|
|
+ label: '其他出动'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '拉动演练',
|
|
|
+ label: '拉动演练'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ options1: [{
|
|
|
+ value: '接警',
|
|
|
+ label: '接警'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '下达',
|
|
|
+ label: '下达'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '出动',
|
|
|
+ label: '出动'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '到场',
|
|
|
+ label: '到场'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '展开',
|
|
|
+ label: '展开'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '出水',
|
|
|
+ label: '出水'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '控制',
|
|
|
+ label: '控制'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '熄灭',
|
|
|
+ label: '熄灭'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '清理现场',
|
|
|
+ label: '清理现场'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '返回',
|
|
|
+ label: '返回'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '归队',
|
|
|
+ label: '归队'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '结案',
|
|
|
+ label: '结案'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '归档',
|
|
|
+ label: '归档'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '中返',
|
|
|
+ label: '中返'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '停水',
|
|
|
+ label: '停水'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '其他',
|
|
|
+ label: '其他'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ checked: 0,
|
|
|
+ newList: "",
|
|
|
+ czztList: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ // VueSeamlessScroll,
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ classOption() {
|
|
|
+ return {
|
|
|
+ singleHeight: 43,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
+ props: ['list', 'pId'],
|
|
|
+ methods: {
|
|
|
+ searchTab() {
|
|
|
+ const params = {
|
|
|
+ pageSize: 100,
|
|
|
+ pageNum: 1,
|
|
|
+ ddmc: this.search,
|
|
|
+ zqlx: this.value,
|
|
|
+ ajzt: this.value1,
|
|
|
+ type: this.type
|
|
|
+ }
|
|
|
+ getBjxx(params).then(res => {
|
|
|
+ console.log(res, '报警信息');
|
|
|
+ this.czztList = res.data.rows
|
|
|
+ })
|
|
|
+ },
|
|
|
+ tab(id) {
|
|
|
+ this.id = id;
|
|
|
+ this.$emit('callback', id);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 如果pTd存在 就选中pID
|
|
|
+ if (this.pId) {
|
|
|
+ this.tab(this.pId)
|
|
|
+ }
|
|
|
+ // 默认选中第一条
|
|
|
+ else {
|
|
|
+ this.tab(this.list[0].id)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.$route.query.type) {
|
|
|
+ this.type = Number(this.$route.query.type)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.searchTab()
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ border-radius: 3px;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: rgba(0, 213, 255, 0.3);
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(0, 213, 255, 0.3);
|
|
|
+ }
|
|
|
+ .selected {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ background: rgba(0, 194, 255, 0.14) !important;
|
|
|
+ box-shadow: 0px 0px 2px 0px #44f1ff !important;
|
|
|
+ // background: red !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ width: 120px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maintenance-supervision {
|
|
|
+
|
|
|
+ // padding: 10px 10px 0px 20px;
|
|
|
+ ::v-deep(.el-input__inner) {
|
|
|
+ border: none;
|
|
|
+ background: linear-gradient(360deg, rgba(0, 148, 255, .5) 0%, rgba(0, 148, 255, .31) 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep(.el-button) {
|
|
|
+ border: none;
|
|
|
+ background: linear-gradient(360deg, #0094ff90 0%, #0094ff10 100%);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maintenance-supervision_header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ border-bottom: 1px solid #154956;
|
|
|
+ padding-bottom: 2px;
|
|
|
+ margin-top: 15px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgb(79, 149, 186);
|
|
|
+ }
|
|
|
+
|
|
|
+ .warp {
|
|
|
+ margin: 0 auto;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ list-style: none;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header {
|
|
|
+ color: #fff;
|
|
|
+ height: 33px !important;
|
|
|
+ line-height: 33px !important;
|
|
|
+ background-color: rgba(0, 163, 255, 0.3) !important;
|
|
|
+ color: #61dbff;
|
|
|
+ margin-top: 15px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding-left: 12px;
|
|
|
+ padding-right: 70px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bjxxBack {
|
|
|
+ padding: 8px 13px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ background: url(@/assets/images/bjxxImg.png) center no-repeat;
|
|
|
+ background-size: 100% 50px;
|
|
|
+ margin-top: -10px;
|
|
|
+
|
|
|
+ .bjTetx {
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ li,
|
|
|
+ a {
|
|
|
+ height: 39px;
|
|
|
+ line-height: 39px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ display: flex;
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ background-color: #184254;
|
|
|
+ // width: 10px;
|
|
|
+ height: 30px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-button {
|
|
|
+ width: 160px;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 2px;
|
|
|
+ background: #184254;
|
|
|
+ margin: 0 20px 0 30px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.select_btn {
|
|
|
+ position: absolute;
|
|
|
+ top: 225px;
|
|
|
+ right: 320px;
|
|
|
+ //下拉框
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
|
|
+<style>
|
|
|
+ .el-select-dropdown.el-popper {
|
|
|
+ background-color: #4167a0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-popper[x-placement^=bottom] .popper__arrow::after {
|
|
|
+ border-bottom-color: #4167a0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown.el-popper {
|
|
|
+ border: 1px solid rgba(0, 213, 255, 0.6) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown.el-popper li.el-select-dropdown__item span {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown.el-popper li.el-select-dropdown__item.selected span {
|
|
|
+ color: #2f7df2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown.el-popper .el-select-dropdown__item.hover {
|
|
|
+ background-color: #2f7df2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-select-dropdown.el-popper li.el-select-dropdown__item.hover.selected span {
|
|
|
+ color: #fff !important;
|
|
|
+ }
|
|
|
+</style>
|
TwoKe945