18 changed files with 2630 additions and 243 deletions
@ -0,0 +1,175 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-11-08 10:45:48 |
||||
|
@ 备注: 公司下所有部门当前时间统计值 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import * as echarts from 'echarts'; //引入图形界面 |
||||
|
import { orgTargetAnnualStatistics } from '@/api/displayboardapi/indexapi' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
educationOrgId:{ |
||||
|
type:Number, |
||||
|
default:309 |
||||
|
}, |
||||
|
orgListCont:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
const curreorgId = ref<number>(309) |
||||
|
const allOrgOneMonth = ref<any>() //指定月 |
||||
|
const orgAllYearLoading = ref(false) |
||||
|
//所有行政组织月度画图对象 |
||||
|
const orgYearFullMonths = ref(null) |
||||
|
//行政组织月度绩效 |
||||
|
const departmentYears = ref<any>(null) |
||||
|
|
||||
|
const yearsInfo = ref<any>("2023") |
||||
|
|
||||
|
//获取统计图 |
||||
|
const orgChartDrowData = () => { |
||||
|
orgAllYearLoading.value = true |
||||
|
let timeYears = allOrgOneMonth.value.getFullYear() |
||||
|
yearsInfo.value = timeYears |
||||
|
let sendInfo = { |
||||
|
orgid:curreorgId.value.toString(), |
||||
|
years:timeYears |
||||
|
} |
||||
|
orgTargetAnnualStatistics(sendInfo) |
||||
|
.then((data:any)=>{ |
||||
|
console.log(" props.dlyear.data", data) |
||||
|
if(data.code == 0){ |
||||
|
let dataAry = new Array |
||||
|
if(data.data.series&&data.data.series.length > 0){ |
||||
|
data.data.series.forEach((item:any)=>{ |
||||
|
dataAry.push({ |
||||
|
name: item.name, |
||||
|
type: 'line', |
||||
|
data: item.datalist |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
let option = { |
||||
|
|
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
legend: { |
||||
|
data: data.data.legend, |
||||
|
bottom:0 |
||||
|
}, |
||||
|
grid: { |
||||
|
top:"20px", |
||||
|
left: '1%', |
||||
|
right: '2%', |
||||
|
bottom: '60px', |
||||
|
containLabel: true |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
boundaryGap: false, |
||||
|
data: data.data.xAxis |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
max:data.data.maxscore, |
||||
|
min:data.data.minscore, |
||||
|
}, |
||||
|
series: dataAry |
||||
|
}; |
||||
|
orgYearFullMonths.value.clear(); |
||||
|
orgYearFullMonths.value.setOption(option) |
||||
|
|
||||
|
} |
||||
|
orgAllYearLoading.value = false |
||||
|
}) |
||||
|
.finally(()=>{ |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
let dataTime:any = new Date(); |
||||
|
allOrgOneMonth.value = dataTime |
||||
|
|
||||
|
curreorgId.value = props.educationOrgId |
||||
|
orgYearFullMonths.value = markRaw(echarts.init(departmentYears.value)) |
||||
|
|
||||
|
orgChartDrowData(); |
||||
|
window.addEventListener('resize', () => { |
||||
|
orgYearFullMonths.value.resize(); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;"> |
||||
|
<!--分厂数据统计--> |
||||
|
<div class="orgAllMothsTitle"> |
||||
|
<el-text class="titleInfo">{{ yearsInfo }}年绩效成绩</el-text> |
||||
|
<div> |
||||
|
<el-select v-model="curreorgId" placeholder="请选择公司" @change="orgChartDrowData"> |
||||
|
<el-option |
||||
|
v-for="item in props.orgListCont" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
<el-date-picker |
||||
|
v-model="allOrgOneMonth" |
||||
|
type="year" |
||||
|
placeholder="请选择时间" |
||||
|
@change="orgChartDrowData" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div ref="departmentYears" v-loading="orgAllYearLoading" element-loading-text="Loading..." class="allOrgAxisCares"> |
||||
|
|
||||
|
</div> |
||||
|
</el-card> |
||||
|
</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> |
||||
@ -0,0 +1,117 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-11-08 19:38:49 |
||||
|
@ 备注: 应用 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import AppContent from '@/views/appstore/appmarket/content.vue' |
||||
|
const appLoading = ref(false) |
||||
|
const fits = 'fill' |
||||
|
const boxIsShow = ref(false) |
||||
|
const appId = ref<number>() |
||||
|
|
||||
|
/** |
||||
|
* 查看详情 |
||||
|
*/ |
||||
|
function lookappcont(id:number){ |
||||
|
appId.value = id |
||||
|
boxIsShow.value = true |
||||
|
} |
||||
|
//跳转地址 |
||||
|
const jumpUrl = (val:any) =>{ |
||||
|
createOneClickLogin({url:val}) |
||||
|
.then(data =>{ |
||||
|
console.log("跳转地址--->",data.data) |
||||
|
if(data.code == 0){ |
||||
|
window.open(data.data,'_blank') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px; margin-top: 10px; min-height: 335px"> |
||||
|
<div class="orgAllMothsTitle"> |
||||
|
<el-text class="titleInfo">快捷应用</el-text> |
||||
|
</div> |
||||
|
<div v-loading="appLoading" element-loading-text="Loading..." class="allOrgAxisCares demo-image"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top"> |
||||
|
<el-image style="width: 100%; height: 100%" src="/src/assets/index/15.jpg" :fit="fits" @click="jumpUrl('https://jy.hxgk.group')" /> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top"> |
||||
|
<el-image style="width: 100%; height: 100%" src="/src/assets/index/13.jpg" :fit="fits" @click="jumpUrl('http://36.133.124.103:9080/eassso/login?service=http%3A%2F%2F36.133.124.103%3A9080%2Fshr%2F')" /> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top"> |
||||
|
<el-image style="width: 100%; height: 100%" src="/src/assets/icons/zxxy.svg" :fit="fits" @click="jumpUrl('http://www.hxgk.group')" /> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top"> |
||||
|
<el-image style="width: 100%; height: 100%" src="/src/assets/index/8.png" :fit="fits" @click="jumpUrl('http://120.224.6.6:6005/SyncPlant/login')" /> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top"> |
||||
|
<el-image style="width: 100%; height: 100%" src="/src/assets/index/1.jpg" :fit="fits" @click="lookappcont(3)" /> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="gongge_top"> |
||||
|
<el-image style="width: 100%; height: 100%" src="/src/assets/icons/jxkh.svg" :fit="fits" @click="jumpUrl('http://ginadmin.hxgk.group')" /> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
<AppContent v-model:isshow="boxIsShow" :appcontid="appId" /> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.readback{ |
||||
|
// background-color:#FF0000; |
||||
|
.allOrgAxisCares{ |
||||
|
display: block; |
||||
|
width:100%; |
||||
|
height:280px; |
||||
|
overflow:auto; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
.gongge_top{ |
||||
|
margin-top:10px; |
||||
|
} |
||||
|
.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> |
||||
|
<style scoped> |
||||
|
.demo-image .block { |
||||
|
padding: 30px 0; |
||||
|
text-align: center; |
||||
|
border-right: solid 1px var(--el-border-color); |
||||
|
display: inline-block; |
||||
|
width: 20%; |
||||
|
box-sizing: border-box; |
||||
|
vertical-align: top; |
||||
|
} |
||||
|
.demo-image .block:last-child { |
||||
|
border-right: none; |
||||
|
} |
||||
|
.demo-image .demonstration { |
||||
|
display: block; |
||||
|
color: var(--el-text-color-secondary); |
||||
|
font-size: 14px; |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,162 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-11-07 16:10:10 |
||||
|
@ 备注: 定量指标同比环比 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import * as echarts from 'echarts'; //引入图形界面 |
||||
|
import { bdTtsyoy } from '@/api/displayboardapi/indexapi' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
dlyear:{ |
||||
|
type:String, |
||||
|
default:new Date() |
||||
|
}, |
||||
|
dingLiangOrg:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
dingLiangTarget:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
}, |
||||
|
targetListAry:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
mainOrgList:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
const creeTime = ref<string>(new Date()) |
||||
|
const loadingDlTHbi = ref(false) |
||||
|
|
||||
|
const dingLiangOrgIng = ref() |
||||
|
const dingLiangTargetIng = ref() |
||||
|
|
||||
|
//设置画表对象 |
||||
|
const echartsDlTarThChart = ref<any>() |
||||
|
//获取学历图标对象 |
||||
|
const dlTargetThChart = ref<any>(null) |
||||
|
|
||||
|
const gainDltbhxfx = () =>{ |
||||
|
let years = creeTime.value.getFullYear() |
||||
|
let sebdData = { |
||||
|
orgid:dingLiangOrgIng.value.toString(), |
||||
|
targetid:dingLiangTargetIng.value.toString(), |
||||
|
datetime:[years] |
||||
|
} |
||||
|
bdTtsyoy(sebdData) |
||||
|
.then((data:any) =>{ |
||||
|
console.log(" props.dlyear.data", data) |
||||
|
}) |
||||
|
} |
||||
|
watch(props.mainOrgList,()=>{ |
||||
|
|
||||
|
}) |
||||
|
watch(props.targetListAry,()=>{ |
||||
|
console.log("改变值---1-->",props.targetListAry) |
||||
|
if(props.targetListAry&&props.targetListAry.length > 0){ |
||||
|
console.log("改变值----->",props.targetListAry) |
||||
|
dingLiangTargetIng.value = props.targetListAry[0].id |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
watch(props.dingLiangOrg,()=>{ |
||||
|
dingLiangOrgIng.value = props.dingLiangOrg |
||||
|
}) |
||||
|
watch(props.dingLiangTarget,()=>{ |
||||
|
dingLiangTargetIng.value = props.dingLiangTarget |
||||
|
}) |
||||
|
|
||||
|
onMounted(() => { |
||||
|
console.log(" props.dlyear", props.targetListAry) |
||||
|
loadingDlTHbi.value = false |
||||
|
creeTime.value = props.dlyear |
||||
|
dingLiangOrgIng.value = props.dingLiangOrg |
||||
|
dingLiangTargetIng.value = props.dingLiangTarget |
||||
|
if(props.targetListAry&&props.targetListAry.length > 0){ |
||||
|
dingLiangTargetIng.value = props.targetListAry[0].id |
||||
|
} |
||||
|
// gainDltbhxfx(); |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<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="creeTime" |
||||
|
type="year" |
||||
|
placeholder="请选择时间" |
||||
|
style="width:100%" |
||||
|
|
||||
|
/> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-select v-model="dingLiangOrgIng" placeholder="" style="width:100%"> |
||||
|
<el-option |
||||
|
v-for="item in props.mainOrgList" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-select v-model="dingLiangTargetIng" placeholder="" style="width:100%"> |
||||
|
<el-option |
||||
|
v-for="item in props.targetListAry" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div ref="dlTargetThChart" v-loading="loading" element-loading-text="Loading..." class="allOrgAxisCares"> |
||||
|
|
||||
|
</div> |
||||
|
</el-card> |
||||
|
</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> |
||||
@ -0,0 +1,145 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-11-07 08:44:17 |
||||
|
@ 备注: 学历饼形图 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import * as echarts from 'echarts'; //引入图形界面 |
||||
|
|
||||
|
import { sendOrgCont,dimissionRateQuery } from '@/api/displayboardapi/types' |
||||
|
import { getEdtuStru } from '@/api/displayboardapi/indexapi' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
educationOrgId:{ |
||||
|
type:Number, |
||||
|
default:309 |
||||
|
}, |
||||
|
orgListCont:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
const loading = ref(false) |
||||
|
const orgId = ref<number>(309) |
||||
|
const legendList = new Array |
||||
|
const seriesData = new Array |
||||
|
//设置画表对象 |
||||
|
const echartsEducationChart = ref<any>() |
||||
|
//获取学历图标对象 |
||||
|
const educationChart = ref<any>(null) |
||||
|
/** |
||||
|
* 获取学历 |
||||
|
*/ |
||||
|
function giveXueLi(){ |
||||
|
getEdtuStru({id:orgId.value}) |
||||
|
.then(( {data} )=>{ |
||||
|
seriesData.splice(0,seriesData.length); |
||||
|
if(data){ |
||||
|
if(data.length > 0){ |
||||
|
|
||||
|
data.forEach((item: { education: any; percentage: any; }) => { |
||||
|
legendList.push(item.education) |
||||
|
seriesData.push({ |
||||
|
name: item.education, |
||||
|
value: item.percentage, |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.finally(()=>{ |
||||
|
echartsEducationChart.value.clear(); |
||||
|
echartsEducationChart.value.setOption(option) |
||||
|
loading.value=false |
||||
|
// 大小自适应 |
||||
|
window.addEventListener('resize', () => { |
||||
|
echartsEducationChart.value.resize(); |
||||
|
}); |
||||
|
}) |
||||
|
} |
||||
|
const option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: '60%', |
||||
|
data: seriesData, |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
onMounted(() => { |
||||
|
loading.value = true |
||||
|
orgId.value = props.educationOrgId |
||||
|
echartsEducationChart.value = markRaw(echarts.init(educationChart.value)) |
||||
|
giveXueLi() |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-card v-loading="loading" element-loading-text="Loading..." shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px; margin-top: 10px; min-height: 335px"> |
||||
|
<!--公司学历--> |
||||
|
<div class="orgAllMothsTitle"> |
||||
|
<el-text class="titleInfo">学历占比</el-text> |
||||
|
<el-select v-model="orgId" placeholder="请选择公司" style="width:170px" @change="giveXueLi"> |
||||
|
<el-option |
||||
|
v-for="item in props.orgListCont" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div ref="educationChart" class="allOrgAxisCares"> |
||||
|
|
||||
|
</div> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
// 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> |
||||
@ -0,0 +1,106 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-11-09 08:09:10 |
||||
|
@ 备注: 热门新闻 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { hotNews } from '@/api/displayboardapi/indexapi' |
||||
|
|
||||
|
const hotNewsLoading = ref(false) |
||||
|
const list = ref<any[]>([]) |
||||
|
const gainHotNews = () =>{ |
||||
|
hotNewsLoading.value=true |
||||
|
hotNews({page:1,pagesize:7,type:1}) |
||||
|
.then((data:any) =>{ |
||||
|
console.log("热门新闻",data); |
||||
|
list.value = data.data.list |
||||
|
}) |
||||
|
.finally(() =>{ |
||||
|
hotNewsLoading.value=false |
||||
|
}) |
||||
|
} |
||||
|
onMounted(() => { |
||||
|
gainHotNews() |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<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 v-loading="hotNewsLoading" element-loading-text="Loading..." class="allOrgAxisCares"> |
||||
|
<ul> |
||||
|
<li v-for="item in list" :key="item.id" class="orgAllMothsTitle"> |
||||
|
<el-text truncated>{{ item.title }}</el-text> |
||||
|
<span>{{ item.time }}</span> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
// background-color:#FF0000; |
||||
|
.allOrgAxisCares{ |
||||
|
display: block; |
||||
|
width:100%; |
||||
|
height:100%; |
||||
|
overflow:auto; |
||||
|
ul, li { |
||||
|
font-size:14px; |
||||
|
padding:9px 0; |
||||
|
// border-bottom:1px solid #EEEEEE; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.alarm-infoList { |
||||
|
padding: 15px; |
||||
|
box-sizing: border-box; |
||||
|
:deep(.el-table) { |
||||
|
background-color: transparent; |
||||
|
color: #fff; |
||||
|
|
||||
|
th { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
tr { |
||||
|
color: #fff; |
||||
|
background-color: transparent; |
||||
|
&.el-table__row--striped { |
||||
|
td.el-table__cell { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
&:hover { |
||||
|
td.el-table__cell { |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,173 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-11-08 19:17:12 |
||||
|
@ 备注: 学历占比 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import * as echarts from 'echarts'; //引入图形界面 |
||||
|
|
||||
|
import { sendOrgCont,dimissionRateQuery } from '@/api/displayboardapi/types' |
||||
|
import { getEdtuStru } from '@/api/displayboardapi/indexapi' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
educationOrgId:{ |
||||
|
type:Number, |
||||
|
default:309 |
||||
|
}, |
||||
|
orgListCont:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
const loading = ref(false) |
||||
|
const orgId = ref<number>(309) |
||||
|
const legendList = new Array |
||||
|
const seriesData = new Array |
||||
|
//设置画表对象 |
||||
|
const echartsEducationChart = ref<any>() |
||||
|
//获取学历图标对象 |
||||
|
const educationChart = ref<any>(null) |
||||
|
/** |
||||
|
* 获取学历 |
||||
|
*/ |
||||
|
function giveXueLi(){ |
||||
|
getEdtuStru({id:orgId.value}) |
||||
|
.then(( {data} )=>{ |
||||
|
seriesData.splice(0,seriesData.length); |
||||
|
if(data){ |
||||
|
if(data.length > 0){ |
||||
|
|
||||
|
data.forEach((item: { education: any; percentage: any; }) => { |
||||
|
legendList.push(item.education) |
||||
|
seriesData.push({ |
||||
|
name: item.education, |
||||
|
value: item.percentage, |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.finally(()=>{ |
||||
|
echartsEducationChart.value.clear(); |
||||
|
echartsEducationChart.value.setOption(option) |
||||
|
loading.value=false |
||||
|
// 大小自适应 |
||||
|
window.addEventListener('resize', () => { |
||||
|
echartsEducationChart.value.resize(); |
||||
|
}); |
||||
|
}) |
||||
|
} |
||||
|
const option = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: '60%', |
||||
|
data: seriesData, |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
normal:{ |
||||
|
show: true, |
||||
|
formatter: (d: any) => { |
||||
|
return d.name + '（' + d.value + '人' +'）' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: '60%', |
||||
|
data: seriesData, |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
normal:{ |
||||
|
position: 'inside', |
||||
|
show: true, |
||||
|
formatter: (d: any) => { |
||||
|
return d.percent + '%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
] |
||||
|
}; |
||||
|
onMounted(() => { |
||||
|
loading.value = true |
||||
|
orgId.value = props.educationOrgId |
||||
|
echartsEducationChart.value = markRaw(echarts.init(educationChart.value)) |
||||
|
giveXueLi() |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;"> |
||||
|
<!--单一行政组织全年统计--> |
||||
|
<div class="orgAllMothsTitle"> |
||||
|
<el-text class="titleInfo">学历占比</el-text> |
||||
|
<el-select v-model="orgId" placeholder="请选择公司" @change="giveXueLi"> |
||||
|
<el-option |
||||
|
v-for="item in props.orgListCont" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div ref="educationChart" class="allOrgAxisCares"> |
||||
|
|
||||
|
</div> |
||||
|
</el-card> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.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> |
||||
@ -0,0 +1,170 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-11-08 18:48:27 |
||||
|
@ 备注: 行政组织年龄结构 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import * as echarts from 'echarts'; //引入图形界面 |
||||
|
import { statisticalAgeRatio } from '@/api/displayboardapi/indexapi' |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
educationOrgId:{ |
||||
|
type:Number, |
||||
|
default:309 |
||||
|
}, |
||||
|
orgListCont:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
const orgAgeLoading = ref(false) |
||||
|
const orgAgeId = ref<number>(309) |
||||
|
let seriesOrgAgeData = new Array |
||||
|
const orgAgeTitle = ref<string>("年龄结构图") |
||||
|
//设置画表对象 |
||||
|
const orgAgeChart = ref<any>() |
||||
|
//获取学历图标对象 |
||||
|
const darwOrgAgeChart = ref<any>(null) |
||||
|
|
||||
|
|
||||
|
/** |
||||
|
* 获取年龄比例 |
||||
|
*/ |
||||
|
const gainOrgAgeRatio = () =>{ |
||||
|
orgAgeLoading.value = true |
||||
|
statisticalAgeRatio({id:orgAgeId.value.toString()}) |
||||
|
.then((data:any)=>{ |
||||
|
if(data.code == 0){ |
||||
|
seriesOrgAgeData.splice(0,seriesOrgAgeData.length); |
||||
|
if(data.data){ |
||||
|
seriesOrgAgeData = data.data |
||||
|
console.log("年龄结构图",seriesOrgAgeData) |
||||
|
let optionOrgAge = { |
||||
|
tooltip: { |
||||
|
trigger: 'item' |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: '60%', |
||||
|
data: seriesOrgAgeData, |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
normal:{ |
||||
|
show: true, |
||||
|
formatter: (d: any) => { |
||||
|
return d.name + '（' + d.value + '人' +'）' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'pie', |
||||
|
radius: '60%', |
||||
|
data: seriesOrgAgeData, |
||||
|
emphasis: { |
||||
|
itemStyle: { |
||||
|
shadowBlur: 10, |
||||
|
shadowOffsetX: 0, |
||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)' |
||||
|
} |
||||
|
}, |
||||
|
label: { |
||||
|
normal:{ |
||||
|
position: 'inside', |
||||
|
show: true, |
||||
|
formatter: (d: any) => { |
||||
|
return d.percent + '%' |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
] |
||||
|
}; |
||||
|
orgAgeChart.value.clear(); |
||||
|
orgAgeChart.value.setOption(optionOrgAge) |
||||
|
orgAgeLoading.value=false |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
.finally(()=>{ |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
onMounted(() => { |
||||
|
orgAgeId.value = props.educationOrgId |
||||
|
orgAgeChart.value = markRaw(echarts.init(darwOrgAgeChart.value)) |
||||
|
gainOrgAgeRatio() |
||||
|
// 大小自适应 |
||||
|
window.addEventListener('resize', () => { |
||||
|
orgAgeChart.value.resize(); |
||||
|
}); |
||||
|
}) |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;"> |
||||
|
<!--单月全厂统计--> |
||||
|
<div class="orgAllMothsTitle"> |
||||
|
<el-text class="titleInfo">{{ orgAgeTitle }}</el-text> |
||||
|
<el-select v-model="orgAgeId" placeholder="请选择公司" @change="gainOrgAgeRatio"> |
||||
|
<el-option |
||||
|
v-for="item in props.orgListCont" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div ref="darwOrgAgeChart" v-loading="orgAgeLoading" element-loading-text="Loading..." class="allOrgAxisCares"> |
||||
|
|
||||
|
</div> |
||||
|
</el-card> |
||||
|
</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> |
||||
@ -0,0 +1,587 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-11-08 08:44:54 |
||||
|
@ 备注: 三联屏 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import * as echarts from 'echarts'; //引入图形界面 |
||||
|
import { bdTtsyoy,getCompanyDeparment,targetListForDepartment,bdBdtTs,bDtTsatTryoy } from '@/api/displayboardapi/indexapi' |
||||
|
|
||||
|
const dlhbLoading = ref(false) |
||||
|
const dlhbLoadingMb = ref(false) |
||||
|
const mainOrgList = ref<any[]>([]) |
||||
|
const targetListAry = ref<any[]>([]) |
||||
|
const targetListAryes = 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 getCompanyMainSunOrg = () =>{ |
||||
|
let sendIfo = { |
||||
|
"idstr":"309" //userStore.userInfoCont.company |
||||
|
} |
||||
|
getCompanyDeparment(sendIfo) |
||||
|
.then((data:any) =>{ |
||||
|
console.log("获取行政组织-1-->",data) |
||||
|
mainOrgList.value = data.data |
||||
|
if(data.data && data.data.length > 0){ |
||||
|
dingXingOrg.value = data.data[0].id |
||||
|
dingLiangDaChengOrg.value = data.data[0].id |
||||
|
dingLiangOrg.value = data.data[0].id |
||||
|
orgAboutTarget(data.data[0].id.toString(),1) |
||||
|
orgAboutTarget(data.data[0].id.toString(),2) |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
//根据行政组织获取指标 |
||||
|
const orgAboutTarget = (orgId:string,tarAttribute:number,types?: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 |
||||
|
darwDxTargetChart() |
||||
|
} |
||||
|
}else{ |
||||
|
|
||||
|
if(data.data&&data.data.length>0){ |
||||
|
switch (types) { |
||||
|
case 1: |
||||
|
targetListAryes.value = data.data |
||||
|
dingLiangTarget.value = data.data[0].id.toString() |
||||
|
drawDlTbHbFx(); |
||||
|
break; |
||||
|
case 2: |
||||
|
targetListAry.value = data.data |
||||
|
dingLiangDaChengTarget.value = data.data[0].id |
||||
|
bdBdtTsMubiao(); |
||||
|
break |
||||
|
default: |
||||
|
targetListAryes.value = data.data |
||||
|
targetListAry.value = data.data |
||||
|
dingLiangDaChengTarget.value = data.data[0].id |
||||
|
dingLiangTarget.value = data.data[0].id.toString() |
||||
|
drawDlTbHbFx(); |
||||
|
bdBdtTsMubiao(); |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
}) |
||||
|
} |
||||
|
//定量指标同比环比分析 |
||||
|
const dlDbHbFx = ref<any>() |
||||
|
const dlTargetThChart = ref<any>(null) |
||||
|
const drawDlTbHbFx = () =>{ |
||||
|
dlhbLoading.value=true |
||||
|
let timeYears = dingLiangYear.value.getFullYear() |
||||
|
let sendInfo = { |
||||
|
orgid:dingLiangOrg.value.toString(), |
||||
|
targetid:dingLiangTarget.value, |
||||
|
datetime:[timeYears] |
||||
|
} |
||||
|
bdTtsyoy(sendInfo) |
||||
|
.then((data)=>{ |
||||
|
if(data.code == 0){ |
||||
|
let seriesAry = new Array |
||||
|
if(data.data.series&&data.data.series.length>0){ |
||||
|
data.data.series.forEach((item:any)=>{ |
||||
|
seriesAry.push({ |
||||
|
type:'bar', |
||||
|
data:item.data, |
||||
|
tooltip:item.tooltip, |
||||
|
name:item.name, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
label: { |
||||
|
show: true, //开启显示 |
||||
|
position: 'top', //在上方显示 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
let optionData = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
label:{ |
||||
|
normal:{ |
||||
|
show:true, |
||||
|
position:"top" |
||||
|
} |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
grid:{ |
||||
|
bottom: "1%", |
||||
|
left: "3%", |
||||
|
right: "1%", |
||||
|
top:"15%", |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: data.data.xaxis, |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
}, |
||||
|
axisLabel:{ |
||||
|
interval: 0 |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: data.data.yaxis.type, |
||||
|
name:"定量指标同比环比", |
||||
|
max:data.data.yaxis.max, |
||||
|
min:data.data.yaxis.min, |
||||
|
nameTextStyle:{ |
||||
|
padding:[0,0,0,0] |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} '+data.data.yaxis.formatter |
||||
|
} |
||||
|
}, |
||||
|
series:seriesAry |
||||
|
} |
||||
|
dlDbHbFx.value.clear(); |
||||
|
dlDbHbFx.value.setOption(optionData) |
||||
|
dlhbLoading.value=false |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
//定量指标目标达成分析 |
||||
|
const dlDbHbFxMubiao = ref<any>() |
||||
|
const dlTargetThChartMubiao = ref<any>(null) |
||||
|
const bdBdtTsMubiao = () =>{ |
||||
|
dlhbLoadingMb.value = true |
||||
|
let timeYears = dingLiangDaChengYear.value.getFullYear() |
||||
|
let sendInfo = { |
||||
|
orgid:dingLiangDaChengOrg.value.toString(), |
||||
|
targetid:dingLiangDaChengTarget.value, |
||||
|
datetime:timeYears.toString() |
||||
|
} |
||||
|
bdBdtTs(sendInfo) |
||||
|
.then((data:any) =>{ |
||||
|
console.log("val.toString",data) |
||||
|
if(data.code == 0){ |
||||
|
let chartMapDateJixiaoDuo = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
crossStyle: { |
||||
|
color: '#999' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
grid:{ |
||||
|
bottom: "1%", |
||||
|
containLabel: true, |
||||
|
left: "0%", |
||||
|
right: "0%" |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
data: data.data.legend |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: data.data.xaxis, |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
}, |
||||
|
axisLabel:{ |
||||
|
interval: 0 |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: data.data.yaxis[0].type, |
||||
|
name: data.data.yaxis[0].name, |
||||
|
min: data.data.yaxis[0].min, |
||||
|
max: data.data.yaxis[0].max, |
||||
|
nameTextStyle:{ |
||||
|
padding:[0,0,0,100] |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} '+data.data.yaxis[0].formatter, |
||||
|
interval: 0 |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: data.data.yaxis[1].type, |
||||
|
name: data.data.yaxis[1].name, |
||||
|
min: data.data.yaxis[1].min, |
||||
|
max: data.data.yaxis[1].max, |
||||
|
|
||||
|
axisLabel: { |
||||
|
formatter: '{value} '+data.data.yaxis[1].formatter, |
||||
|
interval: 0 |
||||
|
}, |
||||
|
splitLine: { |
||||
|
show: false |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: data.data.series[0].name, |
||||
|
type: data.data.series[0].type, |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + data.data.series[0].tooltip; |
||||
|
} |
||||
|
}, |
||||
|
data: data.data.series[0].data |
||||
|
}, |
||||
|
{ |
||||
|
name: data.data.series[1].name, |
||||
|
type: data.data.series[1].type, |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + data.data.series[1].tooltip; |
||||
|
} |
||||
|
}, |
||||
|
data: data.data.series[1].data |
||||
|
}, |
||||
|
{ |
||||
|
name: data.data.series[2].name, |
||||
|
type: data.data.series[2].type, |
||||
|
yAxisIndex: 1, |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + data.data.series[2].tooltip; |
||||
|
} |
||||
|
}, |
||||
|
data: data.data.series[2].data |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
dlDbHbFxMubiao.value.clear(); |
||||
|
dlDbHbFxMubiao.value.setOption(chartMapDateJixiaoDuo) |
||||
|
dlhbLoadingMb.value=false |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
//定性指标同比环比分析 |
||||
|
const dxTargetDarw = ref<any>() |
||||
|
const dxTargetChart = ref<any>(null) |
||||
|
const dxTargetLoad = ref(false) |
||||
|
const darwDxTargetChart = () => { |
||||
|
dxTargetLoad.value = true |
||||
|
let timeYears = dingXingYear.value.getFullYear() |
||||
|
let sendInfo = { |
||||
|
orgid:dingXingOrg.value.toString(), |
||||
|
targetid:dingXingTarget.value, |
||||
|
datetime:[timeYears] |
||||
|
} |
||||
|
bDtTsatTryoy(sendInfo) |
||||
|
.then((data:any)=>{ |
||||
|
if(data.code == 0){ |
||||
|
let seriesAry = new Array |
||||
|
if(data.data.series&&data.data.series.length>0){ |
||||
|
data.data.series.forEach((item:any)=>{ |
||||
|
seriesAry.push({ |
||||
|
type:'bar', |
||||
|
data:item.data, |
||||
|
tooltip:item.tooltip, |
||||
|
name:item.name, |
||||
|
itemStyle: { |
||||
|
normal: { |
||||
|
label: { |
||||
|
show: true, //开启显示 |
||||
|
position: 'bottom', //在上方显示 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
let optionData = { |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
}, |
||||
|
label:{ |
||||
|
normal:{ |
||||
|
show:true, |
||||
|
position:"top" |
||||
|
} |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
saveAsImage: {} |
||||
|
} |
||||
|
}, |
||||
|
grid:{ |
||||
|
bottom: "1%", |
||||
|
left: "3%", |
||||
|
right: "1%", |
||||
|
top:"15%", |
||||
|
containLabel: true |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
data: data.data.xaxis, |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
}, |
||||
|
axisLabel:{ |
||||
|
interval: 0 |
||||
|
} |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: data.data.yaxis.type, |
||||
|
name:"定性指标同比环比分析", |
||||
|
max:data.data.yaxis.max, |
||||
|
min:data.data.yaxis.min, |
||||
|
nameTextStyle:{ |
||||
|
padding:[0,0,0,0] |
||||
|
}, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} '+data.data.yaxis.formatter |
||||
|
} |
||||
|
}, |
||||
|
series:seriesAry |
||||
|
} |
||||
|
dxTargetDarw.value.clear(); |
||||
|
dxTargetDarw.value.setOption(optionData) |
||||
|
} |
||||
|
dxTargetLoad.value = false |
||||
|
}) |
||||
|
} |
||||
|
onMounted(() => { |
||||
|
let dataTime:any = new Date(); |
||||
|
dingXingYear.value = dataTime |
||||
|
dingLiangDaChengYear.value = dataTime |
||||
|
dingLiangYear.value = dataTime |
||||
|
getCompanyMainSunOrg(); |
||||
|
dlDbHbFx.value = markRaw(echarts.init(dlTargetThChart.value)); |
||||
|
dlDbHbFxMubiao.value = markRaw(echarts.init(dlTargetThChartMubiao.value)); |
||||
|
dxTargetDarw.value = markRaw(echarts.init(dxTargetChart.value)); |
||||
|
// 大小自适应 |
||||
|
window.addEventListener('resize', () => { |
||||
|
dlDbHbFx.value.resize(); |
||||
|
dlDbHbFxMubiao.value.resize(); |
||||
|
dxTargetDarw.value.resize(); |
||||
|
}); |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
//历史同比获取指标列表 |
||||
|
const alterDlTbhb = () => { |
||||
|
drawDlTbHbFx(); |
||||
|
} |
||||
|
const alterDlTbhbOrg = (id:any) => { |
||||
|
orgAboutTarget(id.toString(),2,1) |
||||
|
} |
||||
|
//定量指标目标达成分析 |
||||
|
const dlMuBiaoZhiBiao = () => { |
||||
|
bdBdtTsMubiao() |
||||
|
} |
||||
|
const dlMuBiaoOrg = (id:any) => { |
||||
|
orgAboutTarget(id.toString(),2,2) |
||||
|
} |
||||
|
//定性指标同比环比分析 |
||||
|
const dxTargetGaibian = () => { |
||||
|
darwDxTargetChart(); |
||||
|
} |
||||
|
const dxOrgGaibian = (id:any) => { |
||||
|
orgAboutTarget(id.toString(),1) |
||||
|
} |
||||
|
</script> |
||||
|
<template> |
||||
|
<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%" @change="dxOrgGaibian"> |
||||
|
<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%" @change="dxTargetGaibian"> |
||||
|
<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="dxTargetChart" v-loading="dxTargetLoad" element-loading-text="Loading..." 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%" @change="dlMuBiaoOrg"> |
||||
|
<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%" @change="dlMuBiaoZhiBiao"> |
||||
|
<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="dlTargetThChartMubiao" v-loading="dlhbLoadingMb" element-loading-text="Loading..." 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="dingLiangYear" |
||||
|
type="year" |
||||
|
placeholder="请选择时间" |
||||
|
style="width:100%" |
||||
|
|
||||
|
/> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-select v-model="dingLiangOrg" placeholder="" style="width:100%" @change="alterDlTbhbOrg"> |
||||
|
<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="dingLiangTarget" placeholder="" style="width:100%" @change="alterDlTbhb"> |
||||
|
<el-option |
||||
|
v-for="item in targetListAryes" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
<div ref="dlTargetThChart" v-loading="dlhbLoading" element-loading-text="Loading..." class="allOrgAxisCares"> |
||||
|
|
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</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> |
||||
@ -0,0 +1,74 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2023-11-07 09:48:35 |
||||
|
@ 备注: 当前登陆人信息 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import UserRole from '@/assets/icons/user.svg' |
||||
|
const props = defineProps({ |
||||
|
userStore:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
// const userStore = props.userStore |
||||
|
// onMounted(()=>{ |
||||
|
|
||||
|
// }) |
||||
|
</script> |
||||
|
<template> |
||||
|
<el-card shadow="always" :body-style="{ padding: '10px' }" style = "border-radius: 12px;margin-top: 10px;; min-height: 335px"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :xs="24" :sm="12" :md="11" :lg="11" :xl="10" class="readback"> |
||||
|
<!--人员头像--> |
||||
|
<el-avatar shape="square" :fit="cover" :src="props.userStore.avatar!=''?props.userStore.avatar:UserRole" style="width:100%; height:130px;" /> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="12" :md="13" :lg="13" :xl="14" class="greenColor"> |
||||
|
<!--人员信息--> |
||||
|
<el-descriptions :column="1"> |
||||
|
<el-descriptions-item> |
||||
|
<template #label> |
||||
|
<span class="fa fa-user-o span_icon_left"></span> 姓名 |
||||
|
</template> |
||||
|
{{props.userStore.userInfoCont.nickname}} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item> |
||||
|
<template #label> |
||||
|
<span class="fa fa-vcard-o span_icon_left"></span>工号 |
||||
|
</template> |
||||
|
{{ props.userStore.userInfoCont.number }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item> |
||||
|
<template #label> |
||||
|
<span class="fa fa-transgender-alt span_icon_left"></span>性别 |
||||
|
</template> |
||||
|
{{ props.userStore.userInfoCont.genderstr }} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item> |
||||
|
<template #label> |
||||
|
<span class="fa fa-volume-control-phone span_icon_left"></span>电话 |
||||
|
</template> |
||||
|
{{ props.userStore.userInfoCont.mobilephone }} |
||||
|
</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :xs="4" :sm="7" :md="6" :lg="5" :xl="4"><span class="fa fa-map-marker span_icon_left"></span>住址</el-col> |
||||
|
<el-col :xs="20" :sm="17" :md="18" :lg="19" :xl="20">{{ props.userStore.userInfoCont.currentresidence }}</el-col> |
||||
|
</el-row> |
||||
|
<el-row> |
||||
|
<el-col :xs="4" :sm="7" :md="6" :lg="5" :xl="4"><span class="fa fa-podcast span_icon_left"></span>职务</el-col> |
||||
|
<el-col :xs="20" :sm="17" :md="18" :lg="19" :xl="20"><el-text v-for="(im,index) in props.userStore.userInfoCont.postlist" :key="index">{{im}}</el-text></el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
</el-card> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
.span_icon_left{ |
||||
|
margin-right:10px; |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -1,250 +1,138 @@ |
|||||
<script lang="ts"> |
<!-- |
||||
export default { name: "Dashboard" }; |
@ 作者: 秦东 |
||||
</script> |
@ 时间: 2023-11-06 13:39:13 |
||||
|
@ 备注: 首页 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import * as echarts from 'echarts'; //引入图形界面 |
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { useUserStore } from "@/store/modules/user"; |
import { useUserStore } from "@/store/modules/user"; |
||||
import { useTransition, TransitionPresets } from "@vueuse/core"; |
|
||||
|
|
||||
import GithubCorner from "@/components/GithubCorner/index.vue"; |
|
||||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|
||||
import BarChart from "./components/BarChart.vue"; |
|
||||
import PieChart from "./components/PieChart.vue"; |
|
||||
import RadarChart from "./components/RadarChart.vue"; |
|
||||
|
|
||||
const userStore = useUserStore(); |
import { sendOrgCont } from '@/api/displayboardapi/types' |
||||
|
import { getOrgChiled,getCompanyDeparment,targetListForDepartment } from '@/api/displayboardapi/indexapi' |
||||
|
|
||||
const date: Date = new Date(); |
import UserInfo from "@/views/dashboard/components/userinfo.vue"; |
||||
|
import SanLianpIng from "@/views/dashboard/components/sanlianping.vue"; |
||||
const greetings = computed(() => { |
import EducationChart from "@/views/dashboard/components/education.vue"; |
||||
if (date.getHours() >= 6 && date.getHours() < 8) { |
import AllOrgYear from "@/views/dashboard/components/allorgyear.vue"; |
||||
return "晨起披衣出草堂，轩窗已自喜微凉🌅！"; |
import OrgUserAge from "@/views/dashboard/components/orguserage.vue"; |
||||
} else if (date.getHours() >= 8 && date.getHours() < 12) { |
import OrgEducation from "@/views/dashboard/components/orgeducation.vue"; |
||||
return "上午好🌞！"; |
import Application from "@/views/dashboard/components/application.vue"; |
||||
} else if (date.getHours() >= 12 && date.getHours() < 18) { |
import HostNews from "@/views/dashboard/components/hostnews.vue"; |
||||
return "下午好☕！"; |
|
||||
} else if (date.getHours() >= 18 && date.getHours() < 24) { |
const userStore = useUserStore(); |
||||
return "晚上好🌃！"; |
const orgListCont = ref<sendOrgCont>() |
||||
} else if (date.getHours() >= 0 && date.getHours() < 6) { |
const educationOrgId = ref<number>(309) |
||||
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！"; |
|
||||
|
/** |
||||
|
* 获取行政组织 |
||||
|
*/ |
||||
|
function getOrgList(){ |
||||
|
getOrgChiled({id:313}) |
||||
|
.then(( {data} )=>{ |
||||
|
console.log("获取行政组织-2-->",data) |
||||
|
orgListCont.value = data.list |
||||
|
educationOrgId.value = data.current |
||||
|
|
||||
|
}) |
||||
} |
} |
||||
}); |
|
||||
|
|
||||
const duration = 5000; |
|
||||
|
|
||||
// 收入金额 |
|
||||
const amount = ref(0); |
|
||||
const amountOutput = useTransition(amount, { |
|
||||
duration: duration, |
|
||||
transition: TransitionPresets.easeOutExpo, |
|
||||
}); |
|
||||
amount.value = 2000; |
|
||||
|
|
||||
// 访问数 |
|
||||
const visitCount = ref(0); |
|
||||
const visitCountOutput = useTransition(visitCount, { |
|
||||
duration: duration, |
|
||||
transition: TransitionPresets.easeOutExpo, |
|
||||
}); |
|
||||
visitCount.value = 2000; |
|
||||
|
|
||||
//消息数 |
|
||||
const messageCount = ref(0); |
|
||||
const messageCountOutput = useTransition(messageCount, { |
|
||||
duration: duration, |
|
||||
transition: TransitionPresets.easeOutExpo, |
|
||||
}); |
|
||||
messageCount.value = 2000; |
|
||||
|
|
||||
// 订单数 |
|
||||
const orderCount = ref(0); |
|
||||
const orderCountOutput = useTransition(orderCount, { |
|
||||
duration: duration, |
|
||||
transition: TransitionPresets.easeOutExpo, |
|
||||
}); |
|
||||
orderCount.value = 2000; |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<div class="dashboard-container"> |
|
||||
<!-- github角标 --> |
|
||||
|
|
||||
|
|
||||
<!-- 用户信息 --> |
|
||||
<el-row class="mb-8"> |
|
||||
<el-card class="w-full"> |
|
||||
<div class="flex justify-between flex-wrap"> |
|
||||
<div class="flex items-center"> |
|
||||
<img |
|
||||
class="user-avatar" |
|
||||
:src="userStore.avatar + '?imageView2/1/w/80/h/80'" |
|
||||
/> |
|
||||
<span class="ml-[10px] text-[16px]"> |
|
||||
{{ userStore.nickname }} |
|
||||
</span> |
|
||||
</div> |
|
||||
|
|
||||
<div class="leading-[40px]"> |
|
||||
{{ greetings }} |
|
||||
</div> |
|
||||
|
|
||||
<div v-if="false" class="space-x-2 flex items-center" > |
const orgAllYears = ref<any>() //当前年 |
||||
<el-link |
|
||||
target="_blank" |
const oenOrg = ref<any>() //单一行政组织 |
||||
type="danger" |
|
||||
href="https://www.cnblogs.com/haoxianrui/p/16090029.html" |
|
||||
>官方0到1教程</el-link |
//渲染完页面再执行 |
||||
> |
onMounted(() => { |
||||
<el-divider direction="vertical" /> |
|
||||
<el-link |
getOrgList(); |
||||
target="_blank" |
|
||||
type="success" |
}) |
||||
href="https://gitee.com/youlaiorg/vue3-element-admin" |
</script> |
||||
>Gitee源码</el-link |
<template> |
||||
> |
<div ref="masterBody" class="app-container" style="margin-top:10px;"> |
||||
<el-divider direction="vertical" /> |
<el-row :gutter="10"> |
||||
<el-link |
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
||||
target="_blank" |
<AllOrgYear :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
||||
type="primary" |
</el-col> |
||||
href="https://github.com/youlaitech/vue3-element-admin" |
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
||||
>GitHub源码 |
<UserInfo :user-store="userStore" /> |
||||
</el-link> |
</el-col> |
||||
</div> |
|
||||
</div> |
|
||||
</el-card> |
|
||||
</el-row> |
</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"> |
||||
|
|
||||
|
<OrgUserAge :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
||||
|
|
||||
<!-- 数据卡片 --> |
|
||||
<el-row :gutter="40" class="mb-4"> |
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|
||||
<div class="data-box"> |
|
||||
<div |
|
||||
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded" |
|
||||
> |
|
||||
<svg-icon icon-class="uv" size="3em" /> |
|
||||
</div> |
|
||||
<div class="flex flex-col space-y-3"> |
|
||||
<div class="text-[var(--el-text-color-secondary)]">访问数</div> |
|
||||
<div class="text-lg"> |
|
||||
{{ Math.round(visitCountOutput) }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="readback"> |
||||
|
|
||||
|
<OrgEducation :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
||||
|
|
||||
<!--消息数--> |
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|
||||
<div class="data-box"> |
|
||||
<div |
|
||||
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded" |
|
||||
> |
|
||||
<svg-icon icon-class="message" size="3em" /> |
|
||||
</div> |
|
||||
<div class="flex flex-col space-y-3"> |
|
||||
<div class="text-[var(--el-text-color-secondary)]">消息数</div> |
|
||||
<div class="text-lg"> |
|
||||
{{ Math.round(messageCountOutput) }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
|
||||
<div class="data-box"> |
|
||||
<div |
|
||||
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded" |
|
||||
> |
|
||||
<svg-icon icon-class="money" size="3em" /> |
|
||||
</div> |
|
||||
<div class="flex flex-col space-y-3"> |
|
||||
<div class="text-[var(--el-text-color-secondary)]">收入金额</div> |
|
||||
<div class="text-lg"> |
|
||||
{{ Math.round(amountOutput) }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
</el-col> |
||||
<el-col :xs="24" :sm="12" :lg="6" class="mb-2"> |
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
||||
<div class="data-box"> |
|
||||
<div |
<HostNews /> |
||||
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded" |
|
||||
> |
|
||||
<svg-icon icon-class="shopping" size="3em" /> |
|
||||
</div> |
|
||||
<div class="flex flex-col space-y-3"> |
|
||||
<div class="text-[var(--el-text-color-secondary)]">订单数</div> |
|
||||
<div class="text-lg"> |
|
||||
{{ Math.round(orderCountOutput) }} |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-col> |
</el-col> |
||||
</el-row> |
</el-row> |
||||
|
<el-row :gutter="10" class="cart_top_juLi"> |
||||
|
<el-col :xs="24" :sm="16" :md="16" :lg="18" :xl="19" class="readback"> |
||||
|
|
||||
<!-- Echarts 图表 --> |
<SanLianpIng /> |
||||
<el-row :gutter="40"> |
|
||||
<el-col :sm="24" :lg="8" class="mb-4"> |
|
||||
<BarChart |
|
||||
id="barChart" |
|
||||
height="400px" |
|
||||
width="100%" |
|
||||
class="bg-[var(--el-bg-color-overlay)]" |
|
||||
/> |
|
||||
</el-col> |
|
||||
|
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|
||||
<PieChart |
|
||||
id="pieChart" |
|
||||
height="400px" |
|
||||
width="100%" |
|
||||
class="bg-[var(--el-bg-color-overlay)]" |
|
||||
/> |
|
||||
</el-col> |
</el-col> |
||||
|
<el-col :xs="24" :sm="8" :md="8" :lg="6" :xl="5" class="greenColor"> |
||||
|
<Application :org-list-cont="orgListCont" :education-org-id="educationOrgId" /> |
||||
|
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
|
||||
<RadarChart |
|
||||
id="radarChart" |
|
||||
height="400px" |
|
||||
width="100%" |
|
||||
class="bg-[var(--el-bg-color-overlay)]" |
|
||||
/> |
|
||||
</el-col> |
</el-col> |
||||
</el-row> |
</el-row> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
<style lang='scss' scoped> |
||||
<style lang="scss" scoped> |
.readback{ |
||||
.dashboard-container { |
// background-color:#FF0000; |
||||
position: relative; |
.allOrgAxisCares{ |
||||
padding: 24px; |
display: block; |
||||
|
width:100%; |
||||
.user-avatar { |
height:280px; |
||||
width: 40px; |
overflow:auto; |
||||
height: 40px; |
|
||||
border-radius: 50%; |
|
||||
} |
} |
||||
|
|
||||
.github-corner { |
|
||||
position: absolute; |
|
||||
top: 0; |
|
||||
right: 0; |
|
||||
z-index: 99; |
|
||||
border: 0; |
|
||||
} |
} |
||||
|
.orgAllMothsTitle{ |
||||
.data-box { |
width:100%; |
||||
display: flex; |
display: flex; |
||||
|
align-items: center; |
||||
justify-content:space-between; |
justify-content:space-between; |
||||
padding: 20px; |
|
||||
font-weight: bold; |
|
||||
color: var(--el-text-color-regular); |
|
||||
background: var(--el-bg-color-overlay); |
|
||||
border-color: var(--el-border-color); |
|
||||
box-shadow: var(--el-box-shadow-dark); |
|
||||
} |
} |
||||
|
.greenColor{ |
||||
|
// background-color:#FFAC52; |
||||
|
|
||||
.svg-icon { |
// padding:0 10px 0 10px; |
||||
fill: currentcolor !important; |
|
||||
} |
} |
||||
|
.span_icon_left{ |
||||
|
margin-right:10px; |
||||
|
} |
||||
|
.cart_top_juLi{ |
||||
|
// margin-top:10px; |
||||
|
} |
||||
|
.titleInfo{ |
||||
|
font-size: 20px; |
||||
|
font-weight: bold; |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|||||
@ -0,0 +1,398 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 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> |
||||
@ -0,0 +1,250 @@ |
|||||
|
<script lang="ts"> |
||||
|
export default { name: "Dashboard" }; |
||||
|
</script> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { useUserStore } from "@/store/modules/user"; |
||||
|
import { useTransition, TransitionPresets } from "@vueuse/core"; |
||||
|
|
||||
|
import GithubCorner from "@/components/GithubCorner/index.vue"; |
||||
|
import SvgIcon from "@/components/SvgIcon/index.vue"; |
||||
|
import BarChart from "./components/BarChart.vue"; |
||||
|
import PieChart from "./components/PieChart.vue"; |
||||
|
import RadarChart from "./components/RadarChart.vue"; |
||||
|
|
||||
|
const userStore = useUserStore(); |
||||
|
|
||||
|
const date: Date = new Date(); |
||||
|
|
||||
|
const greetings = computed(() => { |
||||
|
if (date.getHours() >= 6 && date.getHours() < 8) { |
||||
|
return "晨起披衣出草堂，轩窗已自喜微凉🌅！"; |
||||
|
} else if (date.getHours() >= 8 && date.getHours() < 12) { |
||||
|
return "上午好🌞！"; |
||||
|
} else if (date.getHours() >= 12 && date.getHours() < 18) { |
||||
|
return "下午好☕！"; |
||||
|
} else if (date.getHours() >= 18 && date.getHours() < 24) { |
||||
|
return "晚上好🌃！"; |
||||
|
} else if (date.getHours() >= 0 && date.getHours() < 6) { |
||||
|
return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！"; |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
const duration = 5000; |
||||
|
|
||||
|
// 收入金额 |
||||
|
const amount = ref(0); |
||||
|
const amountOutput = useTransition(amount, { |
||||
|
duration: duration, |
||||
|
transition: TransitionPresets.easeOutExpo, |
||||
|
}); |
||||
|
amount.value = 2000; |
||||
|
|
||||
|
// 访问数 |
||||
|
const visitCount = ref(0); |
||||
|
const visitCountOutput = useTransition(visitCount, { |
||||
|
duration: duration, |
||||
|
transition: TransitionPresets.easeOutExpo, |
||||
|
}); |
||||
|
visitCount.value = 2000; |
||||
|
|
||||
|
//消息数 |
||||
|
const messageCount = ref(0); |
||||
|
const messageCountOutput = useTransition(messageCount, { |
||||
|
duration: duration, |
||||
|
transition: TransitionPresets.easeOutExpo, |
||||
|
}); |
||||
|
messageCount.value = 2000; |
||||
|
|
||||
|
// 订单数 |
||||
|
const orderCount = ref(0); |
||||
|
const orderCountOutput = useTransition(orderCount, { |
||||
|
duration: duration, |
||||
|
transition: TransitionPresets.easeOutExpo, |
||||
|
}); |
||||
|
orderCount.value = 2000; |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div class="dashboard-container"> |
||||
|
<!-- github角标 --> |
||||
|
|
||||
|
|
||||
|
<!-- 用户信息 --> |
||||
|
<el-row class="mb-8"> |
||||
|
<el-card class="w-full"> |
||||
|
<div class="flex justify-between flex-wrap"> |
||||
|
<div class="flex items-center"> |
||||
|
<img |
||||
|
class="user-avatar" |
||||
|
:src="userStore.avatar + '?imageView2/1/w/80/h/80'" |
||||
|
/> |
||||
|
<span class="ml-[10px] text-[16px]"> |
||||
|
{{ userStore.nickname }} |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div class="leading-[40px]"> |
||||
|
{{ greetings }} |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="false" class="space-x-2 flex items-center" > |
||||
|
<el-link |
||||
|
target="_blank" |
||||
|
type="danger" |
||||
|
href="https://www.cnblogs.com/haoxianrui/p/16090029.html" |
||||
|
>官方0到1教程</el-link |
||||
|
> |
||||
|
<el-divider direction="vertical" /> |
||||
|
<el-link |
||||
|
target="_blank" |
||||
|
type="success" |
||||
|
href="https://gitee.com/youlaiorg/vue3-element-admin" |
||||
|
>Gitee源码</el-link |
||||
|
> |
||||
|
<el-divider direction="vertical" /> |
||||
|
<el-link |
||||
|
target="_blank" |
||||
|
type="primary" |
||||
|
href="https://github.com/youlaitech/vue3-element-admin" |
||||
|
>GitHub源码 |
||||
|
</el-link> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-card> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- 数据卡片 --> |
||||
|
<el-row :gutter="40" class="mb-4"> |
||||
|
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
||||
|
<div class="data-box"> |
||||
|
<div |
||||
|
class="text-[#40c9c6] hover:!text-white hover:bg-[#40c9c6] p-3 rounded" |
||||
|
> |
||||
|
<svg-icon icon-class="uv" size="3em" /> |
||||
|
</div> |
||||
|
<div class="flex flex-col space-y-3"> |
||||
|
<div class="text-[var(--el-text-color-secondary)]">访问数</div> |
||||
|
<div class="text-lg"> |
||||
|
{{ Math.round(visitCountOutput) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
|
||||
|
<!--消息数--> |
||||
|
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
||||
|
<div class="data-box"> |
||||
|
<div |
||||
|
class="text-[#36a3f7] hover:!text-white hover:bg-[#36a3f7] p-3 rounded" |
||||
|
> |
||||
|
<svg-icon icon-class="message" size="3em" /> |
||||
|
</div> |
||||
|
<div class="flex flex-col space-y-3"> |
||||
|
<div class="text-[var(--el-text-color-secondary)]">消息数</div> |
||||
|
<div class="text-lg"> |
||||
|
{{ Math.round(messageCountOutput) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :xs="24" :sm="12" :lg="6" class="mb-4"> |
||||
|
<div class="data-box"> |
||||
|
<div |
||||
|
class="text-[#f4516c] hover:!text-white hover:bg-[#f4516c] p-3 rounded" |
||||
|
> |
||||
|
<svg-icon icon-class="money" size="3em" /> |
||||
|
</div> |
||||
|
<div class="flex flex-col space-y-3"> |
||||
|
<div class="text-[var(--el-text-color-secondary)]">收入金额</div> |
||||
|
<div class="text-lg"> |
||||
|
{{ Math.round(amountOutput) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="12" :lg="6" class="mb-2"> |
||||
|
<div class="data-box"> |
||||
|
<div |
||||
|
class="text-[#34bfa3] hover:!text-white hover:bg-[#34bfa3] p-3 rounded" |
||||
|
> |
||||
|
<svg-icon icon-class="shopping" size="3em" /> |
||||
|
</div> |
||||
|
<div class="flex flex-col space-y-3"> |
||||
|
<div class="text-[var(--el-text-color-secondary)]">订单数</div> |
||||
|
<div class="text-lg"> |
||||
|
{{ Math.round(orderCountOutput) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<!-- Echarts 图表 --> |
||||
|
<el-row :gutter="40"> |
||||
|
<el-col :sm="24" :lg="8" class="mb-4"> |
||||
|
<BarChart |
||||
|
id="barChart" |
||||
|
height="400px" |
||||
|
width="100%" |
||||
|
class="bg-[var(--el-bg-color-overlay)]" |
||||
|
/> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
||||
|
<PieChart |
||||
|
id="pieChart" |
||||
|
height="400px" |
||||
|
width="100%" |
||||
|
class="bg-[var(--el-bg-color-overlay)]" |
||||
|
/> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :xs="24" :sm="12" :lg="8" class="mb-4"> |
||||
|
<RadarChart |
||||
|
id="radarChart" |
||||
|
height="400px" |
||||
|
width="100%" |
||||
|
class="bg-[var(--el-bg-color-overlay)]" |
||||
|
/> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.dashboard-container { |
||||
|
position: relative; |
||||
|
padding: 24px; |
||||
|
|
||||
|
.user-avatar { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.github-corner { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
z-index: 99; |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
.data-box { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 20px; |
||||
|
font-weight: bold; |
||||
|
color: var(--el-text-color-regular); |
||||
|
background: var(--el-bg-color-overlay); |
||||
|
border-color: var(--el-border-color); |
||||
|
box-shadow: var(--el-box-shadow-dark); |
||||
|
} |
||||
|
|
||||
|
.svg-icon { |
||||
|
fill: currentcolor !important; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue