You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
399 lines
11 KiB
399 lines
11 KiB
2 years ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 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>
|