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