| | |
| | | <div class="search"> |
| | | <span>来源查询:</span> |
| | | <div class="option"> |
| | | <el-select v-model="mystatus" placeholder="违规" @change="setMystatus"> |
| | | <el-option v-for="item in typeList" :key="item.label" :label="item.name" |
| | | <el-select clearable v-model="resource" placeholder="请选择来源"> |
| | | <el-option v-for="item in eventSourceOptions" :key="item.label" :label="item.label" |
| | | :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="addUser"> |
| | | <el-button class="addBtn" type="primary" @click="dialogCreate = true">添加</el-button> |
| | | <el-button class="addBtn button-addition" type="primary" @click="dialogCreate = true">添加</el-button> |
| | | <!-- 选择登记类型 --> |
| | | <el-dialog :before-close="handleClose" :visible.sync="dialogCreate" title="请选择上报事件类型" width="45%" |
| | | v-if="dialogCreate"> |
| | |
| | | <MyIll v-if="newAddType === 1" :refresh="getUserList" :mytype=newAddType |
| | | @changeDialog=changeDialog /> |
| | | <!-- 违规登记 --> |
| | | <myVio v-else :mytype=newAddType @changeDialog=changeDialog :refresh="getUserList" /> |
| | | <myVio v-else :refresh="getUserList" :mytype=newAddType @changeDialog=changeDialog /> |
| | | </el-dialog> |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | <!-- 数据展示 --> |
| | | <el-table ref="multipleTable" |
| | | :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}" |
| | | :header-cell-style="{'font-weight':'650','line-height':'45px'}" |
| | | :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" |
| | | @selection-change="tableChange"> |
| | | <el-table-column type="selection" min-width="5"> |
| | |
| | | </el-table-column> |
| | | <el-table-column prop="eventSource" label="问题来源" min-width="8"> |
| | | <template slot-scope="scope"> |
| | | <span>{{scope.row.eventSource === 2 ? '人工上报' : '视频上传'}}</span> |
| | | <span>{{scope.row.eventSource === 2 ? '人工上传' : '视频巡查'}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column :prop="mystatus === 1 ? 'category' :'category'" :label="mystatus===1 ? '大类名称' : '违建类别'" :min-width="mystatus===1?'10':'20'"> |
| | | <el-table-column :prop="mystatus === 1 ? 'category' :'category'" |
| | | :label="mystatus===1 ? '大类名称' : '违建类别'" :min-width="mystatus===1?'10':'15'"> |
| | | </el-table-column> |
| | | <el-table-column :prop="mystatus === 1 ? 'type' :'site'" :label="mystatus===1 ? '小类名称' : '违建地点'" min-width="10"> |
| | | <el-table-column :prop="mystatus === 1 ? 'type' :'site'" :label="mystatus===1 ? '小类名称' : '违建地点'" |
| | | min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column :prop="mystatus === 1 ? 'actionCause' :'communityId'" :label="mystatus===1 ? '案由' : '所属社区'" min-width="10"> |
| | | </el-table-column> |
| | | <el-table-column :prop="mystatus === 1 ? 'site' :''" :label="mystatus===1 ? '报警点位' : '违法建筑长、宽、高'" :min-width="mystatus===1?'10' :'20' "> |
| | | <el-table-column :prop="mystatus === 1 ? 'site' :''" :label="mystatus===1 ? '报警点位' : '违法建筑长、宽、高'" |
| | | :min-width="mystatus===1?'10' :'20' "> |
| | | <template slot-scope="scope"> |
| | | <div v-if="mystatus ===2"><span>{{scope.row.buildingLength+'米'+'、'+ scope.row.buildingWidth+'米'+'、'+scope.row.buildingHigh+'米'}}</span></div> |
| | | <div v-if="mystatus ===2"><span>{{scope.row.buildingLength+'米'+'、'+ |
| | | scope.row.buildingWidth+'米'+'、'+scope.row.buildingHigh+'米'}}</span></div> |
| | | <div v-else>{{scope.row.site}}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column :prop="mystatus === 1 ? 'street' :'buildingArea'" :label="mystatus===1 ? '所属区域' : '违法建筑面积'" min-width="10"> |
| | | <el-table-column :prop="mystatus === 1 ? 'street' :'buildingArea'" |
| | | :label="mystatus===1 ? '所属区域' : '违法建筑面积'" min-width="12"> |
| | | </el-table-column> |
| | | <el-table-column prop="alarmTime" label="报警时间" min-width="15" v-if="mystatus===1"> |
| | | <template slot-scope="scope"> |
| | | <span>{{filterTime(scope.row.alarmTime)}}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column :prop="mystatus === 1 ? 'continueTime' :'materials'" :label="mystatus===1 ? '持续时间' : '违法建筑材料'" min-width="10"> |
| | | <el-table-column :prop="mystatus === 1 ? 'continueTime' :'materials'" |
| | | :label="mystatus===1 ? '持续时间' : '违法建筑材料'" min-width="12"> |
| | | </el-table-column> |
| | | <el-table-column prop="operation" label="操作" min-width="20"> |
| | | <template slot-scope="scope"> |
| | |
| | | </el-table-column> |
| | | </el-table> |
| | | <!-- 详情页展示 --> |
| | | <el-dialog :visible.sync="dialogView" width="80%" title="基础信息(人工)" v-if="dialogView" |
| | | <el-dialog :visible.sync="dialogView" width="60%" title="基础信息(人工)" v-if="dialogView" |
| | | :before-close="handleClose"> |
| | | <MyDetail :info=info v-if="mystatus==1 ? true:false"></MyDetail> |
| | | <MyDetail :info=info v-if="mystatus === 1"></MyDetail> |
| | | <MyIllDetail :info=info v-else></MyIllDetail> |
| | | </el-dialog> |
| | | <!-- 调度 --> |
| | | <el-dialog :visible.sync="dialogDispatch" width="80%" title="调度信息" v-if="dialogDispatch" |
| | | <el-dialog :visible.sync="dialogDispatch" width="60%" title="调度信息" v-if="dialogDispatch" |
| | | :before-close="handleClose"> |
| | | <MyDispatch :id="baseId" :mytype="mystatus" @changeDialog="changeDialog" :refresh="getUserList"> |
| | | </MyDispatch> |
| | | </el-dialog> |
| | | <!-- tools --> |
| | | <div class="tools"> |
| | | <div class="funs"> |
| | | <!-- <div class="funs"> |
| | | <div class="funsItem funs-sp"> |
| | | <el-checkbox v-model="all" @change="selectAll()" |
| | | :disabled="tableData.length !== 0 ? false : true">全选</el-checkbox> |
| | | :disabled="tableData.length === 0">全选</el-checkbox> |
| | | </div> |
| | | <div class="funsItem funs-sp"> |
| | | <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox> |
| | |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </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"> |
| | | :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage"> |
| | | </el-pagination> |
| | | </div> |
| | | </div> |
| | |
| | | import MyVio from './createUser/vio' |
| | | import MyDispatch from '@/components/dispatch' |
| | | import helper from '@/utils/mydate' |
| | | import { RESOURCE_OPTIONS } from "@/utils/helper"; |
| | | import basecase from "@/api/operate/basecase"; |
| | | |
| | | export default { |
| | | components: { |
| | | createUser, MyIll, MyVio, MyDetail, MyDispatch, MyIllDetail |
| | | }, |
| | | data() { |
| | | return { |
| | | tableData: [ |
| | | // { |
| | | // code:1, |
| | | // eventSource:1, |
| | | // category:1, |
| | | // type:1, |
| | | // actionCause:'案由1111', |
| | | // site:'你好', |
| | | // streetId:1, |
| | | // alarmTime:'2022-21-20', |
| | | // continueTime:'8小时', |
| | | // } |
| | | ], |
| | | tableData: [], |
| | | dialogCreate: false, |
| | | dialogView: false, |
| | | dialogNewAdd: false, |
| | |
| | | checked: false, |
| | | }, |
| | | ], |
| | | eventSourceOptions: RESOURCE_OPTIONS, |
| | | mystatus: 1, |
| | | statusArr: [], |
| | | baseId: 0 |
| | | |
| | | baseId: 0, |
| | | resource: null |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | this.baseId = data.id; |
| | | this.dialogDispatch = true; |
| | | }, |
| | | // 顶部下拉框 |
| | | setMystatus(value) { |
| | | console.log(value); |
| | | this.statusArr[1] = value; |
| | | this.changeTypeChecked(value - 1); |
| | | this.getUserList(); |
| | | }, |
| | | // 选择违规违建 |
| | | setDialog({ flag, type }) { |
| | | this.dialogCreate = flag; |
| | |
| | | }, |
| | | // 批量删除 |
| | | mulDelete(idArr) { |
| | | console.log(idArr instanceof Array); |
| | | const { statusArr } = this; |
| | | this.$confirm('您确定要批量删除案件吗?') |
| | | .then(_ => { |
| | |
| | | } |
| | | }) |
| | | }) |
| | | .catch(err => { console.log(err) }) |
| | | .catch(err => { }) |
| | | }, |
| | | // 执行下拉框操作 |
| | | selectChange(list) { |
| | | console.log(this.tempList); |
| | | if (this.tempList.length !== 0) { |
| | | if (list === 3) { |
| | | this.preMyIdx = list; |
| | |
| | | list.forEach(item => { |
| | | this.tempList.push(item.id); |
| | | }) |
| | | if (list.length === this.tableData.length) { |
| | | this.all = true; |
| | | } else { |
| | | this.all = false |
| | | } |
| | | this.all = list.length === this.tableData.length; |
| | | }, |
| | | // 全选 |
| | | selectAll() { |
| | |
| | | }, |
| | | // 获取用户列表 |
| | | getUserList() { |
| | | const { currentPage, pageSize, statusArr } = this; |
| | | console.log(statusArr); |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: `sccg/base_case/query?state=${statusArr[0]}¤t=${currentPage}&size=${pageSize}&resource=2&type=${statusArr[1]}` |
| | | }).then(res => { |
| | | this.totalNum = res.data.total; |
| | | this.tableData = res.data.records; |
| | | console.log(res); |
| | | }) |
| | | .catch(err => { |
| | | console.log(err) |
| | | this.tableData = []; |
| | | const params = { |
| | | current: this.currentPage, |
| | | state: this.statusArr[0] ?? null, |
| | | size: this.pageSize, |
| | | resource: this.resource, |
| | | type: this.statusArr[1] ?? null |
| | | } |
| | | basecase.baseCasePoolList(params) |
| | | .then(({ records, total }) => { |
| | | this.tableData = records; |
| | | this.totalNum = total; |
| | | }) |
| | | .catch(err => this.$message.error(err)) |
| | | }, |
| | | // 设置表格斑马纹 |
| | | tableRowClassName({ row, rowIndex }) { |
| | | if ((rowIndex + 1) % 2 == 0) { |
| | | if ((rowIndex + 1) % 2 === 0) { |
| | | return 'warning-row'; |
| | | } else { |
| | | return 'success-row'; |
| | | } |
| | | return ''; |
| | | }, |
| | | // 查看用户信息(不可修改) |
| | | handleFind(rowData) { |
| | | // this.dialogView = true; |
| | | // this.userInfo = rowData; |
| | | }, |
| | | // 当前页改变触发事件 |
| | | changeCurrentPage(page) { |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | }, |
| | | // 上一页点击事件 |
| | | handlePrev(page) { |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | }, |
| | | // 下一页点击事件 |
| | | handleNext(page) { |
| | | this.currentPage = page; |
| | | this.getUserList(); |
| | | }, |
| | | |
| | | changeDialog({ flag }) { |
| | | this.dialogNewAdd = flag; |
| | | this.dialogCreate = flag; |
| | | this.dialogView = flag; |
| | | this.dialogDispatch = flag; |
| | | // this.getUserList(); |
| | | }, |
| | | handleClose(done) { |
| | | this.$confirm('确认关闭?') |
| | |
| | | // 更改一级标签的选中 |
| | | changeNavChecked(idx) { |
| | | this.tagList.forEach((item, index) => { |
| | | if (index === idx) { |
| | | item.checked = true; |
| | | } else { |
| | | item.checked = false; |
| | | } |
| | | item.checked = index === idx; |
| | | }) |
| | | this.mystatus = 1 |
| | | this.typeList[0].checked = true; |
| | | this.typeList[1].checked = false; |
| | | this.statusArr[0] = this.tagList[idx].value; |
| | |
| | | // 更改违规/违建 |
| | | changeTypeChecked(idx) { |
| | | this.typeList.forEach((item, index) => { |
| | | if (index === idx) { |
| | | item.checked = true; |
| | | } else { |
| | | item.checked = false; |
| | | } |
| | | item.checked = index === idx; |
| | | }) |
| | | this.mystatus = idx + 1; |
| | | this.statusArr[1] = this.typeList[idx].value; |
| | |
| | | }, |
| | | // 获取案件信息 |
| | | getEventInfo(code) { |
| | | console.log('获取具体案件信息', code); |
| | | this.$axios({ |
| | | method: 'get', |
| | | url: `sccg/base_case/baseCaseDetail/${code}` |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | this.info = res.data; |
| | | this.dialogView = true; |
| | | }) |
| | | }, |
| | | // 在学习 |
| | | handleLearn({ id }) { |
| | | console.log(id); |
| | | this.$axios({ |
| | | method: 'put', |
| | | url: 'sccg/base_case/case_status_update?caseId=' + id + '&state=' + 3 |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | if (res.code === 200) { |
| | | this.$notify({ |
| | | title: '温馨提示', |
| | |
| | | type: 'success', |
| | | position: 'bottom-right' |
| | | }) |
| | | // this.$message({ |
| | | // type:'success', |
| | | // message:'操作成功', |
| | | // }) |
| | | this.getUserList(); |
| | | } else { |
| | | this.$message({ |
| | |
| | | }, |
| | | // 暂不处理 |
| | | handleNotDeal({ id }) { |
| | | console.log(id); |
| | | this.$axios({ |
| | | method: 'put', |
| | | url: 'sccg/base_case/case_status_update?caseId=' + id + '&state=' + 4 |
| | | }) |
| | | .then(res => { |
| | | console.log(res); |
| | | if (res.code === 200) { |
| | | this.$notify({ |
| | | title: '温馨提示', |
| | |
| | | type: 'success', |
| | | position: 'bottom-right' |
| | | }) |
| | | // this.$message({ |
| | | // type:'success', |
| | | // message:'操作成功', |
| | | // }) |
| | | this.getUserList(); |
| | | } else { |
| | | this.$message({ |
| | |
| | | }) |
| | | }, |
| | | // 处理时间 |
| | | filterTime(time){ |
| | | filterTime(time) { |
| | | return helper(time); |
| | | } |
| | | } |
| | |
| | | color: #4b9bb7; |
| | | |
| | | header { |
| | | background-color: #09152f; |
| | | border: 1pox solid #fff; |
| | | // background-color: #09152f; |
| | | |
| | | .headerContent { |
| | | padding: 0 40px; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | main { |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | margin-top: 20px; |
| | | padding-bottom: 50px; |
| | | border: 1pox solid #fff; |
| | | |
| | | .mainTitle { |
| | | line-height: 60px; |
| | |
| | | } |
| | | |
| | | .is-active { |
| | | background-color: #070f22; |
| | | color: #fff; |
| | | // background-color: #070f22; |
| | | color: #333; |
| | | font-size: 500; |
| | | } |
| | | } |
| | | |
| | | .type-nav { |
| | | display: flex; |
| | | line-height: 40px; |
| | | margin-left: 30px; |
| | | margin-top: 2px; |
| | | // margin-left: 30px; |
| | | // margin-top: 2px; |
| | | |
| | | .type-item { |
| | | width: 80px; |
| | |
| | | } |
| | | |
| | | .is-active { |
| | | background-color: #070f22; |
| | | // background-color: #070f22; |
| | | border-radius: 4px; |
| | | color: #fff; |
| | | color: #333; |
| | | font-size: 500; |
| | | } |
| | | } |
| | | |
| | |
| | | |
| | | .funs { |
| | | display: flex; |
| | | .funs-sp{ |
| | | |
| | | .funs-sp { |
| | | border: 1px solid #17324c; |
| | | } |
| | | |
| | | .funsItem { |
| | | line-height: 28px; |
| | | display: flex; |
| | |
| | | width: 120px; |
| | | } |
| | | |
| | | &:hover { |
| | | border: 1px solid #4b9bb7; |
| | | } |
| | | // &:hover { |
| | | // border: 1px solid #4b9bb7; |
| | | // } |
| | | |
| | | &:hover .el-checkbox { |
| | | color: #4b9bb7; |
| | | } |
| | | // &:hover .el-checkbox { |
| | | // color: #4b9bb7; |
| | | // } |
| | | } |
| | | |
| | | } |
| | |
| | | |
| | | .el-pagination { |
| | | |
| | | &::v-deep li, |
| | | &::v-deep .btn-prev, |
| | | &::v-deep .btn-next { |
| | | background-color: #071f39; |
| | | color: #4b9bb7; |
| | | } |
| | | // &::v-deep li, |
| | | // &::v-deep .btn-prev, |
| | | // &::v-deep .btn-next { |
| | | // // background-color: #071f39; |
| | | // color: #4b9bb7; |
| | | // } |
| | | |
| | | &::v-deep .active { |
| | | background-color: #409eff; |
| | | color: #fff; |
| | | } |
| | | // &::v-deep .active { |
| | | // background-color: #409eff; |
| | | // color: #fff; |
| | | // } |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-table { |
| | | color: #4b9bb7; |
| | | font-size: 10px; |
| | | margin-top: 10px; |
| | | // color: #4b9bb7; |
| | | // font-size: 10px; |
| | | // margin-top: 10px; |
| | | |
| | | &::v-deep .cell { |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | // display: none; |
| | | .el-checkbox{ |
| | | display:none |
| | | } |
| | | } |
| | | |
| | | |
| | | .operation { |
| | | display: flex; |
| | | |