| | |
| | | <template> |
| | | <div class="monitorHz"> |
| | | <el-card class="search-panel" style="background: #07325b;"> |
| | | <el-form ref="form" :model="form" label-width="80px" class="search-form"> |
| | | <el-form-item label="载具号:"> |
| | | <el-input v-model="form.name" placeholder="在此输入载具号"></el-input> |
| | | </el-form-item> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="4"> |
| | | <el-row> |
| | | <el-form-item label="时间:"> |
| | | <el-date-picker |
| | | v-model="form.name" |
| | | type="date" |
| | | style="width: 118px;" |
| | | placeholder="选择日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | <el-row> |
| | | <el-form-item> |
| | | <el-date-picker |
| | | v-model="form.name" |
| | | type="date" |
| | | style="width: 118px;" |
| | | placeholder="选择日期" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | </el-col> |
| | | <el-col :span="2"> |
| | | <div class="B-TMD-inp-button" @click="handleSearch"></div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-card> |
| | | <el-card class="search-result" style="height:360px;"> |
| | | <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="2" style="padding-left: 15px"> |
| | | {{ index+1 }}、 |
| | | </el-col> |
| | | <el-col :span="15" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"> |
| | | {{ item.processorName }} |
| | | <br/> |
| | | {{ item.startAddress }} |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <a class="el-icon-location" style="font-size: 18px;margin-left:5px" |
| | | @click="handleLocation(item.dispatchNo,item.vno,item.eid,item.lng,item.lat)"></a> |
| | | <a class="el-icon-connection" style="font-size: 18px;margin-left:5px"></a> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </el-card> |
| | | <el-card class="footer-page" v-if="total > 10"> |
| | | <el-pagination |
| | | small |
| | | :current-page.sync="currentPage1" |
| | | @current-change="handleSearch" |
| | | :page-size="10" |
| | | layout="prev, pager, next" |
| | | :total="1000" |
| | | class="warnPagination" |
| | | > |
| | | </el-pagination> |
| | | </el-card> |
| | | </div> |
| | | <div class="monitorHz"> |
| | | <el-card class="search-panel" style="background: #07325b;"> |
| | | <el-form ref="form" :model="form" label-width="80px" class="search-form"> |
| | | <el-form-item label="载具号:"> |
| | | <el-input v-model="form.name" placeholder="在此输入载具号"></el-input> |
| | | </el-form-item> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="4"> |
| | | <el-row> |
| | | <el-form-item label="时间:"> |
| | | <el-date-picker |
| | | v-model="form.name" |
| | | type="date" |
| | | style="width: 118px;" |
| | | placeholder="选择日期"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | <el-row> |
| | | <el-form-item> |
| | | <el-date-picker |
| | | v-model="form.name" |
| | | type="date" |
| | | style="width: 118px;" |
| | | placeholder="选择日期" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | </el-row> |
| | | </el-col> |
| | | <el-col :span="2"> |
| | | <div class="B-TMD-inp-button" @click="handleSearch"></div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </el-card> |
| | | <el-card class="search-result" style="height:360px;"> |
| | | <div class="B-TMD-table-list" v-for="(item,index) in list" :key="index"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="2" style="padding-left: 15px"> |
| | | {{ index + 1 }}、 |
| | | </el-col> |
| | | <el-col :span="15" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"> |
| | | {{ item.processorName }} |
| | | <br/> |
| | | {{ item.startAddress }} |
| | | </el-col> |
| | | <el-col :span="6"> |
| | | <a class="el-icon-location" style="font-size: 18px;margin-left:5px" |
| | | @click="handleLocation(item.dispatchNo,item.vno,item.eid,item.lng,item.lat)"></a> |
| | | <a class="el-icon-connection" style="font-size: 18px;margin-left:5px"></a> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </el-card> |
| | | <el-card class="footer-page" v-if="total > 10"> |
| | | <el-pagination |
| | | small |
| | | :current-page.sync="currentPage1" |
| | | @current-change="handleSearch" |
| | | :page-size="10" |
| | | layout="prev, pager, next" |
| | | :total="1000" |
| | | class="warnPagination" |
| | | > |
| | | </el-pagination> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: 'MonitorAreaTips', |
| | | components: {}, |
| | | data() { |
| | | return { |
| | | isPanelVisible: false, |
| | | total: 0, |
| | | list: [], |
| | | form: { |
| | | name: '', |
| | | region: '', |
| | | date1: '', |
| | | date2: '', |
| | | delivery: false, |
| | | type: [], |
| | | resource: '', |
| | | desc: '' |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | handleClose(done) { |
| | | console.log(done) |
| | | }, |
| | | handleClick(tab, event) { |
| | | console.log(tab, event) |
| | | }, |
| | | handleSearch() { |
| | | |
| | | } |
| | | }, |
| | | mounted() { |
| | | this.handleSearch() |
| | | } |
| | | export default { |
| | | name: 'MonitorAreaTips', |
| | | components: {}, |
| | | data () { |
| | | return { |
| | | isPanelVisible: false, |
| | | total: 0, |
| | | list: [], |
| | | form: { |
| | | name: '', |
| | | region: '', |
| | | date1: '', |
| | | date2: '', |
| | | delivery: false, |
| | | type: [], |
| | | resource: '', |
| | | desc: '' |
| | | } |
| | | } |
| | | }, |
| | | methods: { |
| | | handleClose (done) { |
| | | console.log(done) |
| | | }, |
| | | handleClick (tab, event) { |
| | | console.log(tab, event) |
| | | }, |
| | | handleSearch () { |
| | | |
| | | } |
| | | }, |
| | | mounted () { |
| | | this.handleSearch() |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | | .monitorHz { |
| | | .el-message-box__content { |
| | | background-color: #030D2E; |
| | | } |
| | | .monitorHz { |
| | | .el-message-box__content { |
| | | background-color: #030D2E; |
| | | } |
| | | |
| | | .search-form .el-form-item { |
| | | margin: 0px; |
| | | } |
| | | .search-form .el-form-item { |
| | | margin: 0px; |
| | | } |
| | | |
| | | .search-form .el-icon-search { |
| | | display: grid; |
| | | line-height: 30px; |
| | | font-size: 18px; |
| | | } |
| | | .search-form .el-icon-search { |
| | | display: grid; |
| | | line-height: 30px; |
| | | font-size: 18px; |
| | | } |
| | | |
| | | .search-panel { |
| | | border: #07325B; |
| | | background-color: #07325B; |
| | | } |
| | | .search-panel { |
| | | border: #07325B; |
| | | background-color: #07325B; |
| | | } |
| | | |
| | | .search-result { |
| | | margin: 5px 0px 0px 0px; |
| | | padding: 0px; |
| | | border: #051842; |
| | | overflow-y: scroll; |
| | | background-color: #051842; |
| | | } |
| | | .search-result { |
| | | margin: 5px 0px 0px 0px; |
| | | padding: 0px; |
| | | border: #051842; |
| | | overflow-y: scroll; |
| | | background-color: #051842; |
| | | } |
| | | |
| | | .B-TMD-table-list { |
| | | margin-top: 10px; |
| | | text-align: left; |
| | | padding-left: 10px; |
| | | color: #328EB5; |
| | | width: 100%; |
| | | line-height: 25px; |
| | | background-color: #0B3B6D; |
| | | } |
| | | .B-TMD-table-list { |
| | | margin-top: 10px; |
| | | text-align: left; |
| | | padding-left: 10px; |
| | | color: #328EB5; |
| | | width: 100%; |
| | | line-height: 25px; |
| | | background-color: #0B3B6D; |
| | | } |
| | | |
| | | .footer-page { |
| | | position: absolute; |
| | | bottom: 5px; |
| | | } |
| | | } |
| | | .footer-page { |
| | | position: absolute; |
| | | bottom: 5px; |
| | | } |
| | | } |
| | | </style> |