parent
b91bbdc6a8
commit
073532ff7c
@ -0,0 +1,25 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function home(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/chart/home',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function income(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/chart/income',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function effct(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/chart/effct',
|
||||
params
|
||||
})
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
export function home(params){
|
||||
return request({
|
||||
method:'get',
|
||||
url:'/api/admin/chart/home',
|
||||
params
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,369 @@
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
type:{
|
||||
type:String,
|
||||
default:"normal"
|
||||
//"normal" "form"
|
||||
},
|
||||
//对话框宽度
|
||||
width:{
|
||||
type:Number,
|
||||
default:55
|
||||
},
|
||||
isShow:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
title:{
|
||||
type:String,
|
||||
default: ''
|
||||
},
|
||||
form:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
rules:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {}
|
||||
}
|
||||
},
|
||||
okText:{
|
||||
type:String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
res:{}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formItemContentRender(item){
|
||||
let content;
|
||||
switch(item.type){
|
||||
case "input":
|
||||
content = (
|
||||
<el-input
|
||||
placeholder={`请输入${item.label}`}
|
||||
value={this.res[item.prop]}
|
||||
style={item.style ?? {'width':'300px'}}
|
||||
on={{['input']:e=>{
|
||||
this.$set(this.res,item.prop,e)
|
||||
//this.res[item.prop] = e
|
||||
}}}>
|
||||
</el-input>
|
||||
)
|
||||
break;
|
||||
case "select":
|
||||
content = (
|
||||
<el-select
|
||||
placeholder={`请选择${item.label}`}
|
||||
value={this.res[item.prop]}
|
||||
style={item.style ?? {'width':'300px'}}
|
||||
on={{['change']:e => this.res[item.prop] = e}}>
|
||||
{
|
||||
item.data.map(item => {
|
||||
return (
|
||||
<el-option label={item.options?.label ? item[item.options?.label] : item.label}
|
||||
value={item.options?.value ? item[item.options?.value] : item.id}>
|
||||
</el-option>
|
||||
)
|
||||
})
|
||||
}
|
||||
</el-select>
|
||||
)
|
||||
break;
|
||||
case "timePicker":
|
||||
content = (
|
||||
<el-time-picker
|
||||
value-format={item.valueFormat ?? "hh:mm:ss"}
|
||||
placeholder={`请选择${item.label}`}
|
||||
value={this.res[item.prop]}
|
||||
picker-options={item.options}
|
||||
on={{['change']:e => this.res[item.prop] = e}}>
|
||||
</el-time-picker>
|
||||
)
|
||||
break;
|
||||
case "datePicker":
|
||||
content = (
|
||||
<el-date-picker
|
||||
type={item.dateType ?? 'date'}
|
||||
value-format={item.valueFormat ?? "yyyy-MM-dd"}
|
||||
value={this.res[item.prop]}
|
||||
placeholder={`请选择${item.label}`}
|
||||
picker-options={item.options}
|
||||
on={{['change']:e => this.res[item.prop] = e}}>
|
||||
</el-date-picker>
|
||||
)
|
||||
break;
|
||||
case "inputNumber":
|
||||
content = (
|
||||
<el-input-number
|
||||
precision={item.precision}
|
||||
control={false}
|
||||
placeholder={`请输入${item.label}`}
|
||||
value={this.res[item.prop]}
|
||||
on={{['change']:e => this.res[item.prop] = e}}>
|
||||
</el-input-number>
|
||||
)
|
||||
break;
|
||||
}
|
||||
return content
|
||||
},
|
||||
footerRender(){
|
||||
if(this.type === 'form'){
|
||||
return (
|
||||
<div>
|
||||
<Button ghost type="primary" on-click={this.reset}>重置</Button>
|
||||
<Button type="primary" on-click={this.submit}>{this.okText || '确定'}</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
if(this.type === 'normal'){
|
||||
return (
|
||||
<div>
|
||||
<Button ghost type="primary" on-click={()=>{this.$emit('update:isShow',false)}}>取消</Button>
|
||||
<Button type="primary" on-click={()=>{this.$emit('on-ok')}}>{this.okText || '确定'}</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
showChange(e){
|
||||
this.$emit('update:isShow',e)
|
||||
},
|
||||
validate(){
|
||||
return new Promise((resolve,reject)=>{
|
||||
this.$refs['elForm'].validate().then(res=>{
|
||||
if(res){
|
||||
resolve(res)
|
||||
}else{
|
||||
reject(res)
|
||||
}
|
||||
}).catch(err=>{
|
||||
reject(err)
|
||||
this.$Message.warning({
|
||||
content:'请填写完整信息',
|
||||
duration:1
|
||||
})
|
||||
})
|
||||
})
|
||||
},
|
||||
reset(){
|
||||
this.$emit('reset')
|
||||
if(this.type === 'normal'){
|
||||
return
|
||||
}
|
||||
this.$refs['elForm'].resetFields()
|
||||
},
|
||||
clearValidate(){
|
||||
this.$emit('clearValidate')
|
||||
if(this.type === 'normal'){
|
||||
return
|
||||
}
|
||||
this.$refs['elForm'].clearValidate()
|
||||
},
|
||||
submit(){
|
||||
if(this.type === 'normal'){
|
||||
return
|
||||
}
|
||||
this.$refs['elForm'].validate().then(res=>{
|
||||
if(res){
|
||||
this.$emit('submit',this.res)
|
||||
}
|
||||
}).catch(err=>{
|
||||
this.$Message.warning({
|
||||
content:'请填写完整信息',
|
||||
duration:1
|
||||
})
|
||||
})
|
||||
},
|
||||
okClick(){
|
||||
this.$emit('on-ok')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.forEach(item => {
|
||||
Object.defineProperty(this.res,item.prop,{
|
||||
value:item.value,
|
||||
enumerable:true,
|
||||
writable:true,
|
||||
configurable:true
|
||||
})
|
||||
})
|
||||
},
|
||||
watch:{
|
||||
isShow(val){
|
||||
this.$emit('show-change',val)
|
||||
if(!val && this.type === 'form'){
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
/*
|
||||
type='form' slot:
|
||||
extraFormTop
|
||||
extraFormBottom
|
||||
{表单名}
|
||||
type='normal' slot:
|
||||
normalContent
|
||||
footer slot:
|
||||
footerContent
|
||||
*/
|
||||
const {res,okText,okClick,formItemContentRender,footerRender,width,type,$scopedSlots,rules,form,showChange,isShow,title} = this
|
||||
return (
|
||||
<Modal
|
||||
ok-text={okText}
|
||||
class-name={'vertical-center-modal'}
|
||||
width={width}
|
||||
title={title}
|
||||
value={isShow}
|
||||
on={{['on-visible-change']:showChange,['on-ok']:okClick}}
|
||||
scopedSlots={{
|
||||
default(){
|
||||
if(type === "form"){
|
||||
return (
|
||||
<el-form
|
||||
style={title.length === 0 ? {'margin-top':'32px'} : {}}
|
||||
ref="elForm"
|
||||
props={{
|
||||
model:res,
|
||||
rules
|
||||
}}>
|
||||
{ form.map(item => {
|
||||
if(!item.hidden){
|
||||
if($scopedSlots[item.prop]){
|
||||
return (
|
||||
<el-form-item label={item.label} prop={item.prop}>
|
||||
{ $scopedSlots[item.prop]() }
|
||||
</el-form-item>
|
||||
)
|
||||
}else{
|
||||
return (
|
||||
<el-form-item label={item.label} prop={item.prop}>
|
||||
{ formItemContentRender(item) }
|
||||
</el-form-item>
|
||||
)
|
||||
}
|
||||
}
|
||||
}) }
|
||||
</el-form>
|
||||
)
|
||||
}else{
|
||||
return (
|
||||
<div
|
||||
style={title.length === 0 ? {'margin-top':'32px'} : {}}>
|
||||
{$scopedSlots.default ? $scopedSlots.default() : ''}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
header(){
|
||||
if($scopedSlots.headerContent){
|
||||
return $scopedSlots.headerContent()
|
||||
}
|
||||
},
|
||||
footer(){
|
||||
{
|
||||
if(type === 'form' || type === 'normal') return ($scopedSlots.footerContent ? $scopedSlots.footerContent() : footerRender())
|
||||
}
|
||||
}
|
||||
}}>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.xy-table-item-label{
|
||||
width: 140px;
|
||||
text-align: right;
|
||||
}
|
||||
.xy-table-item-min{
|
||||
position: relative;
|
||||
&::after{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
content:'（分钟）'
|
||||
}
|
||||
::v-deep .el-input__clear{
|
||||
position: relative;
|
||||
right: 46px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.xy-table-item-price{
|
||||
position: relative;
|
||||
&::after{
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
content:'（元）'
|
||||
}
|
||||
::v-deep .el-input__clear{
|
||||
position: relative;
|
||||
right: 30px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
.xy-table-item-price-wan{
|
||||
position: relative;
|
||||
&::after{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
content:'（万元）'
|
||||
}
|
||||
::v-deep .el-input__clear{
|
||||
position: relative;
|
||||
right: 46px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-center-modal{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.ivu-modal{
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.ivu-modal-body{
|
||||
max-height: 65vh !important;
|
||||
min-height: 300px;
|
||||
overflow: scroll;
|
||||
|
||||
}
|
||||
.xy-table-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding-right: 80px;
|
||||
&-label{
|
||||
|
||||
padding: 0 20px;
|
||||
}
|
||||
&-content{
|
||||
|
||||
}
|
||||
}
|
||||
.el-form-item{
|
||||
flex-shrink: 0;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
.el-form-item__error{
|
||||
white-space: nowrap;
|
||||
word-break: keep-all !important;
|
||||
top: 100% !important;
|
||||
left: calc(100% - 80px) !important;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,17 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<lx-header icon="md-apps" style="margin-bottom: 10px; border: 0px; margin-top: 15px" text="人效统计">
|
||||
<div slot="content"></div>
|
||||
<slot>
|
||||
<div>
|
||||
<el-date-picker
|
||||
type="month"
|
||||
size="small"
|
||||
v-model="select.month"
|
||||
value-format="yyyy-MM"
|
||||
style="width: 200px;">
|
||||
</el-date-picker>
|
||||
|
||||
<el-button size="small" type="primary" style="margin-left: 10px;" @click="getEffct">查询</el-button>
|
||||
</div>
|
||||
</slot>
|
||||
</lx-header>
|
||||
|
||||
<div style="display: flex;margin-top: 20px">
|
||||
<doughnutChart :data="data.product_type_list"></doughnutChart>
|
||||
<barChart :data="data.area"></barChart>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {effct} from '@/api/chart'
|
||||
|
||||
|
||||
import doughnutChart from './peopleComponents/doughnutChart'
|
||||
import barChart from "./peopleComponents/barChart";
|
||||
export default {
|
||||
components:{
|
||||
doughnutChart,
|
||||
barChart
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
select:{
|
||||
month:`${new Date().getFullYear()}-${new Date().getMonth()+1}`
|
||||
},
|
||||
data:{},
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
|
||||
methods: {
|
||||
async getEffct(){
|
||||
let res = await effct(this.select)
|
||||
console.log(res)
|
||||
this.data = res
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getEffct()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
Reference in new issue