| | |
| | | <el-form ref="condition" :model="form" label-width="100px"> |
| | | <el-form-item :label=item.label :key=item.id v-for="item in headerList" :prop="item.prop"> |
| | | <el-input v-if="item.type === 'input'" v-model="form[item.prop]" :placeholder="item.placeholder"></el-input> |
| | | <el-cascader v-if="item.type === 'cascader'" :options="item.options" :props="{ value: 'id', label: 'regionName' }" |
| | | v-model="form[item.prop]" :placeholder="item.placeholder"></el-cascader> |
| | | <el-cascader v-if="item.type === 'cascader'" :options="item.options" |
| | | :props="{ value: 'id', label: 'regionName' }" v-model="form[item.prop]" |
| | | :placeholder="item.placeholder"></el-cascader> |
| | | <el-select v-if="item.type === 'select'" v-model="form[item.prop]" :placeholder="item.placeholder"> |
| | | <el-option v-for="option in item.options" :value="option.id" :key="option.id" :label="option.name"></el-option> |
| | | <el-option v-for="option in item.options" :value="option.id" :key="option.id" |
| | | :label="option.name"></el-option> |
| | | </el-select> |
| | | <el-date-picker v-if="item.type === 'timepick'" type="datetimerange" v-model="form[item.prop]" start-placeholder="开始日期" |
| | | end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" |
| | | ></el-date-picker> |
| | | <el-date-picker v-if="item.type === 'timepick'" type="datetimerange" v-model="form[item.prop]" |
| | | start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> |
| | | </el-form-item> |
| | | </el-form> |
| | | </div> |
| | |
| | | <!-- 按钮区域 --> |
| | | <div class="main-btns"> |
| | | <div class="main-btns-left"> |
| | | <el-button icon="el-icon-download">下载图片</el-button> |
| | | <!-- <el-button icon="el-icon-download">下载图片</el-button>--> |
| | | <el-button icon="el-icon-folder" @click="exportTableData">导出</el-button> |
| | | </div> |
| | | <div class="main-btns-right"> |
| | |
| | | </div> |
| | | <!-- 数据展示 --> |
| | | <el-table ref="multipleTable" |
| | | :header-cell-style="{ background: '#06122c', 'font-size': '12px', color: '#4b9bb7', 'font-weight': '650', 'line-height': '45px' }" |
| | | :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> |
| | | :header-cell-style="{ 'font-weight': '650', 'line-height': '45px' }" |
| | | :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> |
| | | <el-table-column type="selection" min-width="5"> |
| | | </el-table-column> |
| | | <el-table-column prop="code" label="事件编号" min-width="10"> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | <div class="tools"> |
| | | <div class="funs"> |
| | | <!-- <div class="funsItem"> |
| | | <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox> |
| | | </div> |
| | | <div class="funsItem"> |
| | | <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox> |
| | | </div> |
| | | <div class="funsItem"> |
| | | <el-select v-model="myIdx" placeholder="批量操作" @change="selectChange"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" |
| | | :value="item.value" :disabled="item.disabled"> |
| | | </el-option> |
| | | </el-select> |
| | | </div> --> |
| | | </div> |
| | | <div class="pagination"> |
| | | <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum" |
| | | :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev" @next-click="handleNext"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | | </main> |
| | | <footer> |
| | | <!-- 查看具体信息 --> |
| | |
| | | |
| | | // 获取组织列表 |
| | | department.getDepartmentList() |
| | | .then(res => { |
| | | this.headerList[0].options = res; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | .then(res => { |
| | | this.headerList[0].options = res; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | |
| | | getVideoPoint({ current: 1, size: 100 }) |
| | | .then(({ records }) => { |
| | | this.headerList[4].options = records; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | .then(({ records }) => { |
| | | this.headerList[4].options = records; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | }, |
| | | |
| | | data() { |
| | |
| | | info: null, |
| | | currentPage: 1, |
| | | pageSize: 10, |
| | | totalNum: null, |
| | | headerList: [ |
| | | { |
| | | id: 1, |
| | |
| | | methods: { |
| | | getTableData(params) { |
| | | basecase.getViolationList({ current: this.currentPage, pageSize: this.pageSize, ...params }) |
| | | .then(({ records }) => { |
| | | this.tableData = records; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | .then(({ records, total }) => { |
| | | this.tableData = records; |
| | | this.totalNum = total; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | }, |
| | | |
| | | searchTableData() { |
| | |
| | | this.info = data |
| | | this.dialogView = true |
| | | }, |
| | | |
| | | // 当前页改变触发事件 |
| | | changeCurrentPage(page) { |
| | | const { alarmTime, organization } = this.form; |
| | | const [startTime, endTime] = alarmTime ?? [null, null]; |
| | | const [communityId, streetId] = organization ?? [null, null]; |
| | | const params = Object.assign({}, this.form); |
| | | delete params.alarmTime; |
| | | delete params.organization; |
| | | this.currentPage = page; |
| | | this.getTableData({ startTime, streetId, communityId, endTime, ...params }); |
| | | }, |
| | | // 上一页点击事件 |
| | | handlePrev(page) { |
| | | const { alarmTime, organization } = this.form; |
| | | const [startTime, endTime] = alarmTime ?? [null, null]; |
| | | const [communityId, streetId] = organization ?? [null, null]; |
| | | const params = Object.assign({}, this.form); |
| | | delete params.alarmTime; |
| | | delete params.organization; |
| | | this.currentPage = page; |
| | | this.getTableData({ startTime, streetId, communityId, endTime, ...params }); |
| | | }, |
| | | // 下一页点击事件 |
| | | handleNext(page) { |
| | | const { alarmTime, organization } = this.form; |
| | | const [startTime, endTime] = alarmTime ?? [null, null]; |
| | | const [communityId, streetId] = organization ?? [null, null]; |
| | | const params = Object.assign({}, this.form); |
| | | delete params.alarmTime; |
| | | delete params.organization; |
| | | this.currentPage = page; |
| | | this.getTableData({ startTime, streetId, communityId, endTime, ...params }); |
| | | }, |
| | | exportTableData() { |
| | | basecase.exportViolationData({ current: 1 }) |
| | | .then(() => { |
| | | .then((res) => { |
| | | console.log(res) |
| | | this.$message.success('操作成功'); |
| | | // let res = basecase.exportUserOperationLogAjax({ |
| | | // startLogTime: transDate(this.searchQuery.date[0], "YYYY-MM-DD"), |
| | | // endLogTime: transDate(this.searchQuery.date[1], "YYYY-MM-DD"), |
| | | // systemName: this.searchQuery.systemName, |
| | | // userName: this.searchQuery.user, |
| | | // }).then((res)=>{ |
| | | // console.log(res) |
| | | // }); |
| | | |
| | | let time = new Date() |
| | | let deathdate =time.toLocaleDateString() |
| | | const blob = new Blob([res.data], { |
| | | type: "application/vnd.ms-excel;charset=utf-8", |
| | | }); |
| | | if (window.navigator.msSaveBlob) { |
| | | window.navigator.msSaveBlob(blob, deathdate+"违规数据" + ".xlsx"); |
| | | } else { |
| | | const url = window.URL.createObjectURL(blob); |
| | | const link = document.createElement("a"); |
| | | link.style.display = "none"; |
| | | link.href = url; |
| | | link.download = deathdate+"违规数据" + ".xlsx"; |
| | | document.body.appendChild(link); |
| | | link.click(); |
| | | document.body.removeChild(link); |
| | | } |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | } |
| | |
| | | color: #4b9bb7; |
| | | |
| | | header { |
| | | background-color: #09152f; |
| | | background-color: white; |
| | | |
| | | .headerContent { |
| | | padding: 20px 40px; |
| | |
| | | } |
| | | |
| | | main { |
| | | background-color: #09152f; |
| | | background-color: #ffffff; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | |
| | |
| | | padding: 0 20px; |
| | | |
| | | .el-button { |
| | | background-color: #17324c; |
| | | background-color: #2f91ec; |
| | | border: 1px solid #17324c; |
| | | color: #4b9bb7; |
| | | color: #ffffff; |
| | | } |
| | | } |
| | | .el-table{ |
| | | color: #4b9bb7; |
| | | |
| | | .el-table { |
| | | // color: #4b9bb7; |
| | | } |
| | | |
| | | .tools { |
| | | display: flex; |
| | | justify-content: space-between; |
| | |
| | | |
| | | &::v-deep .el-input__inner { |
| | | border: none; |
| | | background-color: #09152f; |
| | | }}}}}} |
| | | </style> |
| | | // background-color: #09152f; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </style> |