| | |
| | | <template> |
| | | <TableLayout :permissions="['business:platformevent:query']"> |
| | | <!-- 搜索表单 --> |
| | | <el-form ref="searchForm" slot="search-form" :model="searchForm" label-width="100px" inline> |
| | | <el-form-item label="" prop="platformName"> |
| | | <el-input v-model="searchForm.platformName" placeholder="请输入月台名称" @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="" prop="channelName"> |
| | | <el-input v-model="searchForm.channelName" placeholder="请输入监控点名称" @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="" prop="plateNo"> |
| | | <el-input v-model="searchForm.plateNo" placeholder="请输入车牌号" @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="" prop="eventType"> |
| | | <el-select v-model="searchForm.motionStatus" placeholder="请选择进出类型"> |
| | | <el-option label="离开" value="leave"></el-option> |
| | | <el-option label="进入" value="enter"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="起止时间" prop="startDate"> |
| | | <el-date-picker |
| | | @change="seleTime" |
| | | v-model="time" |
| | | type="datetimerange" |
| | | format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" |
| | | range-separator="至" |
| | | start-placeholder="开始时间" |
| | | end-placeholder="结束时间"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-radio-group v-model="searchForm.radio" size="small" @input="changeRadio"> |
| | | <el-radio-button label="0">当天</el-radio-button> |
| | | <el-radio-button label="1">近7天</el-radio-button> |
| | | <el-radio-button label="2">近30天</el-radio-button> |
| | | </el-radio-group> |
| | | <section> |
| | | <el-button type="primary" @click="search">搜索</el-button> |
| | | <el-button @click="reset">重置</el-button> |
| | | </section> |
| | | </el-form> |
| | | <!-- 表格和分页 --> |
| | | <template v-slot:table-wrap> |
| | | <el-table |
| | | v-loading="isWorking.search" |
| | | :data="tableData.list" |
| | | stripe |
| | | > |
| | | <el-table-column prop="platformName" label="月台名称" min-width="150px"></el-table-column> |
| | | <el-table-column prop="channelName" label="监控点名称" min-width="150px"></el-table-column> |
| | | <el-table-column prop="plateNo" label="车牌号" min-width="100px"></el-table-column> |
| | | <el-table-column label="进出类型" min-width="90px"> |
| | | <template slot-scope="{row}"> |
| | | <span v-if="row.motionStatus == 'enter'">进入</span> |
| | | <span v-if="row.motionStatus == 'leave'">离开</span> |
| | | <span v-if="row.motionStatus != 'leave' && row.motionStatus != 'enter'">{{ row.motionStatus }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="前后标识" min-width="90px"> |
| | | <template slot-scope="{row}"> |
| | | <span v-if="row.stockStatus == 'rear'">车尾</span> |
| | | <span v-if="row.stockStatus == 'front'">车头</span> |
| | | <span v-if="row.stockStatus != 'rear' && row.stockStatus != 'front'">{{ row.stockStatus }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="车门状态" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <span v-if="row.vehicleDoorStatus == 'open'">开门</span> |
| | | <span v-if="row.vehicleDoorStatus == 'close'">关门</span> |
| | | <span v-if="row.vehicleDoorStatus != 'open' && row.vehicleDoorStatus != 'close'">{{ row.vehicleDoorStatus }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="srcIndex" label="设备编码" min-width="180px"></el-table-column> |
| | | <el-table-column prop="ipAddress" label="IP地址" min-width="100px"></el-table-column> |
| | | <el-table-column prop="portNo" label="端口" min-width="80px"></el-table-column> |
| | | <el-table-column fixed="right" label="抓拍图" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <el-image v-if="row.backgroundImageDown" style="width: 60px; height: 60px" :src="row.backgroundImageDown" |
| | | :preview-src-list="[row.backgroundImageDown]"> |
| | | </el-image> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="createDate" label="创建时间" min-width="160px"></el-table-column> |
| | | </el-table> |
| | | <pagination |
| | | @size-change="handleSizeChange" |
| | | @current-change="handlePageChange" |
| | | :pagination="tableData.pagination" |
| | | > |
| | | </pagination> |
| | | </template> |
| | | </TableLayout> |
| | | <TableLayout :permissions="['business:platformevent:query']"> |
| | | <!-- 搜索表单 --> |
| | | <div slot="search-form" ref="QueryFormRef"> |
| | | <el-form ref="searchForm" :model="searchForm" label-width="100px" inline> |
| | | <el-form-item label="" prop="platformName"> |
| | | <el-input v-model="searchForm.platformName" placeholder="请输入月台名称" @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="" prop="channelName"> |
| | | <el-input v-model="searchForm.channelName" placeholder="请输入监控点名称" @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="" prop="plateNo"> |
| | | <el-input v-model="searchForm.plateNo" placeholder="请输入车牌号" @keypress.enter.native="search"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="" prop="eventType"> |
| | | <el-select v-model="searchForm.motionStatus" placeholder="请选择进出类型"> |
| | | <el-option label="离开" value="leave"></el-option> |
| | | <el-option label="进入" value="enter"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="起止时间" prop="startDate"> |
| | | <el-date-picker @change="seleTime" v-model="time" type="datetimerange" format="yyyy-MM-dd HH:mm:ss" |
| | | value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-radio-group v-model="searchForm.radio" size="small" @input="changeRadio"> |
| | | <el-radio-button label="0">当天</el-radio-button> |
| | | <el-radio-button label="1">近7天</el-radio-button> |
| | | <el-radio-button label="2">近30天</el-radio-button> |
| | | </el-radio-group> |
| | | <section> |
| | | <el-button type="primary" @click="search">搜索</el-button> |
| | | <el-button @click="reset">重置</el-button> |
| | | </section> |
| | | </el-form> |
| | | </div> |
| | | |
| | | <!-- 表格和分页 --> |
| | | <template v-slot:table-wrap> |
| | | <el-table v-loading="isWorking.search" :max-height="tableHeight" :data="tableData.list" stripe> |
| | | <el-table-column prop="platformName" label="月台名称" min-width="150px"></el-table-column> |
| | | <el-table-column prop="channelName" label="监控点名称" min-width="150px"></el-table-column> |
| | | <el-table-column prop="plateNo" label="车牌号" min-width="100px"></el-table-column> |
| | | <el-table-column label="进出类型" min-width="90px"> |
| | | <template slot-scope="{row}"> |
| | | <span v-if="row.motionStatus == 'enter'">进入</span> |
| | | <span v-if="row.motionStatus == 'leave'">离开</span> |
| | | <span v-if="row.motionStatus != 'leave' && row.motionStatus != 'enter'">{{ row.motionStatus }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="前后标识" min-width="90px"> |
| | | <template slot-scope="{row}"> |
| | | <span v-if="row.stockStatus == 'rear'">车尾</span> |
| | | <span v-if="row.stockStatus == 'front'">车头</span> |
| | | <span v-if="row.stockStatus != 'rear' && row.stockStatus != 'front'">{{ row.stockStatus }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="车门状态" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <span v-if="row.vehicleDoorStatus == 'open'">开门</span> |
| | | <span v-if="row.vehicleDoorStatus == 'close'">关门</span> |
| | | <span v-if="row.vehicleDoorStatus != 'open' && row.vehicleDoorStatus != 'close'">{{ row.vehicleDoorStatus |
| | | }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="srcIndex" label="设备编码" min-width="260px"></el-table-column> |
| | | <el-table-column prop="ipAddress" label="IP地址" min-width="100px"></el-table-column> |
| | | <el-table-column prop="portNo" label="端口" min-width="80px"></el-table-column> |
| | | <el-table-column fixed="right" label="抓拍图" min-width="100px"> |
| | | <template slot-scope="{row}"> |
| | | <el-image v-if="row.backgroundImageDown" style="width: 60px; height: 60px" :src="row.backgroundImageDown" |
| | | :preview-src-list="[row.backgroundImageDown]"> |
| | | </el-image> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="createDate" label="创建时间" min-width="160px"></el-table-column> |
| | | </el-table> |
| | | <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination"> |
| | | </pagination> |
| | | </template> |
| | | </TableLayout> |
| | | </template> |
| | | |
| | | <script> |
| | |
| | | name: 'platformEvent', |
| | | extends: BaseTable, |
| | | components: { TableLayout, Pagination }, |
| | | data () { |
| | | data() { |
| | | return { |
| | | // 搜索 |
| | | searchForm: { |
| | |
| | | time: [] |
| | | } |
| | | }, |
| | | created () { |
| | | created() { |
| | | this.config({ |
| | | module: '月台车辆状态事件交互记录', |
| | | api: '/business/platformEvent', |
| | |
| | | }) |
| | | this.changeRadio('0') |
| | | }, |
| | | mounted() { |
| | | this.$nextTick(() => { |
| | | this.tableHeight = document.body.scrollHeight - this.$refs.QueryFormRef.offsetHeight - 260 |
| | | }) |
| | | }, |
| | | methods: { |
| | | changeRadio (e) { |
| | | changeRadio(e) { |
| | | if (e === '0') { |
| | | this.searchForm.startDate = timeForMat(0)[0] |
| | | this.searchForm.endDate = timeForMat(0)[1] |
| | |
| | | } |
| | | this.search() |
| | | }, |
| | | seleTime (e) { |
| | | seleTime(e) { |
| | | this.searchForm.startDate = e[0] |
| | | this.searchForm.endDate = e[1] |
| | | this.searchForm.radio = null |
| | | this.search() |
| | | }, |
| | | reset () { |
| | | reset() { |
| | | this.$refs.searchForm.resetFields() |
| | | this.searchForm.startDate = '' |
| | | this.searchForm.endDate = '' |