From e8546c7be820056f24bcb9055cd889cd3a597a31 Mon Sep 17 00:00:00 2001
From: 叶松 <2217086471@qq.com>
Date: 星期三, 15 十一月 2023 08:58:35 +0800
Subject: [PATCH] Merge branch 'master' of http://111.30.93.211:10101/r/supipe
---
web/src/views/SecureManage/RiskGrad/AreaPolling.vue | 409 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 406 insertions(+), 3 deletions(-)
diff --git a/web/src/views/SecureManage/RiskGrad/AreaPolling.vue b/web/src/views/SecureManage/RiskGrad/AreaPolling.vue
index afe80fa..5a9c94f 100644
--- a/web/src/views/SecureManage/RiskGrad/AreaPolling.vue
+++ b/web/src/views/SecureManage/RiskGrad/AreaPolling.vue
@@ -1,3 +1,406 @@
-<template>
- <div>区域巡检</div>
-</template>
\ No newline at end of file
+<!-- 安全管理 ==> 风险分级管控 => 区域巡检-->
+<template>
+ <div class="main">
+ <div class="main_tabs">
+ <el-tabs v-model="activeName">
+ <el-tab-pane label="巡检任务" name="first"></el-tab-pane>
+ <el-tab-pane label="任务打卡" name="second"></el-tab-pane>
+ </el-tabs>
+ </div>
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">巡检任务：</span>
+ <el-input size="mini" v-model="queryInfo.task" placeholder="请输入巡检任务" clearable></el-input>
+ </div>
+ <div class="header_item">
+ <span class="header_label">巡检人员：</span>
+ <el-input size="mini" v-model="queryInfo.realName" placeholder="请输入巡检人员" clearable></el-input>
+ </div>
+ <div class="header_item">
+ <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
+ <el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
+ </div>
+ </div>
+ <div class="main_content">
+ <cpn-table :table-index="true" :table-loading="tableConfig.loading" :table-data="tableConfig.tableData"
+ :table-columns="tableConfig.tableColumns" :page-total="tableConfig.total" :page-num.sync="queryInfo.pageNum"
+ :page-size.sync="queryInfo.pageSize" :page-change="pageChange">
+ </cpn-table>
+ </div>
+ <!-- dialog -->
+ <el-dialog width="400px" class="prop_dialog" v-if="isRenderDialog" :title="dialogTitle" :visible.sync="asyncVisible"
+ @close="closeForm">
+
+ <!-- <cpn-form :form-config="formConfig" :form-items="formConfig.formItems"></cpn-form> -->
+
+ <el-form class="rule_form" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">
+
+ <el-form-item label="巡检任务:" prop="task">
+ <el-input v-model="ruleForm.task" placeholder="请输入巡检任务" clearable></el-input>
+ </el-form-item>
+
+ <el-form-item label="巡检标准:" prop="standard">
+ <el-input type="textarea" v-model="ruleForm.standard" placeholder="请输入巡检标准" clearable></el-input>
+ </el-form-item>
+
+ <el-form-item label="巡检人员:" prop="realNames">
+ <el-select v-model="ruleForm.realNames" multiple value-key="id" placeholder="请选择巡检人员">
+ <el-option v-for="item in allPersons" :key="item.id" :label="item.label" :value="item"></el-option>
+ </el-select>
+ </el-form-item>
+
+ <div class="divider"><span>巡检路线</span></div>
+
+ <el-form-item label-width="0" v-for="(itemP, index) in ruleForm.paths " :key="index" :prop="'paths.' +
+ index + '.value'" :rules="{ required: true, message: '请选择巡检路线', trigger: 'change' }">
+ <el-select style="margin-right: 10px;width: 323px;" v-model="itemP.value" value-key="id"
+ placeholder="请选择巡检路线">
+ <el-option v-for=" item in allPath" :key="item.id" :label="item.label" :value="item"></el-option>
+ </el-select>
+ <el-button class="delete_btn" @click="delPath(itemP)">删除</el-button>
+ <el-button class="table_btn" v-show="index === ruleForm.paths.length - 1"
+ @click="addPath">添加</el-button>
+ </el-form-item>
+ <!-- <el-form-item label="区域名称:" prop="regionHazardInformId">
+ <el-select v-model="ruleForm.regionHazardInformId" placeholder="请选择区域名称">
+ <el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">
+ </el-option>
+ </el-select>
+ </el-form-item> -->
+ </el-form>
+ <div slot="footer">
+ <el-button @click="asyncVisible = false">取 消</el-button>
+ <el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+<script>
+import {throttle} from '@/plugins/public'
+import cpnTable from '@/components/element/Table'
+// import cpnForm from '@/components/element/Form'
+export default {
+ data() {
+ return {
+ isRenderDialog: false,
+ asyncVisible: false,
+ activeName: 'first', // tabs切换
+ submitMode: '', // 提交方式: add / update
+ allPersons: [], // 巡检人员
+ allPath: [], // 巡检路线
+ queryInfo: {
+ pageNum: 1,
+ pageSize: 10,
+ task: '',
+ realName: '',
+ },
+ ruleForm: {
+ id: '',
+ task: '',
+ standard: '',
+ realNames: [],
+ paths: [
+ {value: ''},
+ ],
+ },
+ rules: {
+ task: [{required: true, message: '请输入巡检任务', trigger: 'blur'}],
+ standard: [{required: true, message: '请输入巡检标准', trigger: 'blur'}],
+ realNames: [{required: true, message: '请选择巡检人员', trigger: 'change'}],
+ },
+ tableConfig: {
+ loading: true,
+ tableData: [],
+ tableColumns: [],
+ total: 0,
+ },
+ formConfig: {}
+ }
+ },
+ components: {
+ cpnTable,
+ // cpnForm,
+ },
+ computed: {
+ isUpdate() {
+ return this.submitMode === 'update'
+ },
+ dialogTitle() {
+ return this.isUpdate ? '修改巡检任务' : '新增巡检任务'
+ },
+ },
+ beforeCreate() {
+ this.$http = this.$api.Safety.RiskGrad.polling
+ },
+ created() {
+ this.setTableColumn()
+ this.setFormColumn()
+ this.getLists()
+ },
+ methods: {
+ // 获取table列表数据
+ getLists() {
+ let params = this.queryInfo
+ let tableConfig = this.tableConfig
+ this.$http.getLists(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ tableConfig.total = res.data.total
+ tableConfig.tableData = res.data.list
+ }
+ tableConfig.loading = false
+ })
+ },
+ // 获取管服人员数据(巡检人员)
+ getPerson() {
+ return new Promise(resolve => {
+ this.$api.Personnerl.SEARCHMORTGAGEELIST({
+ userType: 1,
+ pageNum: 1,
+ pageSize: 9999
+ }).then((res) => {
+ if (res.success) {
+ const list = res.data.list
+ const out = []
+ list.forEach(item => {
+ out.push({
+ id: item.userId,
+ label: item.realName,
+ })
+ })
+ this.allPersons.push(...out)
+ resolve()
+ }
+ })
+ })
+ },
+ // 获取巡检路线
+ getPath() {
+ new Promise(resolve => {
+ this.$api.Safety.RiskGrad.warning.getLists({
+ pageNum: 1,
+ pageSize: 9999
+ }).then((res) => {
+ if (res.success) {
+ const list = res.data.list
+ const out = []
+ list.forEach(item => {
+ out.push({
+ id: item.id,
+ label: item.region
+ })
+ })
+ this.allPath.push(...out)
+ resolve()
+ }
+ })
+ })
+ },
+ // 初始化 table 配置
+ setTableColumn() {
+ this.tableConfig.tableColumns = [
+ {index: true},
+ {name: "巡检任务", key: "task"},
+ {name: "巡检标准", key: "standard"},
+ {name: "巡检人员", key: "regionUsersList", formatter: row => row.realNames},
+ {name: "巡检路线", key: "regionList", formatter: row => row.regions},
+ {
+ operation: true, name: "操作", width: 140, value: [
+ {name: "修改", permission: "update", handleRow: this.updateRow},
+ {name: "删除", permission: "delete", handleRow: this.deleteRow},]
+ },
+ ]
+ },
+ // 初始化 form 配置
+ setFormColumn() {
+ this.formConfig = {
+ formModels: {
+ task: '',
+ standard: '',
+ realNames: [],
+ },
+ formItems: [
+ {type: 'input', label: '巡检任务'},
+ {type: 'textarea', label: '巡检标准'},
+ {
+ type: 'select', label: '用户状态', options: this.allPersons,
+ }
+ // {
+ // type: 'datepicker', label: '创建时间', otherOptions: {
+ // startPlaceholder: '开始时间',
+ // endPlaceholder: '结束时间',
+ // type: 'daterange',
+ // 'unlink-panels': true
+ // }
+ // }
+ ],
+ itemColLayout: {
+ span: 8
+ }
+ }
+ },
+ // 查询按钮列表信息
+ queryReset() {
+ this.queryInfo.pageNum = 1
+ this.queryInfo.pageSize = 10
+ this.getLists()
+ },
+ // 重置表单
+ resetForm(formName) {
+ this.$refs[formName].resetFields()
+ this.ruleForm.paths = [{value: ''}]
+ },
+ // 显示表单
+ async showForm() {
+ !this.allPath.length && this.getPath()
+ !this.allPersons.length && this.getPerson()
+ !this.isRenderDialog && (this.isRenderDialog = true)
+ this.asyncVisible = true
+ },
+ closeForm() {
+ this.resetForm('ruleForm')
+ this.asyncVisible = false
+ },
+ // 添加数据
+ addRow() {
+ this.submitMode = 'add'
+ this.showForm()
+
+
+ console.log(this.allPersons)
+ console.log(this.formConfig)
+ },
+ updateRow(row) {
+ this.submitMode = 'update'
+ this.showForm()
+ this.$nextTick(() => {
+ const {id, task, standard, regionUsersList, regionList} = row
+ const realNames = regionUsersList.map(item => {
+ return {
+ id: item.userId,
+ label: item.realName,
+ }
+ })
+ const paths = regionList.map(item => {
+ return {
+ value: {
+ id: item.regionHazardInformId,
+ label: item.region,
+ },
+ }
+ })
+ this.ruleForm = {
+ id,
+ task,
+ standard,
+ realNames,
+ paths,
+ }
+ })
+ },
+ deleteRow(row) {
+ const params = {id: row.id}
+ this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning"
+ }).then(() => {
+ this.$http.delete(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.queryReset()
+ this.$message.success("删除成功！")
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ }).catch(() => {
+ this.$message.warning("您已取消")
+ })
+
+ },
+ // 提交表单
+ onSubmit: throttle(function (formName) {
+ this.$refs[formName].validate(valid => {
+ if (!valid) return
+ const {id, task, standard, realNames, paths} = this.ruleForm
+ const regionList = paths.map((item, index) => {
+ return {
+ sort: index + 1,
+ regionHazardInformId: item.value.id,
+ }
+ })
+ const regionUsersList = realNames.map(item => {
+ return {
+ userId: item.id,
+ }
+ })
+ const params = {
+ task,
+ standard,
+ regionList,
+ regionUsersList,
+ }
+ if (this.isUpdate) {
+ // 更新
+ params.id = id
+ this.$http.update(params).then((res) => {
+ if (res.statusMsg === 'ok') {
+ this.closeForm()
+ this.getLists()
+ this.$message.success('更新成功！')
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ } else {
+ // 添加
+ this.$http.insert(params).then((res) => {
+ if (res.statusMsg === 'ok') {
+ this.closeForm()
+ this.getLists()
+ this.$message.success('添加成功！')
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ }
+ })
+ }, 1000),
+ addPath() {
+ this.ruleForm.paths.push({
+ value: ''
+ })
+ },
+ delPath(item) {
+ var index = this.ruleForm.paths.indexOf(item)
+ if (index !== -1) {
+ this.ruleForm.paths.splice(index, 1)
+ }
+ },
+ pageChange() {
+ this.getLists()
+ },
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/style/layout-main.scss';
+
+.divider {
+ position: relative;
+ margin-bottom: 30px;
+ text-indent: 10px;
+ color: #fff;
+ border-left: 3px solid #18F6F8;
+
+ &::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: -8px;
+ width: 100%;
+ padding: 20px 0;
+ border-bottom: 1px solid #0C4D6F;
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.3