22 changed files with 113 additions and 490 deletions
@ -1,398 +0,0 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2023-11-06 13:39:13 |
|||
@ 备注: 首页 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import * as echarts from 'echarts'; //引入图形界面 |
|||
|
|||
import { useUserStore } from "@/store/modules/user"; |
|||
|
|||
|
|||
import { sendOrgCont } from '@/api/displayboardapi/types' |
|||
import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi' |
|||
|
|||
import UserInfo from "@/views/dashboard/components/userinfo.vue"; |
|||
|
|||
import DingLiangTongBiHuanBi from "@/views/dashboard/components/dltbhb.vue"; |
|||
|
|||
import EducationChart from "@/views/dashboard/components/education.vue"; |
|||
|
|||
const userStore = useUserStore(); |
|||
|
|||
const legendList = new Array |
|||
const seriesData = new Array |
|||
const orgListCont = ref<sendOrgCont>() |
|||
const educationOrgId = ref<number>(309) |
|||
//公司主部门 |
|||
const mainOrgList = ref<any[]>([]) |
|||
const targetListAry = ref<any[]>([]) |
|||
const targetXingListAry = ref<any[]>([]) |
|||
//定性同比环比分析 |
|||
const dingXingYear = ref<number>() |
|||
const dingXingOrg = ref<any>() |
|||
const dingXingTarget = ref<any>() |
|||
//定量指标目标达成 |
|||
const dingLiangDaChengYear = ref<number>() |
|||
const dingLiangDaChengOrg = ref<any>() |
|||
const dingLiangDaChengTarget = ref<any>() |
|||
//定量同比环比分析 |
|||
const dingLiangYear = ref<number>() |
|||
const dingLiangOrg = ref<any>() |
|||
const dingLiangTarget = ref<any>() |
|||
|
|||
const loadPage = ref(false) |
|||
/** |
|||
* 获取行政组织 |
|||
*/ |
|||
function getOrgList(){ |
|||
getOrgChiled({id:313}) |
|||
.then(( {data} )=>{ |
|||
console.log("获取行政组织-2-->",data) |
|||
orgListCont.value = data.list |
|||
educationOrgId.value = data.current |
|||
|
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
//根据行政组织获取指标 |
|||
const orgAboutTarget = (orgId:string,tarAttribute:number) =>{ |
|||
let sendIfo = { |
|||
id:orgId, |
|||
attribute:tarAttribute |
|||
} |
|||
targetListForDepartment(sendIfo) |
|||
.then((data:any) =>{ |
|||
console.log("获取指标-1-->",data) |
|||
if(tarAttribute==1){ |
|||
targetXingListAry.value = data.data |
|||
if(data.data&&data.data.length>0){ |
|||
dingXingTarget.value = data.data[0].id |
|||
} |
|||
}else{ |
|||
targetListAry.value = data.data |
|||
if(data.data&&data.data.length>0){ |
|||
dingLiangDaChengTarget.value = data.data[0].id |
|||
dingLiangTarget.value = data.data[0].id.toString() |
|||
} |
|||
} |
|||
|
|||
}) |
|||
.finally(() =>{ |
|||
loadPage.value = true |
|||
}) |
|||
} |
|||
|
|||
//所有行政组织月度画图对象 |
|||
const orgYearFullMonths = ref<any>() |
|||
const orgAllYears = ref<any>() //当前年 |
|||
const allOrgOneMonth = ref<any>() //指定月 |
|||
const oenOrgAllYears = ref<any>() //单一行政指定年 |
|||
const oenOrg = ref<any>() //单一行政组织 |
|||
//行政组织月度绩效 |
|||
const departmentYears = ref<any>(null) |
|||
|
|||
//渲染完页面再执行 |
|||
onMounted(() => { |
|||
let dataTime:any = new Date(); |
|||
console.log("dataTime--->",dataTime.getFullYear()) |
|||
let timeStrint:any = dataTime; |
|||
dingXingYear.value = dataTime |
|||
dingLiangDaChengYear.value = dataTime |
|||
dingLiangYear.value = dataTime |
|||
console.log("timeStrint-1-->",dataTime,dingLiangYear) |
|||
getOrgList(); |
|||
orgYearFullMonths.value = echarts.init(departmentYears.value) |
|||
let option = { |
|||
|
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: { |
|||
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'], |
|||
bottom:0 |
|||
}, |
|||
grid: { |
|||
top:"20px", |
|||
left: '1%', |
|||
right: '2%', |
|||
bottom: '30px', |
|||
containLabel: true |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'Email', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
data: [120, 132, 101, 134, 90, 230, 210] |
|||
}, |
|||
{ |
|||
name: 'Union Ads', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
data: [220, 182, 191, 234, 290, 330, 310] |
|||
}, |
|||
{ |
|||
name: 'Video Ads', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
data: [150, 232, 201, 154, 190, 330, 410] |
|||
}, |
|||
{ |
|||
name: 'Direct', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
data: [320, 332, 301, 334, 390, 330, 320] |
|||
}, |
|||
{ |
|||
name: 'Search Engine', |
|||
type: 'line', |
|||
stack: 'Total', |
|||
data: [820, 932, 901, 934, 1290, 1330, 1320] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
orgYearFullMonths.value.setOption(option) |
|||
}) |
|||
</script> |
|||
<template> |
|||
<div ref="masterBody" class="app-container" style="margin-top:10px;"> |
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;"> |
|||
<!--分厂数据统计--> |
|||
<div class="orgAllMothsTitle"> |
|||
<el-text class="titleInfo">2023年绩效成绩</el-text> |
|||
<el-date-picker |
|||
v-model="allOrgOneMonth" |
|||
type="year" |
|||
placeholder="请选择时间" |
|||
/> |
|||
</div> |
|||
<div ref="departmentYears" class="allOrgAxisCares"> |
|||
|
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<UserInfo :user-store="userStore" /> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;"> |
|||
<!--单月全厂统计--> |
|||
<div class="orgAllMothsTitle"> |
|||
<el-text class="titleInfo">2023年10月绩效成绩</el-text> |
|||
<el-date-picker |
|||
v-model="orgAllYears" |
|||
type="month" |
|||
placeholder="请选择时间" |
|||
/> |
|||
</div> |
|||
<div ref="departmentMonths" class="allOrgAxisCares"> |
|||
|
|||
</div> |
|||
</el-card> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
|||
|
|||
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;"> |
|||
<!--单一行政组织全年统计--> |
|||
<div class="orgAllMothsTitle"> |
|||
<el-text class="titleInfo">2023年备煤绩效成绩</el-text> |
|||
<div> |
|||
<el-select v-model="oenOrg" placeholder="" style="width:100px"> |
|||
<el-option |
|||
v-for="item in options" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-date-picker |
|||
v-model="oenOrgAllmonth" |
|||
type="month" |
|||
placeholder="请选择时间" |
|||
style="width:120px" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div ref="departmentMonths" class="allOrgAxisCares"> |
|||
|
|||
</div> |
|||
</el-card> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
|
|||
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;; height: 335px"> |
|||
<!--单月全厂统计--> |
|||
<div class="orgAllMothsTitle"> |
|||
<el-text class="titleInfo">热门新闻</el-text> |
|||
</div> |
|||
<div ref="departmentMonths" class="allOrgAxisCares"> |
|||
|
|||
</div> |
|||
</el-card> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
<el-row :gutter="10" class="cart_top_juLi"> |
|||
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
|||
|
|||
<el-row :gutter="10"> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8"> |
|||
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;"> |
|||
<div class="orgAllMothsTitle"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-date-picker |
|||
v-model="dingXingYear" |
|||
type="year" |
|||
placeholder="请选择时间" |
|||
style="width:100%" |
|||
/> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-select v-model="dingXingOrg" placeholder="" style="width:100%"> |
|||
<el-option |
|||
v-for="item in mainOrgList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-select v-model="dingXingTarget" placeholder="" style="width:100%"> |
|||
<el-option |
|||
v-for="item in targetXingListAry" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div ref="departmentMonths" class="allOrgAxisCares"> |
|||
|
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8"> |
|||
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;"> |
|||
<div class="orgAllMothsTitle"> |
|||
<el-row> |
|||
<el-col :span="8"> |
|||
<el-date-picker |
|||
v-model="dingLiangDaChengYear" |
|||
type="year" |
|||
placeholder="请选择时间" |
|||
style="width:100%" |
|||
/> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-select v-model="dingLiangDaChengOrg" placeholder="" style="width:100%"> |
|||
<el-option |
|||
v-for="item in mainOrgList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-select v-model="dingLiangDaChengTarget" placeholder="" style="width:100%"> |
|||
<el-option |
|||
v-for="item in targetListAry" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
<div ref="departmentMonths" class="allOrgAxisCares"> |
|||
|
|||
</div> |
|||
</el-card> |
|||
</el-col> |
|||
<el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8"> |
|||
<!--定量指标同比环比--> |
|||
<DingLiangTongBiHuanBi v-if="loadPage" :main-org-list="mainOrgList" :target-list-ary="targetListAry" :dlyear="dingLiangYear" :ding-liang-org="dingLiangOrg" :ding-liang-target="dingLiangTarget" /> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
</el-col> |
|||
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
|||
<EducationChart :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
|||
|
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</template> |
|||
<style lang='scss' scoped> |
|||
.readback{ |
|||
// background-color:#FF0000; |
|||
.allOrgAxisCares{ |
|||
display: block; |
|||
width:100%; |
|||
height:280px; |
|||
overflow:auto; |
|||
} |
|||
|
|||
} |
|||
.orgAllMothsTitle{ |
|||
width:100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content:space-between; |
|||
|
|||
} |
|||
.greenColor{ |
|||
// background-color:#FFAC52; |
|||
|
|||
// padding:0 10px 0 10px; |
|||
} |
|||
.span_icon_left{ |
|||
margin-right:10px; |
|||
} |
|||
.cart_top_juLi{ |
|||
// margin-top:10px; |
|||
} |
|||
.titleInfo{ |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue