新增案件池问题登记

“dzb”

2022-09-22 ab36c0c3dbaa95fa3f94268cfc8b8bb7aae22b80

新增案件池问题登记

 package-lock.json

Diff too large

 package.json

@@ -9,6 +9,7 @@
    "build:stage": "vue-cli-service build --mode staging"
  },
  "dependencies": {
    "@amap/amap-jsapi-loader": "^1.0.1",
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "normalize.css": "^8.0.1",

 src/components/map/index.vue

New file
@@ -0,0 +1,32 @@
<template>
    <div id="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
    data() {
        return {
            map: null,
        }
    },
    mounted() {
        AMapLoader.load({
            key: "091ade377d4db40f68cc78cb9658ce8d", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        })
            .then((AMap) => {
                this.map = new AMap.Map("container");
            })
            .catch((e) => {
                console.log(e);
            });
    }
}
</script>
<style lang="scss" scoped>
#container {
    width: 100%;
    height: 100%;
}
</style>

 src/router/index.js

@@ -67,7 +67,14 @@
          {
            path:'casepool',
            name:'casepool',
            component:() => import('@/views/operate/disposal/casepool')
            component: () => import('@/views/operate/disposal/casepool'),
            children: [
              {
                path: 'escalation',
                name: 'escalation',
                component: () => import('@/views/operate/disposal/escalation'),
              }
            ]
          }
        ]
      },

 src/views/layout/components/Menu/index.vue

@@ -77,6 +77,10 @@
                <span class="secondSpan">事项处理管理</span>
              </template>
              <el-menu-item index="/home/operate/casepool">案件池</el-menu-item>
              <el-menu-item index="/home/operate/casepool">上报管理</el-menu-item>
              <el-menu-item index="/home/operate/casepool">调度管理</el-menu-item>
              <!-- <el-menu-item index="/home/operate/casepool">再学习管理</el-menu-item> -->
              <el-menu-item index="/home/operate/casepool">暂不处理</el-menu-item>
            </el-submenu>
            <el-menu-item index="/home/operate/myWait">我的待办</el-menu-item>
            <el-menu-item index="/home/operate/rectification">专项整治</el-menu-item>

 src/views/operate/disposal/casepool/compenents/checkIn/index.vue

@@ -4,98 +4,129 @@
            <!-- :rules="createRoleRules" -->
            <el-form ref="user" label-width="140px" autoComplete="on" :model="role" label-position="right">
                <div class="things">
                    <div>填写基础信息</div>
                    <div class="title">填写基础信息</div>
                    <!-- 问题类型 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    <el-form-item class="optionItem" label="问题类型:" prop="name">
                        <el-select v-model="role.type" placeholder="违规">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 大类名称 -->
                    <el-form-item class="optionItems" label="角色类型:" prop="status">
                        <el-select v-model="role.type" placeholder="请选择角色类型">
                    <el-form-item class="optionItems" label="大类名称:" prop="status">
                        <el-select v-model="role.type" placeholder="请选择大类名称">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 小类名称 -->
                    <el-form-item class="optionItem" label="角色描述:" prop="description">
                        <el-input v-model="role.description" placeholder="请输入描述内容200字以内"></el-input>
                    </el-form-item>
                    <!-- 事件等级 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 所属县区 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 所属社区 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 所属街道 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 事发地点 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 是否关联商铺 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 关联商铺名称 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 填写车牌号 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 问题描述 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                </div>
                <div class="person">
                    <div>填写反映人信息</div>
                    <!-- 反映人 -->
                    <el-form-item class="optionItem" label="角色名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写角色名称"></el-input>
                    </el-form-item>
                    <!-- 联系方式 -->
                    <el-form-item class="optionItems" label="角色类型:" prop="status">
                        <el-select v-model="role.type" placeholder="请选择角色类型">
                    <el-form-item class="optionItem" label="小类名称:" prop="description">
                        <el-select v-model="role.type" placeholder="请选择小类名称">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 事件等级 -->
                    <el-form-item class="optionItem" label="事件等级:" prop="name">
                        <el-select v-model="role.type" placeholder="请选择案件等级">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="案由:" prop="name">
                        <el-input v-model="role.name" placeholder="请输入案由"></el-input>
                    </el-form-item>
                    <!-- 所属县区 -->
                    <el-form-item class="optionItem" label="所属县区:" prop="name">
                        <el-select v-model="role.type" placeholder="请选择所属县区">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属社区 -->
                    <el-form-item class="optionItem" label="所属社区:" prop="name">
                        <el-select v-model="role.type" placeholder="请选择所属社区">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属街道 -->
                    <el-form-item class="optionItem" label="所属街道:" prop="name">
                        <el-select v-model="role.type" placeholder="请选择所属街道">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 事发地点 -->
                    <el-form-item class="optionItem" label="事发地点:" prop="name">
                        <el-input v-model="role.name" placeholder="请输入事发地点详细位置"></el-input>
                    </el-form-item>
                    <!-- 是否关联商铺 -->
                    <el-form-item class="optionItem" label="是否关联商铺:" prop="name">
                        <el-radio v-model="role.name">
                            是
                        </el-radio>
                        <el-radio v-model="role.name">
                            否
                        </el-radio>
                    </el-form-item>
                    <!-- 关联商铺名称 -->
                    <el-form-item class="optionItem" label="关联商铺名称:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写关联商铺名称"></el-input>
                    </el-form-item>
                    <!-- 填写车牌号 -->
                    <el-form-item class="optionItem" label="填写车牌号:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写车牌号"></el-input>
                    </el-form-item>
                    <!-- 问题描述 -->
                    <el-form-item class="optionItem" label="问题描述:" prop="name">
                        <el-input v-model="role.name" placeholder="请填写内容200字以内"></el-input>
                    </el-form-item>
                </div>
                <div class="person">
                    <div class="title">填写反映人信息</div>
                    <!-- 反映人 -->
                    <el-form-item class="optionItem" label="反映人:" prop="name">
                        <el-input v-model="role.name"></el-input>
                    </el-form-item>
                    <!-- 联系方式 -->
                    <el-form-item class="optionItems" label="联系方式:" prop="status">
                        <el-input v-model="role.name"></el-input>
                    </el-form-item>
                    <!-- 身份证号 -->
                    <el-form-item class="optionItem" label="角色描述:" prop="description">
                        <el-input v-model="role.description" placeholder="请输入描述内容200字以内"></el-input>
                    <el-form-item class="optionItem" label="身份证号:" prop="description">
                        <el-input v-model="role.description"></el-input>
                    </el-form-item>
                </div>
                <el-form-item>
                    <div class="optionBtn">
                        <el-button class="btn cancel">取消</el-button>
                        <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
                        <!-- @click.native.prevent="handleUser" -->
                        <el-button type="primary" class="btn submit">提交
                        </el-button>
                    </div>
                </el-form-item>
            </el-form>

        </div>
        <div class="map">地图</div>
        <div class="map">
            <myMap></myMap>
        </div>
    </div>
</template>
<script>
import myMap from '@/components/map'
export default {
    components: {
        myMap,
    },
    data() {
        return {
            role: {
@@ -110,5 +141,33 @@
}
</script>
<style lang="scss" scoped>
.checkIn {
    display: flex;

    .form {
        flex: 1;
        color: #4b9bb7;
        .title {
            line-height: 40px;
        }

        &::v-deep .el-form-item__label {
            color: #4b9bb7;
        }
        .el-form{
            .el-input{
                &::v-deep .el-input__inner{
                    width: 60%;
                }
            }
        }
        &::v-deep .el-input__inner {
            background-color: #09152f;
            border: 1px solid #17324c;
        }
    }
    .map{
        flex: 1;
    }
}
</style>

 src/views/operate/disposal/casepool/index.vue

@@ -7,7 +7,7 @@
                <el-input placeholder="请输入问题来源"></el-input>
            </div>
            <div class="add">
                <el-button type="primary" icon="el-icon-plus">添加</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">添加</el-button>
            </div>
        </header>
        <!-- 主体展示 -->
@@ -63,7 +63,7 @@
        </main>
        <!-- 组件区 -->
        <footer>
            <el-dialog :visible.async="visible" width="45%">
            <el-dialog v-if="visible" :visible.async="visible" title="问题登记" width="60%" :before-close="handleClose">
                <checkIn></checkIn>
            </el-dialog>
        </footer>
@@ -114,7 +114,7 @@
                    appendTime:'2022-01-09 14:52'
                }
            ],
            visible:true
            visible: false,
        }
    },
    methods: {
@@ -127,6 +127,19 @@
            }
            return '';
        },
        // 打开添加页
        handleOpenDialog() {
            this.visible = true;
        },
        // 关闭对话框
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.visible = false;
            done();
          })
          .catch(_ => {});
      }
    }
}
</script>
@@ -199,6 +212,7 @@
                .el-table{
                    font-size: 12px;
                    color:#4b9bb7;

                    .line{
                        padding: 0 5px;
                    }
@@ -208,6 +222,7 @@
                    background-color: #09152f;
                    color: #4b9bb7;
                }

                .el-table::v-deep .warning-row {
                    background: #06122c;
                }
@@ -218,5 +233,35 @@
            }
        }
    }

    footer {

        &::v-deep .el-dialog__header,
        &::v-deep .el-dialog__body {
            background-color: #06122c;
        }

        &::v-deep .el-dialog__header {
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 20px;
            line-height: 60px;
        }

        &::v-deep .el-dialog__title {
            color: #4b9bb7;
        }

        &::v-deep .el-dialog__close {
            width: 20px;
            height: 20px;
            // color: #fff;
        }

        &::v-deep .el-dialog__body {
            padding: 0;
        }
    }
}
</style>

 src/views/operate/disposal/escalation/index.vue

New file
@@ -0,0 +1,267 @@
<template>
    <div class="casepool">
        <!-- 查询添加 -->
        <header>
            <div class="search">
                <span>来源查询：</span>
                <el-input placeholder="请输入问题来源"></el-input>
            </div>
            <div class="add">
                <el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">添加</el-button>
            </div>
        </header>
        <!-- 主体展示 -->
        <main>
            <div class="mainContent">
                <!-- 导航状态标签 -->
                <div class="nav">
                    <el-tabs type="border-card">
                        <el-tab-pane :label="item.name" v-for="item in tagList" :key="item.name">
                            <!-- 数据渲染 -->
                            <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">
                                <el-table-column type="selection" min-width="5">
                                </el-table-column>
                                <el-table-column label="事件编号" min-width="6">
                                    <template slot-scope="scope">{{ scope.row.id }}</template>
                                </el-table-column>
                                <el-table-column prop="source" label="问题来源" min-width="10">
                                </el-table-column>
                                <el-table-column prop="bigKind" label="大类名称" min-width="6">
                                </el-table-column>
                                <el-table-column prop="samllKind" label="小类名称" min-width="6">
                                </el-table-column>
                                <el-table-column prop="reson" label="案由" min-width="10">
                                </el-table-column>
                                <el-table-column prop="location" label="报警点位" min-width="10">
                                </el-table-column>
                                <el-table-column prop="area" label="所属区域" min-width="10">
                                </el-table-column>
                                <el-table-column prop="appendTime" label="报警时间" min-width="10">
                                </el-table-column>
                                <el-table-column prop="duration" label="持续时间" min-width="6">
                                </el-table-column>
                                <el-table-column prop="operation" label="操作" min-width="15">
                                    <template slot-scope="scope">
                                        <div class="operation">
                                            <span @click="handleFind(scope.row)">上报</span>
                                            <span class="line">|</span>
                                            <span @click="handleUpdate(scope.row)">调度</span>
                                            <span class="line">|</span>
                                            <span>再学习</span>
                                            <span class="line">|</span>
                                            <span>暂不处理</span>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </main>
        <!-- 组件区 -->
        <footer>
            <!-- <el-dialog v-if="visible" :visible.async="visible" title="问题登记" width="60%" :before-close="handleClose">
                <checkIn></checkIn>
            </el-dialog> -->
        </footer>
    </div>
</template>
<script>
// import checkIn from './compenents/checkIn';
export default {
    components: {
        checkIn,
    },
    data() {
        return {
            tagList: [
                {
                    name: '待处理',
                    value: 0,
                },
                {
                    name: '已上报',
                    value: 0,
                },
                {
                    name: '已调度',
                    value: 0,
                },
                {
                    name: '在学习',
                    value: 0,
                },
                {
                    name: '暂不处理',
                    value: 0,
                },
                {
                    name: '违规',
                    value: 0,
                },
                {
                    name: '违建',
                    value: 0,
                },
            ],
            tableData: [
                {
                    id: 13413114,
                    source: '人工上报/视频巡查',
                    appendTime: '2022-01-09 14:52'
                }
            ],
            visible: false,
        }
    },
    methods: {
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
            return '';
        },
        // 打开添加页
        handleOpenDialog() {
            this.visible = true;
        },
        // 关闭对话框
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.visible = false;
            done();
          })
          .catch(_ => {});
      }
    }
}
</script>
<style lang="scss" scoped>
.casepool {
    text-align: left;
    color: #4b9bb7;

    header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        line-height: 60px;

        .search {
            display: flex;

            span {
                flex: 2;
            }

            .el-input {
                flex: 5;

                &::v-deep .el-input__inner {
                    background-color: #09152f;
                    border: 1px solid #17324c;
                }
            }
        }

        .add {
            .el-button {
                background-color: #eb5d01;
                border: none;
                border-radius: 20px;
            }
        }
    }

    main {
        .mainContent {
            .nav {
                &::v-deep .el-tabs--border-card {
                    border: none;
                }

                &::v-deep .el-tabs--border-card>.el-tabs__content {
                    background-color: #09152f;
                }

                &::v-deep .el-tabs__nav-scroll {
                    background-color: #09152f;
                }

                &::v-deep .el-tabs__header {
                    line-height: 60px;
                }

                &::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item {
                    color: #fff;
                }

                &::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
                    color: #4b9bb7;
                    background-color: #071f39;
                    border: none;
                }

                .el-table {
                    font-size: 12px;
                    color: #4b9bb7;

                    .line {
                        padding: 0 5px;
                    }
                }

                &::v-deep .el-table__empty-block {
                    background-color: #09152f;
                    color: #4b9bb7;
                }

                .el-table::v-deep .warning-row {
                    background: #06122c;
                }

                .el-table::v-deep .success-row {
                    background: #071f39;
                }
            }
        }
    }

    footer {

        &::v-deep .el-dialog__header,
        &::v-deep .el-dialog__body {
            background-color: #06122c;
        }

        &::v-deep .el-dialog__header {
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 20px;
            line-height: 60px;
        }

        &::v-deep .el-dialog__title {
            color: #4b9bb7;
        }

        &::v-deep .el-dialog__close {
            width: 20px;
            height: 20px;
            // color: #fff;
        }

        &::v-deep .el-dialog__body {
            padding: 0;
        }
    }
}
</style>