police-mailbox
/
mailbox-lan-vue
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

提交

master
OUMYYE\Administrator 2 years ago
parent
dd7b2e190b
commit
033f5e9018
6 changed files with 667 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      .gitignore
  2. 151
      src/components/popup/details.vue
  3. 5
      src/router/routes.ts
  4. 4
      src/views/datascreen/assets/css/index.css
  5. 556
      src/views/datascreen/details.vue
  6. 54
      src/views/datascreen/index.vue

3
.gitignore vendored
Unescape View File

@ -10,5 +10,4 @@ dist
*.mjs
*.map
*.css
*.map

151
src/components/popup/details.vue
Unescape View File

@ -0,0 +1,151 @@
<template>
<div class="dialog">
<div class="dialog__trigger" @click="open">
<!-- 触发弹窗 -->
<slot name="trigger"></slot>
</div>
<el-dialog
v-model="visible"
:custom-class="customClass"
:center="center"
:append-to-body="true"
:width="width"
:close-on-click-modal="clickModalClose"
@closed="close"
>
<!-- 弹窗内容 -->
<template v-if="title" #header>
<div >
<div class="title-number">受理编号：{{ number }}</div>
<div class="title-name"> {{ title }}</div></div>
</template>
<!-- 自定义内容 -->
<slot>{{ content }}</slot>
</el-dialog>
</div>
</template>
<script lang="ts">
export default defineComponent({
props: {
number: {
// 弹窗标题
type: String,
default: ''
},
title: {
// 弹窗标题
type: String,
default: ''
},
content: {
// 弹窗内容
type: String,
default: ''
},
confirmButtonText: {
// 确认按钮内容
type: [String, Boolean],
default: '确定'
},
cancelButtonText: {
// 取消按钮内容
type: [String, Boolean],
default: '取消'
},
width: {
// 弹窗的宽度
type: String,
default: '400px'
},
disabled: {
// 是否禁用
type: Boolean,
default: false
},
async: {
// 是否开启异步关闭
type: Boolean,
default: false
},
clickModalClose: {
// 点击遮罩层关闭对话窗口
type: Boolean,
default: false
},
center: {
// 是否居中布局
type: Boolean,
default: false
},
customClass: {
type: String,
default: ''
}
},
emits: ['confirm', 'cancel', 'close', 'open'],
setup(props, { emit }) {
const visible = ref(false)
const handleEvent = (type: 'confirm' | 'cancel') => {
emit(type)
if (!props.async || type === 'cancel') {
close()
}
}
const close = () => {
visible.value = false
nextTick(() => {
emit('close')
})
}
const open = () => {
if (props.disabled) {
return
}
emit('open')
visible.value = true
}
provide('visible', visible)
return {
visible,
handleEvent,
close,
open
}
}
})
</script>
<style lang="scss">
.el-dialog{
margin-top: 60px
}
.dialog-body {
white-space: pre-line;
}
.title-number{
color:#fff;
position: absolute;
left: 200px;
font-size: 12px;
}
.title-name{
color: #fff;
position: relative;
margin: 0 auto;
text-align: center;
font-size: 20px;
line-height: 20px;
padding-bottom: 10px;
font-weight: 900;
}
.el-dialog__body{
background: #010457
}
</style>

5
src/router/routes.ts
Unescape View File

