| | |
| | | <template> |
| | | <div class="userList"> |
| | | <header> |
| | | <div class="headerContent"> |
| | | <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" |
| | | :value="item.value" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | <div class="findBtn"> |
| | | <el-button type="primary" @click="getUserList">查询</el-button> |
| | | </div> |
| | | </div> |
| | | <!-- <div class="addUser"> |
| | | <el-button class="addBtn" type="primary" @click="dialogCreate = true">添加</el-button> |
| | | <el-dialog :before-close="handleClose" :visible.sync="dialogCreate" title="请选择上报事件类型" width="45%" |
| | | v-if="dialogCreate"> |
| | | <createUser @getPageProp=setDialog /> |
| | | </el-dialog> |
| | | <el-dialog :before-close="handleClose" :visible.sync="dialogNewAdd" |
| | | :title="newAddType === 0 ? '违规事件登记' : '违建事件登记' " width="60%" v-if="dialogNewAdd"> |
| | | <MyIll v-if="newAddType === 1" :mytype=newAddType @changeDialog=changeDialog /> |
| | | <myVio v-else :mytype=newAddType @changeDialog=changeDialog /> |
| | | </el-dialog> |
| | | </div> --> |
| | | </div> |
| | | <MyHeader @getUserList ="getUserList"></MyHeader> |
| | | <!-- <div class="headerContent">--> |
| | | <!-- <div class="search">--> |
| | | <!-- <span>来源查询:</span>--> |
| | | <!-- <div class="option">--> |
| | | <!-- <el-select--> |
| | | <!-- v-model="mystatus"--> |
| | | <!-- placeholder="违规"--> |
| | | <!-- >--> |
| | | <!-- <el-option--> |
| | | <!-- v-for="item in resourceOptions"--> |
| | | <!-- :key="item.label"--> |
| | | <!-- :label="item.label"--> |
| | | <!-- :value="item.value"--> |
| | | <!-- >--> |
| | | <!-- </el-option>--> |
| | | <!-- </el-select>--> |
| | | <!-- </div>--> |
| | | <!-- <div class="findBtn">--> |
| | | <!-- <el-button type="primary" @click="getUserList">查询</el-button>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | |
| | | <!-- </div>--> |
| | | </header> |
| | | <main> |
| | | <div class="mainContent"> |
| | | <!-- 导航状态标签 --> |
| | | <!-- <div class="nav"> |
| | | <div @click="changeNavChecked(index)" :class="[item.checked ? 'is-active':'','nav-item']" |
| | | v-for="(item,index) in tagList" :key="item.name">{{item.name}}</div> |
| | | </div> |
| | | <div class="type-nav"> |
| | | <div @click="changeTypeChecked(index)" v-for="(item,index) in typeList" :key="item.name" |
| | | :class="[item.checked ? 'is-active':'','type-item']">{{item.name}}</div> |
| | | </div> --> |
| | | <!-- 数据展示 --> |
| | | <el-table |
| | | border |
| | | stripe |
| | | ref="multipleTable" |
| | | :header-cell-style="{ |
| | | background: '#06122c', |
| | | 'font-size': '12px', |
| | | color: '#4b9bb7', |
| | | 'background':'#F5F5F5', |
| | | 'font-weight': '650', |
| | | 'line-height': '45px', |
| | | }" |
| | |
| | | </el-table-column> |
| | | <el-table-column prop="continueTime" label="持续时间" min-width="10"> |
| | | </el-table-column> |
| | | <!-- <el-table-column prop="operation" label="操作" min-width="20"> |
| | | <template slot-scope="scope"> |
| | | <div class="operation"> |
| | | <span @click="handleFind(scope.row)">上报</span> |
| | | <span class="line">|</span> |
| | | <span @click="handleDelete(scope.row)">调度</span> |
| | | <span class="line">|</span> |
| | | <span @click="handleDelete(scope.row)">在学习</span> |
| | | <span class="line">|</span> |
| | | <span @click="handleDelete(scope.row)">暂不处理</span> |
| | | </div> |
| | | </template> |
| | | </el-table-column>--> |
| | | </el-table> |
| | | <!-- 详情页展示 --> |
| | | <el-dialog |
| | | :visible.sync="dialogView" |
| | | width="80%" |
| | | width="60%" |
| | | title="基础信息(人工)" |
| | | v-if="dialogView" |
| | | :before-close="handleClose" |
| | |
| | | <!-- tools --> |
| | | <div class="tools"> |
| | | <div class="funs"> |
| | | <div class="funsItem funs-sp"> |
| | | <div class="funsItem funs-sp funs-first"> |
| | | <el-checkbox v-model="all" @change="selectAll()" |
| | | >全选</el-checkbox |
| | | > |
| | |
| | | >反选</el-checkbox |
| | | > |
| | | </div> |
| | | <div class="funsItem"> |
| | | <!-- <div class="funsItem"> |
| | | <el-select |
| | | v-model="myIdx" |
| | | placeholder="批量操作" |
| | |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <div class="pagination"> |
| | | <el-pagination |
| | |
| | | </div> |
| | | </template> |
| | | <script> |
| | | import { CATEGOTY, EVENT_SOURCE } from "@/utils/helper"; |
| | | // import updateUser from "./updateUser" |
| | | import { RESOURCE_OPTIONS, EVENT_SOURCE } from "@/utils/helper"; |
| | | import MyDetail from "@/components/detail"; |
| | | // import createUser from "./createUser" |
| | | // import MyIll from './createUser/ill' |
| | | // import MyVio from './createUser/vio' |
| | | import basecase from "@/api/operate/basecase"; |
| | | import MyHeader from "@/components/seachHeader/index" |
| | | |
| | | export default { |
| | | components: { |
| | | MyDetail, |
| | | MyHeader |
| | | }, |
| | | data() { |
| | | return { |
| | | tableData: [ |
| | | // { |
| | | // code:1, |
| | | // eventSource:1, |
| | | // category:1, |
| | | // type:1, |
| | | // actionCause:'案由1111', |
| | | // site:'你好', |
| | | // streetId:1, |
| | | // alarmTime:'2022-21-20', |
| | | // continueTime:'8小时', |
| | | // } |
| | | ], |
| | | tableData: [], |
| | | context: "", |
| | | dialogCreate: false, |
| | | dialogView: false, |
| | |
| | | ], |
| | | mystatus: "", |
| | | statusArr: [], |
| | | resource: null, |
| | | resourceOptions: RESOURCE_OPTIONS |
| | | }; |
| | | }, |
| | | created() { |
| | |
| | | this.getUserList(); |
| | | }, |
| | | methods: { |
| | | setMystatus(value) { |
| | | console.log(value); |
| | | this.statusArr[1] = value; |
| | | this.changeTypeChecked(value - 1); |
| | | this.getUserList(); |
| | | }, |
| | | setDialog({ flag, type }) { |
| | | this.dialogCreate = flag; |
| | | this.dialogNewAdd = true; |
| | |
| | | }, |
| | | // 批量删除 |
| | | mulDelete(idArr) { |
| | | console.log(idArr instanceof Array); |
| | | const { statusArr } = this; |
| | | this.$confirm("您确定要批量删除案件吗?") |
| | | .then((_) => { |
| | |
| | | }); |
| | | }) |
| | | .catch((err) => { |
| | | console.log(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.code); |
| | | }); |
| | | 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, context, statusArr } = this; |
| | | 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; |
| | | }); |
| | | getUserList(seachData) { |
| | | // console.log(seachData.seachData.resource) |
| | | let params |
| | | if (seachData){ |
| | | params = { |
| | | current: this.currentPage, |
| | | state: this.statusArr[0] ?? null, |
| | | size: this.pageSize, |
| | | resource: seachData.seachData.resource ==undefined ?null:seachData.seachData.resource, |
| | | region:seachData.seachData.region ==undefined?null:seachData.seachData.region, |
| | | type: this.statusArr[1] ?? null, |
| | | code:seachData.seachData.code ==undefined?null:seachData.seachData.code, |
| | | categoryBig:seachData.seachData.categoryBig ==undefined?null:seachData.seachData.categoryBig, |
| | | categorySmall:seachData.seachData.categorySmall ==undefined?null:seachData.seachData.categorySmall, |
| | | site:seachData.seachData.site ==undefined?null:seachData.seachData.site, |
| | | street:seachData.seachData.street ==undefined?null:seachData.seachData.street, |
| | | alarmTime:seachData.seachData.alarmTime ==undefined?null:seachData.seachData.alarmTime, |
| | | }; |
| | | }else { |
| | | |
| | | params = { |
| | | current: this.currentPage, |
| | | state: this.statusArr[0] ?? null, |
| | | size: this.pageSize, |
| | | 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) { |
| | |
| | | // 更改一级标签的选中 |
| | | changeNavChecked(idx) { |
| | | this.tagList.forEach((item, index) => { |
| | | if (index === idx) { |
| | | item.checked = true; |
| | | } else { |
| | | item.checked = false; |
| | | } |
| | | item.checked = index === idx; |
| | | }); |
| | | this.typeList[0].checked = true; |
| | | this.typeList[1].checked = false; |
| | |
| | | // 更改违规/违建 |
| | | 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}`, |
| | |
| | | <style lang="scss" scoped> |
| | | .userList { |
| | | text-align: left; |
| | | margin: 10px 20px; |
| | | color: #4b9bb7; |
| | | |
| | | padding: 10px 20px; |
| | | // color: #4b9bb7; |
| | | border: 1px solid #ccc; |
| | | header { |
| | | background-color: #09152f; |
| | | border: 1pox solid #fff; |
| | | background-color: white; |
| | | |
| | | .headerContent { |
| | | padding: 0 40px; |
| | | padding: 0; |
| | | display: flex; |
| | | line-height: 100px; |
| | | justify-content: space-between; |
| | |
| | | |
| | | .el-button { |
| | | padding: 12px 25px; |
| | | border-radius: 20px; |
| | | //border-radius: 20px; |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | &::v-deep .el-input__inner { |
| | | background-color: #09152f; |
| | | border: 1px solid #17324c; |
| | | // background-color: #09152f; |
| | | //border: 1px solid #17324c; |
| | | } |
| | | |
| | | 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; |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | .is-active { |
| | | background-color: #070f22; |
| | | // background-color: #070f22; |
| | | border-radius: 4px; |
| | | color: #fff; |
| | | color: #333; |
| | | font-size: 500; |
| | | } |
| | | } |
| | | |
| | |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 0 20px; |
| | | //padding: 0 20px; |
| | | |
| | | .funs { |
| | | display: flex; |
| | | .funs-first{ |
| | | margin-left: 0!important; |
| | | } |
| | | .funs-sp { |
| | | border: 1px solid #17324c; |
| | | border: 1px solid #DCDFE6; |
| | | } |
| | | .funsItem { |
| | | line-height: 28px; |
| | |
| | | |
| | | &::v-deep .el-input__inner { |
| | | border: none; |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | } |
| | | |
| | | &:hover { |
| | |
| | | &::v-deep li, |
| | | &::v-deep .btn-prev, |
| | | &::v-deep .btn-next { |
| | | background-color: #071f39; |
| | | // background-color: #071f39; |
| | | color: #4b9bb7; |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | .el-table { |
| | | color: #4b9bb7; |
| | | font-size: 10px; |
| | | margin-top: 10px; |
| | | // color: #4b9bb7; |
| | | // font-size: 10px; |
| | | // margin-top: 10px; |
| | | |
| | | &::v-deep .cell { |
| | | text-overflow: ellipsis; |
| | |
| | | } |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | | background-color: #09152f; |
| | | // background-color: #09152f; |
| | | } |
| | | |
| | | &::v-deep .el-table__empty-block { |
| | |
| | | |
| | | .operation { |
| | | display: flex; |
| | | |
| | | color: var(--operation-color); |
| | | .line { |
| | | padding: 0 5px; |
| | | } |
| | |
| | | } |
| | | |
| | | .el-table::v-deep .warning-row { |
| | | background: #06122c; |
| | | // background: #06122c; |
| | | } |
| | | |
| | | .el-table::v-deep .success-row { |
| | | background: #071f39; |
| | | // background: #071f39; |
| | | } |
| | | } |
| | | |
| | | &::v-deep .el-dialog__header, |
| | | &::v-deep .el-dialog__body { |
| | | background-color: #06122c; |
| | | // background-color: #06122c; |
| | | } |
| | | |
| | | &::v-deep .el-dialog__header { |
| | |
| | | padding: 0; |
| | | } |
| | | } |
| | | </style> |
| | | </style> |