From eca0d5d0f718e5f2f36c40aa6d90cc06f9e32f1d Mon Sep 17 00:00:00 2001
From: laishajiang <12977614+laishajiang@user.noreply.gitee.com>
Date: Fri, 12 Apr 2024 14:47:55 +0800
Subject: [PATCH] =?UTF-8?q?110=E4=B8=BE=E6=8A=A5=E6=8A=95=E8=AF=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/report.ts                       |  26 ++
 src/views/reportpolice/IntoBad.vue      |  63 +++
 src/views/reportpolice/ReportDialog.vue | 521 ++++++++++++++++++++++++
 src/views/reportpolice/report.vue       | 179 ++++++++
 4 files changed, 789 insertions(+)
 create mode 100644 src/api/report.ts
 create mode 100644 src/views/reportpolice/IntoBad.vue
 create mode 100644 src/views/reportpolice/ReportDialog.vue
 create mode 100644 src/views/reportpolice/report.vue

diff --git a/src/api/report.ts b/src/api/report.ts
new file mode 100644
index 0000000..750ee4a
--- /dev/null
+++ b/src/api/report.ts
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+export function getReport(query: any) {
+    return request.get({ url: '/report/list',query })
+}
+
+export function getReportDetail(params: Record<string, any>) {
+    return request.get({ url: '/report/detail?',params})
+}
+export function addIntoMail(body) {
+    return request.post({ url: '/report/addIntoMail', body})
+}
+export function addIntoBadMail(body) {
+    return request.post({ url: '/report/addIntoBadMail', body})
+}
+export function typelist() {
+    return request.get({ url: '/report/typelist'})
+}
+
+export function naturelist() {
+    return request.get({ url: '/report/naturelist'})
+}
+
+export function unitlist() {
+    return request.get({ url: '/report/unitlist'})
+}
\ No newline at end of file
diff --git a/src/views/reportpolice/IntoBad.vue b/src/views/reportpolice/IntoBad.vue
new file mode 100644
index 0000000..0c3ec31
--- /dev/null
+++ b/src/views/reportpolice/IntoBad.vue
@@ -0,0 +1,63 @@
+<template>
+    <el-dialog width="50vw" title="不纳入信件"  >
+    <el-form
+        label-position="top"
+        :model="form"
+        :rules="rules"
+        ref="formRef"
+        style="height: 50vh"
+    >
+        <el-form-item label="不纳入信件理由" prop="reason">
+            <el-input
+            v-model="form.reason"
+                type="textarea"
+                :rows="3"
+                :placeholder="
+                '请输入不纳入信件理由'
+                "
+            ></el-input>
+        </el-form-item>
+    </el-form>
+    <footer class="flex end">
+        <el-button type="primary" size="large" @click="submit"
+            >提交</el-button
+        >
+    </footer>
+    </el-dialog>
+</template>
+<script setup>
+const form = reactive({});
+const rules = {
+    reason: [
+        {
+            required: true,
+            message: "请填写不纳入信件原因",
+        },
+    ],
+};
+const formRef = ref();
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: {},
+    },
+    
+});
+
+const emits = defineEmits(["update:data", "submit", "close"]);
+
+function submit() {
+    formRef.value.validate((valid) => {
+        if (valid) {
+            // 提交审批逻辑
+            const data = { ...form };
+            emits("update:data", data);
+            emits("submit", "returnSubmit");
+            emits("close");
+        }
+    });
+}
+</script>
+<style lang="scss" scoped>
+</style>
\ No newline at end of file
diff --git a/src/views/reportpolice/ReportDialog.vue b/src/views/reportpolice/ReportDialog.vue
new file mode 100644
index 0000000..91c775d
--- /dev/null
+++ b/src/views/reportpolice/ReportDialog.vue
@@ -0,0 +1,521 @@
+<template>
+    <el-dialog
+        v-model="visible"
+        :show-close="false"
+        width="84vw"
+        top="2vh"
+        class="dialog-header-nopadding"
+        style="--el-dialog-padding-primary: 10px; margin-bottom: 2vh"
+    >
+        <template #header="{ close, titleId, titleClass }">
+            <header class="flex between v-center dialog-header">
+                <div class="ml-16">
+                    <span class="mr-8 second">{{report.contactName}}  的110举报投诉</span>
+                </div>
+                <div class="flex">
+                    <!-- #FA8695 -->
+                    <el-button
+                        link
+                        circle
+                        size="large"
+                        @click="close"
+                        class="close-btn"
+                    >
+                        <template #icon>
+                            <icon
+                                name="el-icon-close"
+                                :size="26"
+                                :color="'#fff'"
+                            />
+                        </template>
+                    </el-button>
+                </div>
+            </header>
+        </template>
+        <main v-loading="loading">
+            <el-row :gutter="20" style="height: 100%">
+                <el-col :span="8" style="height: 100%">
+                    <div class="left-container h100">
+                    </div>
+                </el-col>
+                <el-col :span="16" style="height: 100%">
+                    <el-scrollbar max-height="100%" class="main-container">
+                        <div>
+                            <div class="ml-20 mt-20 mt-15 mr-20 report-card">
+                            <el-row >
+                                <h3>报警信息</h3>
+                            </el-row>
+                            <el-row class="my-cow">
+                                <el-col :span="2" >
+                                    <span>电话机主</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item"></span>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>报警电话</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.contactPhone}}</span>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>摘机时间</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item"></span>
+                                </el-col>
+                            </el-row>
+                            <el-row class="my-cow">
+                                <el-col :span="2">
+                                    <span>话终时间</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.hzsj}}</span></el-col>
+                                <el-col :span="2">
+                                    <span>报警类型</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.jjlxdmms}}</span>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>报警坐标</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.bjzb}}</span>
+                                </el-col>
+                            </el-row>
+                            <el-row class="my-cow">
+                                <el-col :span="2">
+                                    <span>案发地址</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.afdd}}</span>
+                                </el-col>
+                            </el-row>
+                            <el-row class="my-cow">
+                                <el-col :span="2">
+                                    <span>报警人名</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.contactName}}</span></el-col>
+                                <el-col :span="2">
+                                    <span>性别</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item"></span>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>身份</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item"></span>
+                                </el-col>
+                            </el-row>
+                            <el-row class="my-cow">
+                                <el-col :span="2">
+                                    <span>联系电话</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.bjrlxdh}}</span></el-col>
+                                <el-col :span="2">
+                                    <span>警情标签</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item"></span>
+                                </el-col>
+                            </el-row>
+                            <el-row class="my-cow">
+                                <el-col :span="2">
+                                    <span>结警性质</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item"></span>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>接警性质</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.ysjqxzmc}}</span>
+                                </el-col>
+                            </el-row>
+                            <el-row class="my-cow">
+                                <el-col :span="2">
+                                    <span>管辖单位</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.gxdwmc}}</span>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>所属警区</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item"></span>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>乡镇街道</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item"></span>
+                                </el-col>
+                            </el-row>
+                            <el-row class="my-cow" >
+                                <el-col :span="2">
+                                    <span>警情级别</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.jqjbms}}</span>
+                                </el-col>
+                                <el-col :span="2">
+                                    <span>警情阶段</span>
+                                </el-col>
+                                <el-col :span="6">
+                                    <span  class="span-item">{{report.jjdztms}}</span>
+                                </el-col>
+                            </el-row>
+                            </div>        
+                            <div class="ml-20 mt-20 mt-15 mr-20 report-card">
+                                <el-row >
+                                    <h3>报警内容</h3>
+                                </el-row>
+                                <el-row class="cow-content" >
+                                <el-col :span="20">
+                                    <span  class="span-item">{{report.content}}</span>
+                                </el-col>
+                            </el-row>
+                            </div>
+                            <div class="ml-20 mt-20 mt-15 mr-20 report-card">
+                                <el-row >
+                                    <h3>反馈结警</h3>
+                                </el-row>
+                                <el-row class="cow-content">
+                                <el-col :span="20">
+                                    <span  class="span-item">{{report.xchfnr}}</span>
+                                </el-col>
+                            </el-row>
+                            </div>
+                        </div>
+                        
+                        <div style="height: 20px"></div>
+                    </el-scrollbar>
+                </el-col>
+            </el-row>
+        </main>
+        <footer class="flex between">
+            <div></div>
+            <div style="margin-left: auto;">
+                <el-button 
+                type="danger"
+                size="large"
+                @click="addIntoBad"
+                >不纳入信件</el-button
+            >
+            <el-button 
+                type="primary"
+                size="large"
+                @click="addInto"
+                >纳入信件</el-button
+            >
+            </div>
+        </footer>
+
+    </el-dialog>
+    <Message ref="messageRef" />
+    <IntoBad
+        v-model="returnShow"
+        v-model:data="requestData"
+        @submit="submitAction()"
+        @close="returnShow = false"
+    />
+</template>
+<script setup>
+import IntoBad from "./IntoBad.vue";
+import { useDictData } from "@/hooks/useDictOptions";
+import feedback from "@/utils/feedback";
+import { timeDiffSeconds, formatTimeText, getDictLable } from "@/utils/util";
+import { getReportDetail,addIntoMail,addIntoBadMail } from "@/api/report";
+const loading = ref(false);
+const messageRef = ref();
+
+const emits = defineEmits(["update:show", "update"]);
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    reportId: {
+        type: String,
+        default: "",
+    },
+});
+const returnShow = ref(false);
+const visible = ref(props.show);
+const requestData = ref({});
+watch(visible, (val) => {
+    emits("update:show", val);
+});
+watch(
+    () => props.show,
+    (val) => {
+        visible.value = val;
+    }
+);
+const report = ref({});
+async function getDetail() {
+    loading.value = true;
+    // 信件详情
+    let data;
+    data = await getReportDetail({id : props.reportId});
+    loading.value = false;
+    report.value = data;
+}
+
+function addInto() {
+    loading.value = true;
+    addIntoMail({id : props.reportId}).then(() => {
+        messageRef.value.showMessage("已成功纳入信件");
+    visible.value = false;
+    emits("update");
+    loading.value = false;
+    return;
+            });
+}
+
+function addIntoBad() {
+    returnShow.value = true;
+    return;
+}
+
+function submitAction() {
+    loading.value = true;
+    returnShow.value = false;
+    addIntoBadMail({id:props.reportId,reason:requestData.value.reason}).then(() => {
+    messageRef.value.showMessage("不纳入信件成功");
+    emits("update");
+    visible.value = false;
+    loading.value = false;
+    return;
+            });
+    
+}
+
+
+watch(
+    () => props.reportId,
+    (val) => {
+        getDetail();
+    }
+);
+
+
+
+
+
+</script>
+<style lang="scss" scoped>
+
+
+.cow-content{
+    margin-left: 20px;
+    margin-bottom: 8px;
+}
+.my-cow{
+    margin-left: 100px;
+    margin-bottom: 15px;
+}
+.span-item{
+        color: #333333;
+}
+.report-card{
+    border-bottom: 1px solid #F0F0F0;
+}
+.dialog-header {
+    --dialog-header-font-color: #acb7ff;
+    --dialog-header-font-size: 16px;
+    background-color: var(--primary-color);
+    color: #fff;
+    padding: 1em;
+    font-size: var(--dialog-header-font-size);
+    .second {
+        color: var(--dialog-header-font-color);
+    }
+    .step-box {
+        .step {
+            --setp-background-color: #3a4dc1;
+            --setp-border-color: #4b60e4;
+            --setp-font-color: var(--dialog-header-font-color);
+            --setp-font-size: var(--dialog-header-font-size);
+            padding-left: 30px;
+            padding-right: 16px;
+            &::after {
+                display: none;
+            }
+            &:first-child {
+                padding-left: 16px;
+            }
+            &[active="true"] {
+                --setp-background-color: #ff4242;
+                --setp-border-color: #ff7474;
+                --setp-font-color: #fff;
+            }
+            .bloder {
+                font-size: 24px;
+                font-weight: 700;
+                margin-right: 8px;
+            }
+            span {
+                z-index: 2;
+            }
+        }
+    }
+    .fav-btn {
+        --el-font-size-base: 18px;
+        --el-button-bg-color: #283aac;
+        --el-button-hover-bg-color: #c20921;
+        --el-button-hover-border-color: #fa8695;
+        &.active {
+            --el-button-bg-color: #c20921;
+        }
+        &:focus {
+            background-color: var(--el-button-bg-color);
+        }
+    }
+    .close-btn:hover {
+        :deep() {
+            .el-icon {
+                color: #c20921;
+            }
+        }
+    }
+}
+.left-container {
+    padding: 0 20px 0 40px;
+}
+.timer {
+    --large-font-color: var(--primary-color);
+    --default-font-color: #999;
+    color: var(--default-font-color);
+    .error {
+        --large-font-color: #fff;
+        --default-font-color: #fff;
+        background: linear-gradient(180deg, #ff7158 0%, #f40000 100%);
+        border: 4px solid #ffcdcd;
+        border-radius: 11px;
+        box-sizing: border-box;
+        margin-bottom: 20px;
+        height: 190px;
+        width: 100%;
+    }
+}
+.timer-box {
+    height: 210px;
+}
+.flow {
+    .flow-header {
+        background: #f5f6ff;
+        padding: 8px;
+        font-size: 12px;
+    }
+    .flow-container {
+        background-color: #eff0f5;
+        padding: 12px 8px;
+        min-height: 120px;
+        font-size: 12px;
+        .second {
+            color: #999;
+        }
+        .primary {
+            color: var(--primary-color);
+            font-weight: 500;
+        }
+        .flow-time {
+            display: inline-flex;
+            padding: 6px;
+            margin-left: 6px;
+            background-color: #f5f6ff;
+            border-left: 2px solid #00d050;
+            padding-left: 20px;
+            &[danger="true"] {
+                border-color: #ff0000;
+                span {
+                    color: #ff0000;
+                }
+            }
+        }
+        .flow-info {
+            position: relative;
+            padding-left: 20px;
+            &::before {
+                display: block;
+                content: "";
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                background-color: #bfbfbf;
+                position: absolute;
+                left: 0;
+                top: 50%;
+                transform: translateY(-50%);
+            }
+        }
+        & > div:first-child .flow-info::before {
+            width: 12px;
+            height: 12px;
+            background-color: var(--primary-color);
+        }
+    }
+}
+
+main {
+    height: calc(96vh - 180px);
+}
+.main-container {
+    margin-top: -30px;
+    padding: 0 20px;
+}
+footer {
+    padding: 10px 20px 0;
+}
+:deep() {
+    h2 {
+        font-size: 24px;
+        font-weight: 500;
+        color: var(--primary-color);
+        margin: 12px 0;
+    }
+    h3 {
+        font-size: 16px;
+        font-weight: 500;
+        color: var(--primary-color);
+    }
+    .content {
+        font-size: 15px;
+        padding: 8px;
+        color: #333;
+        white-space: pre-wrap;
+    }
+
+    .file-box {
+        img {
+            width: 80px;
+            height: 80px;
+        }
+    }
+    .el-button.is-disabled {
+        --el-button-disabled-bg-color: #b0b0b0;
+        --el-button-disabled-border-color: #b0b0b0;
+        --el-button-disabled-text-color: #fff;
+    }
+    .card-info {
+        background: #f4f5ff;
+        border: 1px solid rgba(195, 202, 245, 1);
+        padding: 12px 20px;
+    }
+    span[danger="true"] {
+        color: var(--danger-color);
+    }
+    .timer-box .el-progress-circle {
+        height: 240px !important;
+        width: 240px !important;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/reportpolice/report.vue b/src/views/reportpolice/report.vue
new file mode 100644
index 0000000..1a8cea7
--- /dev/null
+++ b/src/views/reportpolice/report.vue
@@ -0,0 +1,179 @@
+<template>
+    <div class="container">
+        <header>
+            <el-form :label-width="120">
+                <el-row>
+                    <el-col :span="6">
+                        <el-form-item label="报警电话">
+                            <el-input
+                                    v-model="query.contactPhone"
+                                    placeholder="请输入报警电话"
+                                    clearable
+                                />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="话终时间">
+                            <el-date-picker v-model="query.searchTime" value-format="YYYY-MM-DD HH:mm:ss"
+                                type="datetimerange" format="YYYY-MM-DD HH:mm:ss" range-separator="~"
+                                start-placeholder="开始日期" end-placeholder="结束日期" @change="handleMailTimeQuery" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="报警类型">
+                            <el-select v-model="query.type" placeholder="请选择层级"  clearable filterable>
+                                <el-option v-for="item in optionsData.type" :key="item.id" :label="item.labelName"
+                                    :value="item.labelName" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="报警人名">
+                            <el-input
+                                    v-model="query.contactName"
+                                    placeholder="请输入报警人名"
+                                    clearable
+                                />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="接警性质">
+                            <el-select v-model="query.nature" placeholder="请选择层级"  clearable filterable>
+                                <el-option v-for="item in optionsData.nature" :key="item.id" :label="item.labelName"
+                                    :value="item.labelName" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="管辖单位">
+                            <el-input
+                                    v-model="query.unit"
+                                    placeholder="请输入管辖单位"
+                                    clearable
+                                />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <div class="flex end mb-20">
+                    <el-button type="primary" @click="getList">查询</el-button>
+                    <el-button @click="reset">重置</el-button>
+                </div>
+            </el-form>
+        </header>
+        <main>
+                
+                    <div class="table-container">
+                    <el-table :data="report" style="width: 100%" >
+                        <el-table-column prop="contactPhone" label="报警电话" align="center" width="160" />
+                        <el-table-column prop="hzsj"  label="话终时间" align="center" width="160" />
+                        <el-table-column prop="contactName" label="报警人名"  align="center" />
+                        <el-table-column prop="jjlxdmms" label="报警类型"  align="center"/>
+                        <el-table-column prop="ysjqxzmc" label="接警性质"  align="center"/>
+                        <el-table-column prop="gxdwmc" label="管辖单位"  align="center"/>
+                        <el-table-column prop="content" show-overflow-tooltip label="报警内容"  align="center"/>
+                        <el-table-column prop="xchfnr" show-overflow-tooltip label="反馈结警"  align="center"/>
+                        <el-table-column label="操作" fixed="right" align="center">
+                        <template #default="{ row }">
+                            <el-button
+                                type="primary"
+                                link
+                                @click="handleMail(row)"
+                                >立即处理</el-button
+                            >
+                        </template>
+                        </el-table-column>
+                    </el-table>
+                    </div>                   
+            <div class="flex mt-4 end">
+                <el-pagination @size-change="getList" @current-change="getList" :current-page="query.current"
+                    :page-sizes="[10, 20, 50]" :page-size="query.size" v-model:current-page="query.current"
+                    layout="total,sizes, prev, pager, next, jumper" :total="totalSize.total">
+                </el-pagination>
+            </div>
+        </main>
+    </div>
+
+    <ReportDialog v-model:show="showModel"  :disabled="true" :reportId="activeReportId"
+        @update="getList" />
+</template>
+<script lang="ts" setup>
+import ReportDialog from "./ReportDialog.vue";
+import { getReport,naturelist,typelist } from '@/api/report'
+import { ref, reactive, watchEffect } from "vue";
+import { useDictOptions } from '@/hooks/useDictOptions'
+
+const activeReportId = ref("");
+const query = ref({
+    size: 10,
+    current: 1
+});
+const totalSize = reactive({
+    total: 0,
+    pages: 0
+})
+const activeTab = ref('table1');
+const report = ref([]);
+const showModel = ref(false);
+function handleMail(row) {
+    showModel.value = true;
+    activeReportId.value = row.id;
+}
+function getList() {
+    getReport(query.value).then((data) => {
+        console.log("dddddddddddddddddddddddddddddddddddddddd")
+        report.value = data.records;
+        totalSize.total = data.total;
+        totalSize.pages = data.pages;
+    });
+}
+
+function reset() {
+    query.value = {}
+    getList()
+}
+
+getList()
+
+const handleMailTimeQuery = (val: any) => {
+    if (val) {
+        query.value.searchStartTime = val[0];
+        query.value.searchEndTime = val[1];
+    } else {
+        delete query.value.searchStartTime
+        delete query.value.searchEndTime
+    }
+}
+const { optionsData } = useDictOptions<{
+    type: any[]
+    nature:any[]
+}>({
+    type: {
+        api: typelist
+    },
+    nature: {
+        api: naturelist
+    },
+})
+</script>
+<style lang="scss" scoped>
+.success {
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px;
+    text-align: center;
+
+    .text {
+        color: #128009;
+    }
+}
+
+.error {
+    background-color: #ff0000;
+    color: #fff;
+    padding: 0 8px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 20px;
+    text-align: center;
+}
+</style>
\ No newline at end of file