@ -20,6 +20,11 @@ export const routes = [
path: '/countyData',
component: () => import('@/views/datascreen/countyData.vue')
},
{
path: '/datascreen/details',
component: () => import('@/views/datascreen/details.vue')
},
{
path: '/layout',
component: LAYOUT,

4
src/views/datascreen/assets/css/index.css
Unescape View File

@ -13,10 +13,6 @@ a:active {
text-decoration: none;
color: #ffffff;
}
body{
background-image: url('@/assets/bg.png'); /* 背景图片的路径 */
background-size: cover; /* 背景图片大小适应容器 */
}
.header{
width: 824px;

556
src/views/datascreen/details.vue
Unescape View File

@ -1,97 +1,353 @@
<template>
<div class="details-popup">
<div class="details-popup" >
<popup
ref="popupRef"
:title="popupTitle"
:number="mailNumber"
:async="true"
width="550px"
width="1800px"
:clickModalClose="true"
@confirm="handleSubmit"
@close="handleClose"
@confirm="handleSubmit"
@close="handleClose"
>
<el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
<el-form-item label="部门" prop="departId">
<el-tree-select
class="flex-1"
v-model="formData.departId"
:data="optionsData.dept"
clearable
filterable
node-key="id"
:props="{
value: 'id',
label: 'name',
disabled(data: any) {
return !!data.isStop
}
}"
check-strictly
:default-expand-all="true"
placeholder="请选择部门"
/>
</el-form-item>
<el-form-item label="机构类型" prop="deptType">
<el-select
class="flex-1"
clearable
v-model="formData.deptType"
placeholder="请选择机构类型"
>
<el-option
v-for="(item, index) in optionsData.deptTypes.lists"
:key="index"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="名称" prop="empNo">
<!-- <el-input v-model="formData.policeName" placeholder="请输入" />-->
<el-select
v-model="formData.policeName"
filterable
class="flex-1"
clearable
remote
placeholder="请搜索名字/警号/手机号"
:remote-method="searchPoliceUser"
@change="handleSelectChange"
>
<el-option
v-for="(item, index) in optionsData.policeList"
:key="index"
:label="item.name"
:value="item.empNo"
/>
</el-select>
</el-form-item>
<el-form-item label="警号" prop="empNo">
<el-input v-model="formData.empNo" disabled="disabled" placeholder="请输入" />
</el-form-item>
<!-- <el-form-item label="手机号" prop="mobile">-->
<!-- <el-input v-model="formData.mobile" placeholder="请输入" />-->
<!-- </el-form-item>-->
<el-form-item label="值班日期" prop="startTime">
<daterange-picker
v-model:startTime="formData.startTime"
v-model:endTime="formData.endTime"
/>
</el-form-item>
</el-form>
<div class="details-main">
<div class="details-content">
<div >
<el-steps :active="2" finish-status="success" simple>
<el-step title="1 信件签收" />
<el-step title="2 联系群众" />
<el-step title="3 接访群众" />
<el-step title="4 核查办理" />
<el-step title="5 认定办结" />
</el-steps>
</div>
<div class="details">
<el-card class="info-card">
<div>
<el-row>
<el-col :span="1">
<span class="head-lable">受理编号</span>
</el-col>
<el-col :span="7">
<span class="head-value">2114131413423432423</span>
</el-col>
<el-col :span="1">
<span class="head-lable">信件分类</span>
</el-col>
<el-col :span="7">
<span class="head-value">张三</span>
</el-col>
<el-col :span="1">
<span class="head-lable">信件等级</span>
</el-col>
<el-col :span="7">
<span class="head-value">一般信件</span>
</el-col>
</el-row>
</div>
<div class="info-content ">
<div>
<div slot="header" class="info-header">
举报人/投诉人基本情况
</div>
<el-row>
<el-col :span="3">
<span class="info-label">姓名</span>
</el-col>
<el-col :span="3">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">性别</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">证件号码</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">联系电话</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
</el-row>
<hr >
</div>
<div>
<div slot="header" class="info-header">
举报/投诉对象基本情况
</div>
<el-row>
<el-col :span="3">
<span class="info-label">被举报对象</span>
</el-col>
<el-col :span="3">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">警号</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">性别</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">出生年月</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="info-label"></span>
</el-col>
<el-col :span="3">
<span class="info-value"></span>
</el-col>
<el-col :span="2">
<span class="info-label">工作单位</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
</el-row>
<hr >
</div>
<div>
<div slot="header" class="info-header">
举报/投诉反应主要问题
</div>
<el-row>
<el-col :span="24">
<div>11</div>
</el-col>
</el-row>
<hr >
</div>
<div>
<div slot="header" class="info-header">
领导接访情况
</div>
<el-row>
<el-col :span="3">
<span class="info-label">主单位签收时长</span>
</el-col>
<el-col :span="3">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">主单位联系群众时长</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="info-label">接访形式</span>
</el-col>
<el-col :span="3">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">是否一把手接访</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">接访领导</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="info-label">接访情况</span>
</el-col>
<el-col :span="21">
<span class="info-value">张三</span>
</el-col>
</el-row>
<hr >
</div>
<div>
<div slot="header" class="info-header">
核查办理情况
</div>
<el-row>
<el-col :span="3">
<span class="info-label">是否属实</span>
</el-col>
<el-col :span="3">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">是否需要问责</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="info-label">查证属实问题</span>
</el-col>
<el-col :span="21">
<span class="info-value">张三</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="info-label">核办结果</span>
</el-col>
<el-col :span="21">
<span class="info-value">张三</span>
</el-col>
</el-row>
<hr >
</div>
<div>
<div slot="header" class="info-header">
整改问责情况
</div>
<el-row>
<el-col :span="3">
<span class="info-label">责任追究</span>
</el-col>
<el-col :span="21">
<span class="info-value">张三</span>
</el-col>
</el-row>
<hr >
</div>
<div>
<div slot="header" class="info-header">
结果反馈情况
</div>
<el-row>
<el-col :span="3">
<span class="info-label">群众反应实现解决情况</span>
</el-col>
<el-col :span="3">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">办理反馈情况</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
</el-row>
<el-row>
<el-col :span="3">
<span class="info-label">回访人姓名</span>
</el-col>
<el-col :span="3">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">回访人电话</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
<el-col :span="2">
<span class="info-label">回访人警号</span>
</el-col>
<el-col :span="4">
<span class="info-value">张三</span>
</el-col>
</el-row>
<hr >
</div>
<div>
<div slot="header" class="info-header">
办结佐证材料
</div>
<el-row>
<el-col :span="3">
<span class="info-label">材料</span>
</el-col>
<el-col :span="21">
<span class="info-value">张三</span>
</el-col>
</el-row>
</div>
</div>
</el-card>
</div>
</div>
<div class="details-right">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type"
:color="activity.color"
:size="activity.size"
:hollow="activity.hollow"
:timestamp="activity.timestamp"
>
{{ activity.content }}
</el-timeline-item>
</el-timeline>
</div>
</div>
</popup>
</div>
</template>
<script lang="ts" setup>
import type { FormInstance, ListItem } from 'element-plus'
import { dutyEdit, dutyAdd, dutyDetail, dutyLists } from '@/api/duty'
import { dictDataDelete, dictDataLists, dictTypeAll } from '@/api/setting/dict'
import Popup from '@/components/popup/index.vue'
import Popup from '@/components/popup/details.vue'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
import { useDictOptions } from '@/hooks/useDictOptions'
@ -102,6 +358,7 @@ import { searchPolice } from '@/api/perms/admin'
import { usePaging } from '@/hooks/usePaging'
import { loginCaptcha } from '@/api/user'
import { isFunction } from 'lodash'
import { MoreFilled } from '@element-plus/icons-vue'
defineProps({
dictData: {
type: Object as PropType<Record<string, any[]>>,
@ -111,10 +368,11 @@ defineProps({
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const mode = ref('details')
const popupTitle = computed(() => {
return mode.value == 'edit' ? '编辑值班信息' : '新增值班'
return mode.value == 'details' ? '信件详情' : '信件详情'
})
const mailNumber='11111111111'
const formData = reactive({
startTime: '',
@ -128,6 +386,36 @@ const formData = reactive({
deptType: ''
})
const activities = [
{
content: 'Custom icon',
timestamp: '2018-04-12 20:46',
size: 'large',
color: '#0bbd87',
},
{
content: 'Custom color',
timestamp: '2018-04-03 20:46',
color: '#0bbd87',
},
{
content: 'Custom size',
timestamp: '2018-04-03 20:46',
size: 'large',
},
{
content: 'Custom hollow',
timestamp: '2018-04-03 20:46',
type: 'primary',
hollow: true,
},
{
content: 'Default node',
timestamp: '2018-04-03 20:46',
},
]
const { optionsData } = useDictOptions<{
deptTypes: any[],
policeList: any[],
@ -226,10 +514,10 @@ const setFormData = async (data: Record<string, any>) => {
}
const getDetail = async (row: Record<string, any>) => {
const data = await dutyDetail({
id: row.id
})
setFormData(data)
//const data = await dutyDetail({
// id: row.id
//})
//setFormData(data)
}
const searchPoliceUser = (query: string) => {
if (query) {
@ -268,3 +556,99 @@ defineExpose({
getDetail
})
</script>
<style scoped lang="scss">
.details-main{
width:1766px;
height:730px;
}
.details-content{
width:1400px;
height:700px;
float: left;
}
.details-right{
width:350px;
float: left;
margin-left: 10px;
padding-left: 10px;
padding-top: 10px;
background:#09256d
}
.details{
width:1400px;
height: 700px;
margin-top: 10px;
background: #09256D;
border: 1px solid #4E8FFF;
overflow: auto;
color:#fff;
}
.el-card{
border:0;
}
.info-card{
background: #09256D;
color:#fff;
}
.info-content {
margin-top: 20px;
}
.info-label {
font-weight: bold;
text-align: right;
display: block;
font-size: 12px;
color: #4E8FFF;
}
.info-value {
margin-left: 10px;
font-size: 12px;
}
hr {
border: none; /* 去掉默认边框 */
border-top: 1px solid #4E8FFF; /* 设置上边框为1px实线，颜色为黑色 */
}
.el-row {
line-height: 30px;
}
.info-header{
margin-bottom: 10px;
}
.details::-webkit-scrollbar {
width: 8px; /* 宽度 */
}
.details::-webkit-scrollbar-track {
background: #071a4e; /* 滚动条背景色 */
}
.details::-webkit-scrollbar-thumb {
background-clip: padding-box; /* 背景剪裁 */
border: 8px solid transparent; /* 边框 */
background-image: linear-gradient(180deg, #007FFF 0%, #0049FF 100%);
border-radius: 11px;
}
.details::-webkit-scrollbar-thumb:hover {
background: #0060fe; /* 鼠标悬停时的滚动条颜色 */
}
.head-value{
padding-left: 10px;
font-size: 14px;
}
.head-lable{
color: #4E8FFF;
font-size: 14px;
}
</style>

54
src/views/datascreen/index.vue
Unescape View File

@ -1,21 +1,19 @@
<template>
<!--头部-->
<div class="body">
<div class="header">
<img src="@/assets/logo.png">
</div>
<!--主体-->
<div class="main clearfix">
<div class="main-left">
<div class="box-container">
<div class="name-title" >
群众动态
</div>
<div class="boxLeftMailCon">
<ul class="mailUl">
<li v-for="item in peopleMaillist" :key="item.id">
<li v-for="item in peopleMaillist" :key="item.id" @click="queryDetails(item)">
<p>{{ item.contactName }} ：{{ item.contactPhone }}<span class="mailULspan">{{ item.mailState }}</span></p>
<p>{{ formatDate(item.createTime) }}</p>
</li>
@ -111,7 +109,7 @@
class="m-2"
:placeholder="selectTrend"
size="small"
style="width: 100px;z-index: 9999"
style="width: 100px;z-index: 3000"
@change="getMailTrend"
>
<el-option
@ -128,7 +126,7 @@
class="m-2"
:placeholder="selectTrend"
size="small"
style="width: 100px;z-index: 9999"
style="width: 100px;z-index: 3000"
@change="getMailTrend"
>
<el-option
@ -146,7 +144,7 @@
class="m-2"
:placeholder="selectTrend"
size="small"
style="width: 100px;z-index: 9999"
style="width: 100px;z-index: 3000"
@change="getMailTrend"
>
<el-option
@ -245,18 +243,28 @@
</div>
</div>
<edit-popup
<details-popup
v-if="showDetails"
ref="detailsRef"
@close="showDetails = false"
@success="closeDetails"
@close="closeDetails"
/>
</div>
</div>
</template>
<style>
<style >
@import 'assets/css/index.css';
.body{
background-image: url('@/assets/bg.png'); /* 背景图片的路径 */
background-size: cover; /* 背景图片大小适应容器 */
}
</style>
<script lang="ts" setup>
import { ref,onMounted,watch ,onBeforeUpdate ,onBeforeMount,onUnmounted} from 'vue'
import type { TabsPaneContext } from 'element-plus'
@ -319,7 +327,7 @@ const selectTrend= "请选择"
let seenDay=true
let seenWeek=false
let seenMonth=false
let mapShow=true
let trendDayOptions = [
{
value: '15',
@ -437,7 +445,7 @@ const getMapDataList = async () => {
onMounted(() => {
selectYear(10)
queryDetails()
getThreeRate();
getPopleMailLists();
getDutyDay();
@ -600,10 +608,14 @@ const changsMap = () =>{
map: "map",
},
tooltip: {
show: mapShow,
trigger: 'item',
position: 'right',
formatter: function(params){
console.log(params)
if (typeof params.data === 'undefined') {
}else{
var tt ='<div class="tooltip">'+
'<div class="tooltip-title" > '+params.name+'</div>'+
'<div class="tooltip-content" >'+
@ -616,6 +628,7 @@ const changsMap = () =>{
'<li>满意率 <span>'+params.data.satisfiedrate+'</span></li>'+
' </ul></div></div>'
return tt;
}
},
backgroundColor: '#031577', //
borderColor: '#0A2F86',
@ -1146,7 +1159,20 @@ const weekEcharts=() => {
myChart.resize(chartWidth);
});
}
const queryDetails = async (data: any) => {
mapShow=false
changsMap()
showDetails.value = false
await nextTick()
detailsRef.value?.open('details')
detailsRef.value?.getDetail(data)
}
const closeDetails=()=>{
mapShow=true
changsMap()
showDetails.value = false
}
</script>
<style>

Write Preview
Loading…
Cancel
Save