4 changed files with 668 additions and 457 deletions
@ -0,0 +1,28 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
export function consoleData(params?: Record<string, any>) { |
||||||
|
return request.get({ url: '/dataScreen/consoleData', params }) |
||||||
|
} |
||||||
|
|
||||||
|
export function peopleMail(params?: Record<string, any>) { |
||||||
|
return request.get({ url: '/dataScreen/peopleMail', params }) |
||||||
|
} |
||||||
|
export function mailTypeRank(params?: Record<string, any>) { |
||||||
|
return request.get({ url: '/dataScreen/mailTypeRank', params }) |
||||||
|
} |
||||||
|
|
||||||
|
export function mailTrend(params?: Record<string, any>) { |
||||||
|
return request.get({ url: '/dataScreen/mailTrend', params }) |
||||||
|
} |
||||||
|
export function mapCountyData(params?: Record<string, any>) { |
||||||
|
return request.get({ url: '/dataScreen/mapData', params }) |
||||||
|
} |
||||||
|
|
||||||
|
export function dutyDay(params: Record<string, any>) { |
||||||
|
return request.get({ url: '/dataScreen/dutyDay'}) |
||||||
|
} |
||||||
|
|
||||||
|
export function threeRate(params: Record<string, any>) { |
||||||
|
return request.get({ url: '/dataScreen/threeRate'}) |
||||||
|
} |
||||||
|
|
||||||
@ -0,0 +1,270 @@ |
|||||||
|
<template> |
||||||
|
<div class="details-popup"> |
||||||
|
<popup |
||||||
|
ref="popupRef" |
||||||
|
:title="popupTitle" |
||||||
|
:async="true" |
||||||
|
width="550px" |
||||||
|
:clickModalClose="true" |
||||||
|
@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> |
||||||
|
</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 feedback from '@/utils/feedback' |
||||||
|
import type { PropType } from 'vue' |
||||||
|
import { useDictOptions } from '@/hooks/useDictOptions' |
||||||
|
import { roleAll } from '@/api/perms/role' |
||||||
|
import { postAll } from '@/api/org/post' |
||||||
|
import { deptLists } from '@/api/org/department' |
||||||
|
import { searchPolice } from '@/api/perms/admin' |
||||||
|
import { usePaging } from '@/hooks/usePaging' |
||||||
|
import { loginCaptcha } from '@/api/user' |
||||||
|
import { isFunction } from 'lodash' |
||||||
|
defineProps({ |
||||||
|
dictData: { |
||||||
|
type: Object as PropType<Record<string, any[]>>, |
||||||
|
default: () => ({}) |
||||||
|
} |
||||||
|
}) |
||||||
|
const emit = defineEmits(['success', 'close']) |
||||||
|
const formRef = shallowRef<FormInstance>() |
||||||
|
const popupRef = shallowRef<InstanceType<typeof Popup>>() |
||||||
|
const mode = ref('add') |
||||||
|
const popupTitle = computed(() => { |
||||||
|
return mode.value == 'edit' ? '编辑值班信息' : '新增值班' |
||||||
|
}) |
||||||
|
|
||||||
|
const formData = reactive({ |
||||||
|
startTime: '', |
||||||
|
departId: '', |
||||||
|
departName: '', |
||||||
|
policeName: '', |
||||||
|
mobile: '', |
||||||
|
typeName: '', |
||||||
|
empNo: '', |
||||||
|
endTime: '', |
||||||
|
deptType: '' |
||||||
|
}) |
||||||
|
|
||||||
|
const { optionsData } = useDictOptions<{ |
||||||
|
deptTypes: any[], |
||||||
|
policeList: any[], |
||||||
|
dept: any[] |
||||||
|
}>({ |
||||||
|
dept: { |
||||||
|
api: deptLists |
||||||
|
}, |
||||||
|
deptTypes: { |
||||||
|
api: dictDataLists, |
||||||
|
params: { |
||||||
|
dictType: 'dept_type' |
||||||
|
} |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const formRules = { |
||||||
|
|
||||||
|
departId: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: '请输入', |
||||||
|
trigger: ['blur'] |
||||||
|
} |
||||||
|
], |
||||||
|
|
||||||
|
|
||||||
|
empNo: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: '请输入', |
||||||
|
trigger: ['blur'] |
||||||
|
} |
||||||
|
], |
||||||
|
startTime: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: '请选择', |
||||||
|
trigger: ['blur'] |
||||||
|
} |
||||||
|
], |
||||||
|
endTime: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: '请选择', |
||||||
|
trigger: ['blur'] |
||||||
|
} |
||||||
|
], |
||||||
|
deptType: [ |
||||||
|
{ |
||||||
|
required: true, |
||||||
|
message: '请选择', |
||||||
|
trigger: ['blur'] |
||||||
|
} |
||||||
|
], |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const handleSubmit = async () => { |
||||||
|
await formRef.value?.validate() |
||||||
|
const data: any = { ...formData } |
||||||
|
mode.value == 'edit' ? await dutyEdit(data) : await dutyAdd(data) |
||||||
|
popupRef.value?.close() |
||||||
|
feedback.msgSuccess('操作成功') |
||||||
|
emit('success') |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const open = (type = 'add') => { |
||||||
|
mode.value = type |
||||||
|
popupRef.value?.open() |
||||||
|
} |
||||||
|
|
||||||
|
const setFormData = async (data: Record<string, any>) => { |
||||||
|
for (const key in formData) { |
||||||
|
if (data[key] != null && data[key] != undefined) { |
||||||
|
//@ts-ignore |
||||||
|
if(key=='departId'){ |
||||||
|
formData[key]= parseInt( data[key]) |
||||||
|
}else{ |
||||||
|
formData[key] = data[key] |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
const getDetail = async (row: Record<string, any>) => { |
||||||
|
const data = await dutyDetail({ |
||||||
|
id: row.id |
||||||
|
}) |
||||||
|
setFormData(data) |
||||||
|
} |
||||||
|
const searchPoliceUser = (query: string) => { |
||||||
|
if (query) { |
||||||
|
setTimeout(() => { |
||||||
|
console.log(query) |
||||||
|
const params= { |
||||||
|
searchName: query |
||||||
|
} |
||||||
|
const policeList = searchPolice(params).then((res: any) => { |
||||||
|
optionsData.policeList=res; |
||||||
|
return Promise.resolve(res) |
||||||
|
}) |
||||||
|
.catch((err: any) => { |
||||||
|
return Promise.reject(err) |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
}, 200) |
||||||
|
} else { |
||||||
|
optionsData.policeList = [] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
const handleSelectChange = (newValue) => { |
||||||
|
formData.empNo=newValue |
||||||
|
console.log('选中的值：', newValue); |
||||||
|
}; |
||||||
|
const handleClose = () => { |
||||||
|
emit('close') |
||||||
|
} |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
open, |
||||||
|
setFormData, |
||||||
|
getDetail |
||||||
|
}) |
||||||
|
</script> |
||||||
@ -1,188 +0,0 @@ |
|||||||
<template> |
|
||||||
<div ref="echart5" id="echart5"style="width: 400px"></div> |
|
||||||
<!-- <el-tabs v-model="activeName" class="trend-tabs" type="card" @tab-click="handleTabClick">--> |
|
||||||
<!-- <el-tab-pane label="按天计算" name="first3">--> |
|
||||||
<!-- --> |
|
||||||
<!-- </el-tab-pane>--> |
|
||||||
<!-- <el-tab-pane label="按月计算" name="third4">--> |
|
||||||
|
|
||||||
<!-- </el-tab-pane>--> |
|
||||||
<!-- <el-tab-pane label="按年计算" name="third15">--> |
|
||||||
|
|
||||||
<!-- </el-tab-pane>--> |
|
||||||
|
|
||||||
<!-- </el-tabs>--> |
|
||||||
</template> |
|
||||||
<style> |
|
||||||
@import 'assets/css/index.css'; |
|
||||||
|
|
||||||
</style> |
|
||||||
<script lang="ts" setup> |
|
||||||
import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue'; |
|
||||||
import * as echarts from 'echarts'; |
|
||||||
import type {TabsPaneContext} from "element-plus"; |
|
||||||
|
|
||||||
const activeName = ref('first3'); |
|
||||||
const tabs = [ |
|
||||||
{ name: 'tab1', label: 'Tab 1' }, |
|
||||||
{ name: 'tab2', label: 'Tab 2' }, |
|
||||||
{ name: 'tab3', label: 'Tab 3' } |
|
||||||
]; |
|
||||||
const handleTabClick = (tab: TabsPaneContext, event: Event) => { |
|
||||||
console.log("Click event triggered!"+tab.name); |
|
||||||
//activeName = tab.props.name; |
|
||||||
} |
|
||||||
|
|
||||||
let echart_5 = ref('echart5'); |
|
||||||
onMounted(() => { |
|
||||||
echarts_5() |
|
||||||
|
|
||||||
}); |
|
||||||
const echarts_5=() => { |
|
||||||
// 基于准备好的dom，初始化echarts实例 |
|
||||||
var echartMap = echarts.init(echart_5.value); |
|
||||||
|
|
||||||
var lightBlue = { |
|
||||||
type: 'linear', |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
x2: 0, |
|
||||||
y2: 1, |
|
||||||
colorStops: [{ |
|
||||||
offset: 0, |
|
||||||
color: 'rgba(41, 121, 255, 1)' |
|
||||||
}, { |
|
||||||
offset: 1, |
|
||||||
color: 'rgba(0, 192, 255, 1)' |
|
||||||
}], |
|
||||||
globalCoord: false |
|
||||||
} |
|
||||||
let option = { |
|
||||||
tooltip: { |
|
||||||
trigger: 'axis', |
|
||||||
axisPointer: { |
|
||||||
lineStyle: { |
|
||||||
color: '#dddc6b' |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
legend: { |
|
||||||
top:'0%', |
|
||||||
right: '0%', |
|
||||||
data:['信件数'], |
|
||||||
textStyle: { |
|
||||||
color: 'rgba(255,255,255,.5)', |
|
||||||
fontSize:'12', |
|
||||||
} |
|
||||||
}, |
|
||||||
grid: { |
|
||||||
left: '10', |
|
||||||
top: '30', |
|
||||||
right: '10', |
|
||||||
bottom: '10', |
|
||||||
containLabel: true |
|
||||||
}, |
|
||||||
|
|
||||||
xAxis: [{ |
|
||||||
type: 'category', |
|
||||||
boundaryGap: false, |
|
||||||
axisLabel: { |
|
||||||
textStyle: { |
|
||||||
color: "rgba(255,255,255,.6)", |
|
||||||
fontSize:12, |
|
||||||
}, |
|
||||||
}, |
|
||||||
axisLine: { |
|
||||||
lineStyle: { |
|
||||||
color: 'rgba(255,255,255,.2)' |
|
||||||
} |
|
||||||
|
|
||||||
}, |
|
||||||
|
|
||||||
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'] |
|
||||||
|
|
||||||
}, { |
|
||||||
|
|
||||||
axisPointer: {show: false}, |
|
||||||
axisLine: { show: false}, |
|
||||||
position: 'bottom', |
|
||||||
offset: 20, |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}], |
|
||||||
|
|
||||||
yAxis: [{ |
|
||||||
type: 'value', |
|
||||||
axisTick: {show: false}, |
|
||||||
axisLine: { |
|
||||||
lineStyle: { |
|
||||||
color: 'rgba(255,255,255,.1)' |
|
||||||
} |
|
||||||
}, |
|
||||||
axisLabel: { |
|
||||||
textStyle: { |
|
||||||
color: "rgba(255,255,255,.6)", |
|
||||||
fontSize:12, |
|
||||||
}, |
|
||||||
}, |
|
||||||
|
|
||||||
splitLine: { |
|
||||||
lineStyle: { |
|
||||||
color: 'rgba(255,255,255,.1)' |
|
||||||
} |
|
||||||
} |
|
||||||
}], |
|
||||||
series: [ |
|
||||||
{ |
|
||||||
name: '信件数', |
|
||||||
type: 'line', |
|
||||||
smooth: true, |
|
||||||
symbol: 'circle', |
|
||||||
symbolSize: 5, |
|
||||||
showSymbol: false, |
|
||||||
lineStyle: { |
|
||||||
|
|
||||||
normal: { |
|
||||||
color: '#0184d5', |
|
||||||
width: 2 |
|
||||||
} |
|
||||||
}, |
|
||||||
areaStyle: { |
|
||||||
normal: { |
|
||||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ |
|
||||||
offset: 0, |
|
||||||
color: 'rgba(1, 132, 213, 0.4)' |
|
||||||
}, { |
|
||||||
offset: 0.8, |
|
||||||
color: 'rgba(1, 132, 213, 0.1)' |
|
||||||
}], false), |
|
||||||
shadowColor: 'rgba(0, 0, 0, 0.1)', |
|
||||||
} |
|
||||||
}, |
|
||||||
itemStyle: { |
|
||||||
normal: { |
|
||||||
color: '#0184d5', |
|
||||||
borderColor: 'rgba(221, 220, 107, .1)', |
|
||||||
borderWidth: 12 |
|
||||||
} |
|
||||||
}, |
|
||||||
data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4,3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4] |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
] |
|
||||||
|
|
||||||
}; |
|
||||||
|
|
||||||
// 使用刚指定的配置项和数据显示图表。 |
|
||||||
echartMap.setOption(option); |
|
||||||
window.addEventListener("resize",function(){ |
|
||||||
echartMap.resize(); |
|
||||||
}); |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
/* 样式定义 */ |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue