首页部分接口调试
This commit is contained in:
BianLzhaoMin
parent
43bfac24de
commit
4a60a16642
|
|
@ -0,0 +1,68 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 首页 一级页面 获取数据概览（工程）
|
||||
export const getDataOverviewProjectAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/homePage/getDataOverview',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
// 首页 一级页面 人员考勤
|
||||
export const getPersonAttendanceAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/homePage/getWorkerAtt',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
// 首页 一级页面 工程信息
|
||||
export const getProjectInfoAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/homePage/getProjectMsg',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
// 首页 一级页面 在场人员
|
||||
export const getPersonPresenceAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/homePage/getEinWorkerDistribution',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 首页 二级页面 总工程列表
|
||||
export const getTotalProjectListAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/homePageSub/getMainProMsg',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
// 首页 三级页面 标段工程列表 （工程信息）
|
||||
export const getLotProjectListAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/homePageSub/getProMsg',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
||||
// 首页 三级页面 分包信息列表 （分包信息）
|
||||
export const getSubProjectListAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/homePageSub/getSubMsg',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
// 首页 三级页面 班组信息列表 （班组信息）
|
||||
export const getTeamProjectListAPI = (data) => {
|
||||
return request({
|
||||
url: '/bmw/homePageSub/getTeamMsg',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
})
|
||||
}
|
||||
|
|
@ -11,14 +11,16 @@
|
|||
@change="onHandleCheckCompany"
|
||||
>
|
||||
<el-radio-button
|
||||
:key="item"
|
||||
:label="item"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
v-for="item in companyList"
|
||||
/>
|
||||
>
|
||||
{{ item.name }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
|
||||
<div class="data-overview-time">
|
||||
<div>
|
||||
<div v-show="false">
|
||||
数据更新时间：12:15:00
|
||||
<i
|
||||
class="el-icon-refresh"
|
||||
|
|
@ -43,12 +45,18 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { getSubCompanySelectListCommonFun } from '@/utils/getCommonData'
|
||||
export default {
|
||||
name: 'DataOverview',
|
||||
data() {
|
||||
return {
|
||||
selectCompany: '全部',
|
||||
companyList: ['全部', '输一', '输二', '输三', '输四'],
|
||||
selectCompany: '',
|
||||
companyList: [
|
||||
{
|
||||
name: '全部',
|
||||
value: '',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -62,6 +70,18 @@ export default {
|
|||
console.log('刷新')
|
||||
},
|
||||
},
|
||||
|
||||
async created() {
|
||||
const subCompany = await getSubCompanySelectListCommonFun()
|
||||
if (subCompany.length > 0) {
|
||||
subCompany.forEach((e) => {
|
||||
this.companyList.push({
|
||||
value: e.id,
|
||||
name: e.subCompanyName,
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@
|
|||
class="cursor-blue"
|
||||
@click="onHandleCheckPersonCount(rowData)"
|
||||
>
|
||||
{{ rowData.line }} /{{ rowData.fixed }} /{{ rowData.temporary }}
|
||||
{{ rowData.einNum }} /{{ rowData.fixed || 0 }} /{{
|
||||
rowData.temporary || 0
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
|
|
@ -23,11 +25,11 @@
|
|||
|
||||
<!-- 红绿灯人员 -->
|
||||
<template v-else-if="slotName === 'redLightCount'">
|
||||
<span style="color: #f56c6c">红： {{ rowData.redCount }}</span>
|
||||
<!-- <span style="color: #f56c6c">红： {{ rowData.redCount }}</span>
|
||||
<br /> -->
|
||||
<span style="color: #e6a23c">黄： {{ rowData.yellowNum }}</span>
|
||||
<br />
|
||||
<span style="color: #e6a23c">黄： {{ rowData.yellowCount }}</span>
|
||||
<br />
|
||||
<span style="color: #67c23a">绿： {{ rowData.greenCount }}</span>
|
||||
<span style="color: #67c23a">绿： {{ rowData.greenNum }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -26,41 +26,38 @@ const commonColumnsListTwo = [
|
|||
|
||||
export const allProjectFormLabel = [
|
||||
{
|
||||
f_label: '工程名称',
|
||||
f_model: 'projectName',
|
||||
f_type: 'ipt',
|
||||
isShow: false, // 是否展示label
|
||||
f_label: '工程名称',
|
||||
f_model: 'mainProName',
|
||||
},
|
||||
]
|
||||
|
||||
// 总工程列表字段
|
||||
export const allProjectColumnsList = [
|
||||
{ t_props: 'projectName', t_label: '总工程名称' },
|
||||
{ t_props: 'mainProName', t_label: '总工程名称' },
|
||||
{
|
||||
t_props: 'projectCount',
|
||||
t_label: '标段工程数量',
|
||||
t_slot: 'projectCount',
|
||||
t_slot: 'proNum',
|
||||
},
|
||||
]
|
||||
|
||||
// 子项目概况列表字段
|
||||
export const childColumnsList = [
|
||||
{ t_props: 'projectName', t_label: '分公司' },
|
||||
{ t_props: 'projectCount', t_label: '工程名称' },
|
||||
{ t_props: 'subCompanyName', t_label: '分公司' },
|
||||
{ t_props: 'proName', t_label: '工程名称' },
|
||||
{
|
||||
t_props: 'subCount',
|
||||
t_label: '分包数量',
|
||||
t_slot: 'subCount',
|
||||
t_slot: 'subNum',
|
||||
},
|
||||
{
|
||||
t_props: 'teamCount',
|
||||
t_label: '班组数量',
|
||||
t_slot: 'teamCount',
|
||||
t_slot: 'teamNum',
|
||||
},
|
||||
...commonColumnsList,
|
||||
{ t_props: 'projectCount', t_label: '电压等级' },
|
||||
{ t_props: 'projectCount', t_label: '工程类型' },
|
||||
{ t_props: 'projectCount', t_label: '工程状态' },
|
||||
{ t_props: 'volLevel', t_label: '电压等级' },
|
||||
{ t_props: 'proType', t_label: '工程类型' },
|
||||
{ t_props: 'proStatus', t_label: '工程状态' },
|
||||
]
|
||||
|
||||
// 分包信息列表上方查询条件
|
||||
|
|
|
|||
|
|
@ -5,25 +5,25 @@
|
|||
ref="allProjectTableRef"
|
||||
:formLabel="allProjectFormLabel"
|
||||
:columnsList="allProjectColumnsList"
|
||||
:request-api="getAllProjectListAPI"
|
||||
:testTableList="allProjectTestTableList"
|
||||
:request-api="getTotalProjectListAPI"
|
||||
:sendParams="{ subComId: selectCompany }"
|
||||
>
|
||||
<template slot="btn" slot-scope="{ queryParams }">
|
||||
<el-button
|
||||
size="mini"
|
||||
icon="el-icon-download"
|
||||
@click="handleExport(queryParams)"
|
||||
@click="handleExportAllProject(queryParams)"
|
||||
>
|
||||
导出
|
||||
</el-button>
|
||||
</template>
|
||||
<!-- 工程数量 -->
|
||||
<template slot="projectCount" slot-scope="{ data }">
|
||||
<template slot="proNum" slot-scope="{ data }">
|
||||
<span
|
||||
class="cursor-blue"
|
||||
@click="onHandleCheckProjectCount(data)"
|
||||
>
|
||||
{{ data.projectCount }}
|
||||
{{ data.proNum }}
|
||||
</span>
|
||||
</template>
|
||||
</TableModel>
|
||||
|
|
@ -37,28 +37,28 @@
|
|||
<template slot="outerContent">
|
||||
<FilterQueryModel @handelSettingQuery="handelSettingQuery" />
|
||||
<TableModel
|
||||
ref="tableRef"
|
||||
ref="lotProjectTableRef"
|
||||
:formLabel="allProjectFormLabel"
|
||||
:columnsList="childColumnsList"
|
||||
:testTableList="childTestTableList"
|
||||
:request-api="getAllProjectListAPI"
|
||||
:request-api="getLotProjectListAPI"
|
||||
:sendParams="{ mainProId: mainProId }"
|
||||
>
|
||||
<!-- 分包数量 -->
|
||||
<template slot="subCount" slot-scope="{ data }">
|
||||
<template slot="subNum" slot-scope="{ data }">
|
||||
<span
|
||||
class="cursor-blue"
|
||||
@click="onHandleCheckSubCount(data)"
|
||||
>
|
||||
{{ data.projectCount }}
|
||||
{{ data.subNum }}
|
||||
</span>
|
||||
</template>
|
||||
<!-- 班组数量 -->
|
||||
<template slot="teamCount" slot-scope="{ data }">
|
||||
<template slot="teamNum" slot-scope="{ data }">
|
||||
<span
|
||||
class="cursor-blue"
|
||||
@click="onHandleCheckTeamCount(data)"
|
||||
>
|
||||
{{ data.teamCount }}
|
||||
{{ data.teamNum }}
|
||||
</span>
|
||||
</template>
|
||||
<template
|
||||
|
|
@ -66,12 +66,14 @@
|
|||
slot-scope="{ data }"
|
||||
v-for="item in commonSlots"
|
||||
>
|
||||
<CommonTableSlots
|
||||
:key="item"
|
||||
:rowData="data"
|
||||
:slotName="item"
|
||||
@handleCheckPersonCount="handleCheckPersonCount"
|
||||
/>
|
||||
<template>
|
||||
<CommonTableSlots
|
||||
:key="item"
|
||||
:rowData="data"
|
||||
:slotName="item"
|
||||
@handleCheckPersonCount="handleCheckPersonCount"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</TableModel>
|
||||
</template>
|
||||
|
|
@ -88,14 +90,14 @@
|
|||
ref="subTableRef"
|
||||
:formLabel="subFormLabel"
|
||||
:columnsList="subColumnsList"
|
||||
:testTableList="subTestTableList"
|
||||
:request-api="getAllProjectListAPI"
|
||||
:request-api="getSubProjectListAPI"
|
||||
:sendParams="{ proId: proId }"
|
||||
>
|
||||
<!-- 在场班组数量 -->
|
||||
<template slot="teamCount" slot-scope="{ data }">
|
||||
<span
|
||||
class="cursor-blue"
|
||||
@click="onHandleCheckTeamCount(data)"
|
||||
@click="onHandleCheckTeamCountInSub(data)"
|
||||
>
|
||||
{{ data.teamCount }}
|
||||
</span>
|
||||
|
|
@ -105,18 +107,20 @@
|
|||
slot-scope="{ data }"
|
||||
v-for="item in commonSlots"
|
||||
>
|
||||
<CommonTableSlots
|
||||
:key="item"
|
||||
:rowData="data"
|
||||
:slotName="item"
|
||||
@handleCheckPersonCount="handleCheckPersonCount"
|
||||
/>
|
||||
<template>
|
||||
<CommonTableSlots
|
||||
:key="item"
|
||||
:rowData="data"
|
||||
:slotName="item"
|
||||
@handleCheckPersonCount="handleCheckPersonCount"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</TableModel>
|
||||
</template>
|
||||
</DialogModel>
|
||||
|
||||
<!-- 从班组信息弹框 -->
|
||||
<!-- 班组信息弹框 -->
|
||||
<DialogModel
|
||||
:dialogConfig="dialogConfigThree"
|
||||
@closeDialogOuter="handleCloseDialogOuterThree"
|
||||
|
|
@ -126,20 +130,22 @@
|
|||
ref="teamTableRef"
|
||||
:formLabel="teamFormLabel"
|
||||
:columnsList="teamColumnsList"
|
||||
:testTableList="teamTestTableList"
|
||||
:request-api="getAllProjectListAPI"
|
||||
:sendParams="{ proId: proId, subId: subId }"
|
||||
:request-api="getTeamProjectListAPI"
|
||||
>
|
||||
<template
|
||||
:slot="item"
|
||||
slot-scope="{ data }"
|
||||
v-for="item in commonSlots"
|
||||
>
|
||||
<CommonTableSlots
|
||||
:key="item"
|
||||
:rowData="data"
|
||||
:slotName="item"
|
||||
@handleCheckPersonCount="handleCheckPersonCount"
|
||||
/>
|
||||
<template>
|
||||
<CommonTableSlots
|
||||
:key="item"
|
||||
:rowData="data"
|
||||
:slotName="item"
|
||||
@handleCheckPersonCount="handleCheckPersonCount"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</TableModel>
|
||||
</template>
|
||||
|
|
@ -160,7 +166,6 @@
|
|||
:formLabel="personFormLabel"
|
||||
:columnsList="personColumnsList"
|
||||
:testTableList="personTestTableList"
|
||||
:request-api="getAllProjectListAPI"
|
||||
>
|
||||
<!-- 人员姓名 -->
|
||||
<template slot="userName" slot-scope="{ data }">
|
||||
|
|
@ -172,7 +177,7 @@
|
|||
</span>
|
||||
</template>
|
||||
<!-- 红绿灯状态 -->
|
||||
<template slot="redLightStatus" slot-scope="{ data }">
|
||||
<template slot="redLightStatus">
|
||||
<span
|
||||
style="
|
||||
color: #ff0000;
|
||||
|
|
@ -205,7 +210,13 @@ import DialogModel from '@/components/DialogModel'
|
|||
import FilterQueryModel from '@/components/FilterQueryModel'
|
||||
import CommonTableSlots from './common-table-slots'
|
||||
import PersonDetails from './person-details'
|
||||
import { getAllProjectListAPI } from '@/api/home-index/dataOverviewProject' // 获取列表数据接口
|
||||
|
||||
import {
|
||||
getTotalProjectListAPI,
|
||||
getLotProjectListAPI,
|
||||
getSubProjectListAPI,
|
||||
getTeamProjectListAPI,
|
||||
} from '@/api/home-index/index'
|
||||
import {
|
||||
// 总工程
|
||||
allProjectFormLabel,
|
||||
|
|
@ -235,6 +246,12 @@ import {
|
|||
} from './config'
|
||||
export default {
|
||||
name: 'ItemOne',
|
||||
props: {
|
||||
selectCompany: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
TableModel,
|
||||
DialogModel,
|
||||
|
|
@ -263,7 +280,10 @@ export default {
|
|||
dialogConfigThree,
|
||||
dialogConfigFour,
|
||||
dialogConfigFive,
|
||||
getAllProjectListAPI,
|
||||
getTotalProjectListAPI,
|
||||
getLotProjectListAPI,
|
||||
getSubProjectListAPI,
|
||||
getTeamProjectListAPI,
|
||||
queryParams: {},
|
||||
|
||||
commonSlots: [
|
||||
|
|
@ -271,18 +291,29 @@ export default {
|
|||
'todayAttendanceCount',
|
||||
'redLightCount',
|
||||
],
|
||||
|
||||
mainProId: '', // 总工程id
|
||||
proId: '', // 标段工程id
|
||||
subId: '', // 分包id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 点击工程数量
|
||||
onHandleCheckProjectCount(data) {
|
||||
console.log(data)
|
||||
this.mainProId = data.mainProId
|
||||
this.dialogConfig.outerTitle = '工程信息'
|
||||
this.dialogConfig.outerVisible = true
|
||||
},
|
||||
// 导出
|
||||
handleExport(queryParams) {
|
||||
console.log('导出', queryParams)
|
||||
// 总工程导出
|
||||
handleExportAllProject(queryParams) {
|
||||
this.download(
|
||||
'/bmw/homePageSub/mainProExport',
|
||||
{
|
||||
...queryParams,
|
||||
},
|
||||
`总工程列表.xlsx`,
|
||||
)
|
||||
},
|
||||
|
||||
// 关闭子项目概况弹框
|
||||
|
|
@ -318,6 +349,7 @@ export default {
|
|||
// 查看分包数量
|
||||
onHandleCheckSubCount(data) {
|
||||
console.log('查看分包数量', data)
|
||||
this.proId = data.proId
|
||||
this.dialogConfigTwo.outerTitle = '分包信息'
|
||||
this.dialogConfigTwo.outerVisible = true
|
||||
},
|
||||
|
|
@ -325,6 +357,15 @@ export default {
|
|||
// 查看班组数量
|
||||
onHandleCheckTeamCount(data) {
|
||||
console.log('查看班组数量', data)
|
||||
this.proId = data.proId
|
||||
this.subId = ''
|
||||
this.dialogConfigThree.outerTitle = '班组信息'
|
||||
this.dialogConfigThree.outerVisible = true
|
||||
},
|
||||
|
||||
// 查看班组数量 从分包点击查看班组
|
||||
onHandleCheckTeamCountInSub(data) {
|
||||
this.subId = data.subId
|
||||
this.dialogConfigThree.outerTitle = '班组信息'
|
||||
this.dialogConfigThree.outerVisible = true
|
||||
},
|
||||
|
|
@ -343,5 +384,15 @@ export default {
|
|||
this.dialogConfigFive.outerVisible = true
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectCompany: {
|
||||
handler() {
|
||||
// this.getTotalProjectList()
|
||||
this.$refs.allProjectTableRef.getTableList()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
"
|
||||
/>
|
||||
<div>
|
||||
<span>{{ item.count }}</span>
|
||||
<span>{{ dataOverviewData[item.dataKey] }}</span>
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
{{ item.name }}
|
||||
</span>
|
||||
<span :style="{ color: item.color }">
|
||||
{{ item.count }}
|
||||
{{ dataOverviewData[item.dataKey] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -58,7 +58,10 @@
|
|||
>
|
||||
<template slot="outerContent">
|
||||
<!-- 使用动态组件 确保组件名称和组件文件名称一致 -->
|
||||
<component :is="currentComponent" />
|
||||
<component
|
||||
:is="currentComponent"
|
||||
:selectCompany="selectCompany"
|
||||
/>
|
||||
</template>
|
||||
</DialogModel>
|
||||
</div>
|
||||
|
|
@ -67,6 +70,7 @@
|
|||
<script>
|
||||
import DialogModel from '@/components/DialogModel'
|
||||
import ItemOne from './components/item-one.vue' // 总工程列表
|
||||
import { getDataOverviewProjectAPI } from '@/api/home-index/index'
|
||||
export default {
|
||||
name: 'DataOverviewProject',
|
||||
components: {
|
||||
|
|
@ -76,8 +80,8 @@ export default {
|
|||
props: {
|
||||
// 选择的公司
|
||||
selectCompany: {
|
||||
type: String,
|
||||
default: '全部',
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
@ -85,58 +89,67 @@ export default {
|
|||
// 工程列表
|
||||
projectList: [
|
||||
{
|
||||
count: 1,
|
||||
name: '总工程',
|
||||
count: 1,
|
||||
component: 'ItemOne',
|
||||
icon: 'all-project',
|
||||
component: 'ItemOne',
|
||||
dataKey: 'mainProNum',
|
||||
},
|
||||
{
|
||||
name: '标段工程',
|
||||
count: 20,
|
||||
component: 'ItemTwo',
|
||||
name: '标段工程',
|
||||
dataKey: 'proNum',
|
||||
icon: 'lot-project',
|
||||
component: 'ItemTwo',
|
||||
},
|
||||
{
|
||||
name: '在用分包单位',
|
||||
count: 1,
|
||||
component: 'ItemThree',
|
||||
icon: 'sub-unit',
|
||||
dataKey: 'subNum',
|
||||
name: '在用分包单位',
|
||||
component: 'ItemThree',
|
||||
},
|
||||
{
|
||||
name: '在用班组',
|
||||
count: 50,
|
||||
component: 'ItemFour',
|
||||
name: '在用班组',
|
||||
icon: 'use-teams',
|
||||
dataKey: 'teamNum',
|
||||
component: 'ItemFour',
|
||||
},
|
||||
{
|
||||
name: '在场人员',
|
||||
count: 1,
|
||||
name: '在场人员',
|
||||
dataKey: 'einNum',
|
||||
component: 'ItemFive',
|
||||
icon: 'on-site-person',
|
||||
},
|
||||
{
|
||||
name: '今日打卡',
|
||||
count: 80,
|
||||
component: 'ItemSix',
|
||||
name: '今日打卡',
|
||||
icon: 'clock-in',
|
||||
dataKey: 'attNum',
|
||||
component: 'ItemSix',
|
||||
},
|
||||
],
|
||||
// 数据预警列表
|
||||
dataWarningList: [
|
||||
{
|
||||
name: '黄灯人数',
|
||||
count: 1,
|
||||
name: '黄灯人数',
|
||||
color: '#ff9910',
|
||||
dataKey: 'yellowNum',
|
||||
},
|
||||
{
|
||||
name: '黄灯7天',
|
||||
count: 20,
|
||||
name: '黄灯7天',
|
||||
color: '#FF0000',
|
||||
dataKey: 'yellowThanSevenDayNum',
|
||||
},
|
||||
{
|
||||
name: '出场未结算',
|
||||
count: 40,
|
||||
name: '出场未结算',
|
||||
color: '#8400ff',
|
||||
dataKey: 'exitNoFileNum',
|
||||
},
|
||||
],
|
||||
// 弹框配置
|
||||
|
|
@ -148,6 +161,19 @@ export default {
|
|||
maxHeight: '80vh',
|
||||
},
|
||||
|
||||
// 数据概览数据
|
||||
dataOverviewData: {
|
||||
mainProNum: 0, // 总工程
|
||||
proNum: 0, // 标段工程
|
||||
subNum: 0, // 在用分包单位
|
||||
teamNum: 0, // 在用班组
|
||||
einNum: 0, // 在场人员
|
||||
attNum: 0, // 今日打卡
|
||||
yellowNum: 0, // 黄灯人数
|
||||
yellowThanSevenDayNum: 0, // 黄灯7天
|
||||
exitNoFileNum: 0, // 出场未结算
|
||||
},
|
||||
|
||||
// 展示的组件
|
||||
currentComponent: 'ItemOne', // 默认总工程列表
|
||||
}
|
||||
|
|
@ -168,6 +194,48 @@ export default {
|
|||
this.dialogConfig.outerVisible = true
|
||||
console.log(item)
|
||||
},
|
||||
|
||||
// 获取数据概览
|
||||
async getHomeIndexData() {
|
||||
const { data: res } = await getDataOverviewProjectAPI({
|
||||
subComId: this.selectCompany,
|
||||
})
|
||||
const {
|
||||
proNum,
|
||||
subNum,
|
||||
einNum,
|
||||
attNum,
|
||||
teamNum,
|
||||
yellowNum,
|
||||
mainProNum,
|
||||
exitNoFileNum,
|
||||
yellowThanSevenDayNum,
|
||||
} = res
|
||||
this.dataOverviewData = {
|
||||
proNum,
|
||||
subNum,
|
||||
einNum,
|
||||
attNum,
|
||||
teamNum,
|
||||
yellowNum,
|
||||
mainProNum,
|
||||
exitNoFileNum,
|
||||
yellowThanSevenDayNum,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getHomeIndexData()
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectCompany: {
|
||||
handler() {
|
||||
this.getHomeIndexData()
|
||||
},
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ export default {
|
|||
props: {
|
||||
// 百分比
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: 50,
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
// 颜色
|
||||
pieColor: {
|
||||
|
|
@ -23,8 +23,8 @@ export default {
|
|||
},
|
||||
// 类型
|
||||
type: {
|
||||
type: String,
|
||||
default: 'fixed',
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
@ -48,7 +48,7 @@ export default {
|
|||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
const percentage = this.percentage.replace('%', '')
|
||||
this.chart.setOption({
|
||||
series: [
|
||||
{
|
||||
|
|
@ -61,7 +61,7 @@ export default {
|
|||
position: 'center',
|
||||
fontSize: 16,
|
||||
fontWeight: 'bold',
|
||||
formatter: `${this.percentage}%`, // 中心显示百分比
|
||||
formatter: `${this.percentage}`, // 中心显示百分比
|
||||
color: '#686767', // 文字颜色
|
||||
},
|
||||
emphasis: {
|
||||
|
|
@ -75,7 +75,7 @@ export default {
|
|||
},
|
||||
data: [
|
||||
{
|
||||
value: this.percentage,
|
||||
value: percentage,
|
||||
name: '完成进度',
|
||||
itemStyle: {
|
||||
color: this.pieColor,
|
||||
|
|
@ -83,7 +83,7 @@ export default {
|
|||
},
|
||||
},
|
||||
{
|
||||
value: 100 - this.percentage,
|
||||
value: 100 - percentage,
|
||||
name: '剩余进度',
|
||||
itemStyle: { color: '#eee' }, // 灰色背景
|
||||
},
|
||||
|
|
@ -97,6 +97,14 @@ export default {
|
|||
})
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
percentage: {
|
||||
handler() {
|
||||
this.initChart()
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -11,19 +11,38 @@
|
|||
{{ item.name }}
|
||||
</div>
|
||||
<div>
|
||||
{{ item.count }}
|
||||
{{
|
||||
item.type !== 5
|
||||
? personAttendanceData[item.dataKey]
|
||||
: attCountAll
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
<span> 在场人数:{{ item.lineCount }} </span>
|
||||
<span v-if="item.type === 1 || item.type === 2">
|
||||
在场人数:{{ lineCount }}
|
||||
</span>
|
||||
<span v-if="item.type === 3">
|
||||
在场人数(固定):{{ personAttendanceData.attNum }}
|
||||
</span>
|
||||
<span v-if="item.type === 4">
|
||||
在场人数(临时):{{
|
||||
personAttendanceData.tempAttNum
|
||||
}}
|
||||
</span>
|
||||
<span v-if="item.type === 5">
|
||||
今日打卡/在场人数:{{ attCountAll }}/{{
|
||||
lineCount
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="right" :key="item.dataKey">
|
||||
<CirclePie
|
||||
:type="item.type"
|
||||
:pieColor="item.color"
|
||||
:percentage="item.rate"
|
||||
@handleOpenDialog="handleOpenDialog"
|
||||
:percentage="personAttendanceData[item.rateKey]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,62 +53,130 @@
|
|||
|
||||
<script>
|
||||
import CirclePie from './components/circlePie.vue'
|
||||
import { getPersonAttendanceAPI } from '@/api/home-index/index'
|
||||
|
||||
export default {
|
||||
name: 'PersonAttendance',
|
||||
components: {
|
||||
CirclePie,
|
||||
},
|
||||
props: {
|
||||
selectCompany: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
personList: [
|
||||
{
|
||||
name: '在场固定人员占比',
|
||||
count: 10,
|
||||
rate: 98.6,
|
||||
type: 1,
|
||||
color: '#36cf93',
|
||||
lineCount: 10,
|
||||
type: 'fixed',
|
||||
dataKey: 'einNum',
|
||||
name: '在场固定人员占比',
|
||||
rateKey: 'workerPercentage',
|
||||
},
|
||||
{
|
||||
name: '在场临时人员占比',
|
||||
count: 10,
|
||||
rate: 100,
|
||||
color: '#2d9afb',
|
||||
lineCount: 10,
|
||||
type: 'temporary',
|
||||
type: 2,
|
||||
dataKey: 'tempNum',
|
||||
name: '在场临时人员占比',
|
||||
rateKey: 'tempWorkerPercentage',
|
||||
},
|
||||
{
|
||||
name: '固定人员考勤率',
|
||||
count: 10,
|
||||
rate: 76.3,
|
||||
type: 3,
|
||||
color: '#fcaf03',
|
||||
lineCount: 10,
|
||||
type: 'fixed',
|
||||
dataKey: 'attNum',
|
||||
name: '固定人员考勤率',
|
||||
rateKey: 'tempWorkerAttPercentage',
|
||||
},
|
||||
{
|
||||
name: '临时人员考勤率',
|
||||
count: 10,
|
||||
rate: 56.0,
|
||||
color: '#fb4150',
|
||||
lineCount: 10,
|
||||
type: 'temporary',
|
||||
type: 4,
|
||||
name: '临时人员考勤率',
|
||||
dataKey: 'tempAttNum',
|
||||
rateKey: 'tempWorkerAttPercentage',
|
||||
},
|
||||
{
|
||||
name: '在场考勤率(打卡)',
|
||||
count: 10,
|
||||
rate: 99.5,
|
||||
type: 5,
|
||||
color: '#00ffff',
|
||||
lineCount: 10,
|
||||
type: 'fixed',
|
||||
dataKey: 'einNum',
|
||||
name: '在场考勤率(打卡)',
|
||||
rateKey: 'einAttPercentage',
|
||||
},
|
||||
],
|
||||
|
||||
// 人员考勤数据
|
||||
personAttendanceData: {
|
||||
einNum: 0, // 固定人员
|
||||
workerPercentage: '0%', // 在场固定人员占比
|
||||
|
||||
tempNum: 0, // 在场临时人数
|
||||
tempWorkerPercentage: '0%', // 在场临时人数占比
|
||||
|
||||
attNum: 0, // 固定人员考勤数
|
||||
workerAttPercentage: '0%', // 固定人员考勤率
|
||||
|
||||
tempAttNum: 0, // 临时人员考勤数
|
||||
tempWorkerAttPercentage: '0%', // 临时人员考勤率
|
||||
|
||||
einAttPercentage: '0%', // 在场考勤率(打卡)
|
||||
},
|
||||
|
||||
lineCount: 0, // 在场人数
|
||||
attCountAll: 0, // 总打卡人数
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleOpenDialog(type) {
|
||||
console.log(type, '打开弹框----')
|
||||
// console.log(type, '打开弹框----')
|
||||
},
|
||||
|
||||
// 获取人员考勤
|
||||
async getPersonAttendance() {
|
||||
const { data: res } = await getPersonAttendanceAPI({
|
||||
subComId: this.selectCompany,
|
||||
})
|
||||
const {
|
||||
einNum,
|
||||
attNum,
|
||||
tempNum,
|
||||
tempAttNum,
|
||||
workerPercentage,
|
||||
einAttPercentage,
|
||||
workerAttPercentage,
|
||||
tempWorkerPercentage,
|
||||
tempWorkerAttPercentage,
|
||||
} = res
|
||||
|
||||
this.personAttendanceData = {
|
||||
einNum,
|
||||
attNum,
|
||||
tempNum,
|
||||
tempAttNum,
|
||||
workerPercentage,
|
||||
einAttPercentage,
|
||||
workerAttPercentage,
|
||||
tempWorkerPercentage,
|
||||
tempWorkerAttPercentage,
|
||||
}
|
||||
|
||||
this.lineCount = einNum + tempNum
|
||||
this.attCountAll = attNum + tempAttNum
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getPersonAttendance()
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectCompany: {
|
||||
handler() {
|
||||
this.getPersonAttendance()
|
||||
},
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -22,33 +22,6 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
pieData: [
|
||||
{
|
||||
name: '基建线路',
|
||||
value: 120,
|
||||
},
|
||||
{
|
||||
name: '基建变电',
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
name: '生产线路',
|
||||
value: 30,
|
||||
},
|
||||
|
||||
{
|
||||
name: '生产变电',
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: '配网',
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
value: 12,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -258,13 +231,13 @@ export default {
|
|||
watch: {
|
||||
configData: {
|
||||
handler(val) {
|
||||
if (val) {
|
||||
if (val.data.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
this.initChart(val)
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,19 +4,23 @@
|
|||
<div class="person-ratio-row">
|
||||
<div>
|
||||
<svg-icon icon-class="fixed-person" style="font-size: 32px" />
|
||||
<span @click="onHandleOpenDialog('fixed')">197</span>
|
||||
<span @click="onHandleOpenDialog('fixed')">
|
||||
{{ personAttendanceData.einNum }}</span
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<svg-icon icon-class="temp-person" style="font-size: 26px" />
|
||||
<span @click="onHandleOpenDialog('temp')">197</span>
|
||||
<span @click="onHandleOpenDialog('temp')">
|
||||
{{ personAttendanceData.tempNum }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-progress
|
||||
:format="format"
|
||||
:color="customColor"
|
||||
:percentage="percentage"
|
||||
:text-inside="true"
|
||||
:percentage="percentage"
|
||||
/>
|
||||
|
||||
<div class="person-ratio-row-title">
|
||||
|
|
@ -33,7 +37,7 @@
|
|||
"
|
||||
@click="onHandleOpenDialog('fixed')"
|
||||
>
|
||||
98.6%
|
||||
{{ personAttendanceData.workerPercentage }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
|
|
@ -44,19 +48,32 @@
|
|||
"
|
||||
@click="onHandleOpenDialog('temp')"
|
||||
>
|
||||
96.3%
|
||||
{{ personAttendanceData.einAttPercentage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPersonAttendanceAPI } from '@/api/home-index/index'
|
||||
export default {
|
||||
name: 'PersonRatio',
|
||||
props: {
|
||||
selectCompany: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
customColor: '#52c1f5',
|
||||
percentage: 80,
|
||||
percentage: 0,
|
||||
personAttendanceData: {
|
||||
einNum: 0,
|
||||
tempNum: 0,
|
||||
workerPercentage: 0,
|
||||
einAttPercentage: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -66,6 +83,35 @@ export default {
|
|||
onHandleOpenDialog(type) {
|
||||
console.log(type, '打开弹框---')
|
||||
},
|
||||
|
||||
// 获取人员考勤
|
||||
async getPersonAttendance() {
|
||||
const { data: res } = await getPersonAttendanceAPI({
|
||||
subComId: this.selectCompany,
|
||||
})
|
||||
const { einNum, tempNum, workerPercentage, einAttPercentage } = res
|
||||
this.personAttendanceData = {
|
||||
einNum,
|
||||
tempNum,
|
||||
workerPercentage,
|
||||
einAttPercentage,
|
||||
}
|
||||
|
||||
this.percentage = workerPercentage.replace('%', '') * 1
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getPersonAttendance()
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectCompany: {
|
||||
handler() {
|
||||
this.getPersonAttendance()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,37 +10,16 @@ import resize from '@/views/dashboard/mixins/resize'
|
|||
export default {
|
||||
name: 'ItemPie',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
sexRatioData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
pieData: [
|
||||
{
|
||||
name: '基建线路',
|
||||
value: 120,
|
||||
},
|
||||
{
|
||||
name: '基建变电',
|
||||
value: 80,
|
||||
},
|
||||
{
|
||||
name: '生产线路',
|
||||
value: 30,
|
||||
},
|
||||
|
||||
{
|
||||
name: '生产变电',
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: '配网',
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
value: 12,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -60,6 +39,13 @@ export default {
|
|||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
const all = this.sexRatioData.mailNum + this.sexRatioData.feMailNum
|
||||
const mailNum = ((this.sexRatioData.mailNum / all) * 100).toFixed(1)
|
||||
const feMailNum = (
|
||||
(this.sexRatioData.feMailNum / all) *
|
||||
100
|
||||
).toFixed(1)
|
||||
|
||||
var symbols = [
|
||||
'path://M18.2629891,11.7131596 L6.8091608,11.7131596 C1.6685112,11.7131596 0,13.032145 0,18.6237673 L0,34.9928467 C0,38.1719847 4.28388932,38.1719847 4.28388932,34.9928467 L4.65591984,20.0216948 L5.74941883,20.0216948 L5.74941883,61.000787 C5.74941883,65.2508314 11.5891201,65.1268798 11.5891201,61.000787 L11.9611506,37.2137775 L13.1110872,37.2137775 L13.4831177,61.000787 C13.4831177,65.1268798 19.3114787,65.2508314 19.3114787,61.000787 L19.3114787,20.0216948 L20.4162301,20.0216948 L20.7882606,34.9928467 C20.7882606,38.1719847 25.0721499,38.1719847 25.0721499,34.9928467 L25.0721499,18.6237673 C25.0721499,13.032145 23.4038145,11.7131596 18.2629891,11.7131596 M12.5361629,1.11022302e-13 C15.4784742,1.11022302e-13 17.8684539,2.38997966 17.8684539,5.33237894 C17.8684539,8.27469031 15.4784742,10.66467 12.5361629,10.66467 C9.59376358,10.66467 7.20378392,8.27469031 7.20378392,5.33237894 C7.20378392,2.38997966 9.59376358,1.11022302e-13 12.5361629,1.11022302e-13',
|
||||
'path://M28.9624207,31.5315864 L24.4142575,16.4793596 C23.5227152,13.8063773 20.8817445,11.7111088 17.0107398,11.7111088 L12.112691,11.7111088 C8.24168636,11.7111088 5.60080331,13.8064652 4.70917331,16.4793596 L0.149791395,31.5315864 C-0.786976655,34.7595013 2.9373074,35.9147532 3.9192135,32.890727 L8.72689855,19.1296485 L9.2799493,19.1296485 C9.2799493,19.1296485 2.95992025,43.7750224 2.70031069,44.6924335 C2.56498417,45.1567684 2.74553639,45.4852068 3.24205501,45.4852068 L8.704461,45.4852068 L8.704461,61.6700801 C8.704461,64.9659872 13.625035,64.9659872 13.625035,61.6700801 L13.625035,45.360657 L15.5097899,45.360657 L15.4984835,61.6700801 C15.4984835,64.9659872 20.4191451,64.9659872 20.4191451,61.6700801 L20.4191451,45.4852068 L25.8814635,45.4852068 C26.3667633,45.4852068 26.5586219,45.1567684 26.4345142,44.6924335 C26.1636859,43.7750224 19.8436568,19.1296485 19.8436568,19.1296485 L20.3966199,19.1296485 L25.2043926,32.890727 C26.1862111,35.9147532 29.9105828,34.7595013 28.9625083,31.5315864 L28.9624207,31.5315864 Z M14.5617154,0 C17.4960397,0 19.8773132,2.3898427 19.8773132,5.33453001 C19.8773132,8.27930527 17.4960397,10.66906 14.5617154,10.66906 C11.6274788,10.66906 9.24611767,8.27930527 9.24611767,5.33453001 C9.24611767,2.3898427 11.6274788,0 14.5617154,0 L14.5617154,0 Z',
|
||||
|
|
@ -72,10 +58,10 @@ export default {
|
|||
position: 'bottom',
|
||||
offset: [0, 10],
|
||||
formatter: function (param) {
|
||||
return `${param.data.sex} ${param.data.count}人`
|
||||
return `${param.data.sex} (${param.data.count})\n${param.data.value}%`
|
||||
},
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
fontFamily: 'Arial',
|
||||
color: '#686868',
|
||||
},
|
||||
|
|
@ -146,9 +132,9 @@ export default {
|
|||
label: labelSetting,
|
||||
data: [
|
||||
{
|
||||
value: 26.5,
|
||||
value: mailNum,
|
||||
sex: '男性:',
|
||||
count: 38,
|
||||
count: this.sexRatioData.mailNum,
|
||||
symbol: symbols[0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
|
|
@ -158,8 +144,8 @@ export default {
|
|||
},
|
||||
{},
|
||||
{
|
||||
value: 73.5,
|
||||
count: 109,
|
||||
value: feMailNum,
|
||||
count: this.sexRatioData.feMailNum,
|
||||
sex: '女性:',
|
||||
symbol: symbols[1],
|
||||
itemStyle: {
|
||||
|
|
@ -228,6 +214,15 @@ export default {
|
|||
})
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
sexRatioData: {
|
||||
handler(val) {
|
||||
this.initChart()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<el-col :span="4">
|
||||
<div class="item item-1">
|
||||
<div class="item-title"> 性别分布 </div>
|
||||
<SexRatio />
|
||||
<SexRatio :sexRatioData="sexRatioData" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<el-col :span="5">
|
||||
<div class="item item-5">
|
||||
<div class="item-title"> 固定、临时人员 </div>
|
||||
<PersonRatio />
|
||||
<PersonRatio :selectCompany="selectCompany" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -43,105 +43,142 @@
|
|||
import SexRatio from './components/sex-ratio.vue'
|
||||
import ItemPie from './components/item-pie.vue'
|
||||
import PersonRatio from './components/person-ratio.vue'
|
||||
import { getPersonPresenceAPI } from '@/api/home-index/index'
|
||||
export default {
|
||||
name: 'PersonPresence',
|
||||
props: {
|
||||
selectCompany: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
components: {
|
||||
SexRatio,
|
||||
ItemPie,
|
||||
PersonRatio,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
selectCompany: '全部',
|
||||
companyList: ['全部', '输一', '输二', '输三', '输四'],
|
||||
colorList: [
|
||||
'#3498db',
|
||||
'#2ecc71',
|
||||
'#e74c3c',
|
||||
'#f39c12',
|
||||
'#9b59b6',
|
||||
'#1abc9c',
|
||||
'#ff7675',
|
||||
'#fd79a8',
|
||||
'#fdcb6e',
|
||||
'#e17055',
|
||||
'#fab1a0',
|
||||
'#ff9ff3',
|
||||
'#0984e3',
|
||||
'#00cec9',
|
||||
'#6c5ce7',
|
||||
'#00b894',
|
||||
'#55efc4',
|
||||
'#81ecec',
|
||||
'#74b9ff',
|
||||
'#a29bfe',
|
||||
'#ffeaa7',
|
||||
'#fd79a8',
|
||||
'#ff6b6b',
|
||||
'#ff9f43',
|
||||
'#feca57',
|
||||
'#48dbfb',
|
||||
'#54a0ff',
|
||||
'#5f27cd',
|
||||
],
|
||||
pieOneConfig: {
|
||||
showAfter: false, // value 是否在后面
|
||||
data: [
|
||||
{
|
||||
name: '普工',
|
||||
value: 120,
|
||||
color: '#a8ff78',
|
||||
},
|
||||
{
|
||||
name: '技工',
|
||||
value: 80,
|
||||
color: '#78ffd6',
|
||||
},
|
||||
{
|
||||
name: '高空',
|
||||
value: 30,
|
||||
color: '#1E9600',
|
||||
},
|
||||
|
||||
{
|
||||
name: '电焊',
|
||||
value: 12,
|
||||
color: '#FFF200',
|
||||
},
|
||||
{
|
||||
name: '其它',
|
||||
value: 12,
|
||||
color: '#FF0000',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
},
|
||||
pieTwoConfig: {
|
||||
showAfter: true, // value 是否在后面
|
||||
data: [
|
||||
{
|
||||
name: '<20',
|
||||
value: 120,
|
||||
color: '#ad5389',
|
||||
},
|
||||
{
|
||||
name: '20-30',
|
||||
value: 80,
|
||||
color: '#3c1053',
|
||||
},
|
||||
{
|
||||
name: '30-40',
|
||||
value: 30,
|
||||
color: '#40E0D0',
|
||||
},
|
||||
|
||||
{
|
||||
name: '40-50',
|
||||
value: 12,
|
||||
color: '#FF8C00',
|
||||
},
|
||||
{
|
||||
name: '50-60',
|
||||
value: 12,
|
||||
color: '#FF0080',
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
},
|
||||
pieThreeConfig: {
|
||||
showAfter: false, // value 是否在后面
|
||||
data: [
|
||||
{
|
||||
name: '绿灯',
|
||||
value: 120,
|
||||
color: '#96c93d',
|
||||
value: 0,
|
||||
color: '#67C23A',
|
||||
},
|
||||
{
|
||||
name: '黄灯',
|
||||
value: 80,
|
||||
color: '#CAC531',
|
||||
},
|
||||
{
|
||||
name: '红灯',
|
||||
value: 30,
|
||||
color: '#b21f1f',
|
||||
value: 0,
|
||||
color: 'rgb(248, 248, 7)',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
sexRatioData: {
|
||||
feMailNum: 0, // 女性
|
||||
mailNum: 0, // 男性
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onHandleCheckOften() {
|
||||
this.$emit('handleCheckOften')
|
||||
},
|
||||
|
||||
async getPersonPresence() {
|
||||
const { data: res } = await getPersonPresenceAPI({
|
||||
companyId: this.selectCompany,
|
||||
})
|
||||
|
||||
const { feMailNum, mailNum, postMsg, greenNum, yellowNum } = res
|
||||
this.sexRatioData = {
|
||||
feMailNum,
|
||||
mailNum,
|
||||
}
|
||||
|
||||
this.pieOneConfig.data = postMsg.map((item) => {
|
||||
return {
|
||||
name: item.key,
|
||||
value: item.value * 1,
|
||||
color: this.getRandomColor(),
|
||||
}
|
||||
})
|
||||
|
||||
for (const key in res) {
|
||||
if (key.slice(0, 3) === 'num') {
|
||||
console.log('999++')
|
||||
this.pieTwoConfig.data.push({
|
||||
name: key.split('num')[1],
|
||||
value: res[key],
|
||||
color: this.getRandomColor(),
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.pieThreeConfig.data[0].value = greenNum
|
||||
this.pieThreeConfig.data[1].value = yellowNum
|
||||
|
||||
console.log(this.pieTwoConfig, 'this.pieTwoConfig.data')
|
||||
},
|
||||
|
||||
// 随机生成一个颜色
|
||||
getRandomColor() {
|
||||
return this.colorList[
|
||||
Math.floor(Math.random() * this.colorList.length)
|
||||
]
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getPersonPresence()
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectCompany: {
|
||||
handler() {
|
||||
this.getPersonPresence()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -34,38 +34,49 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'ItemOne',
|
||||
props: {
|
||||
oneInfo: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
itemOneList: [
|
||||
{
|
||||
value: 0,
|
||||
name: '在建工程',
|
||||
value: '123',
|
||||
icon: 'line-project',
|
||||
color: '82, 193, 245',
|
||||
dataKey: 'buildProNum',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '筹建工程',
|
||||
value: '10',
|
||||
icon: 'prepare-project',
|
||||
color: '255, 169, 76',
|
||||
icon: 'prepare-project',
|
||||
dataKey: 'prepareProNum',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '停工工程',
|
||||
value: '30',
|
||||
icon: 'stop-project',
|
||||
color: '251,98,96',
|
||||
icon: 'stop-project',
|
||||
dataKey: 'stopProNum',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '完工工程',
|
||||
value: '56',
|
||||
icon: 'finish-project',
|
||||
color: '81, 211, 81',
|
||||
icon: 'finish-project',
|
||||
dataKey: 'completeProNum',
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '遗留收尾',
|
||||
value: '98',
|
||||
icon: 'remain-project',
|
||||
color: '160, 207, 255',
|
||||
dataKey: 'legacyProNum',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -74,6 +85,21 @@ export default {
|
|||
onHandleOpenDialog(item) {
|
||||
console.log(item.name, '打开弹框----')
|
||||
},
|
||||
|
||||
initData() {
|
||||
this.itemOneList.forEach((item) => {
|
||||
item.value = this.oneInfo[item.dataKey]
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
oneInfo: {
|
||||
handler() {
|
||||
this.initData()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,34 +10,46 @@ import resize from '@/views/dashboard/mixins/resize'
|
|||
export default {
|
||||
name: 'ItemThree',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
threeData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
pieData: [
|
||||
{
|
||||
value: 0,
|
||||
name: '基建线路',
|
||||
value: 120,
|
||||
dataKey: 'infrastructureLine',
|
||||
},
|
||||
{
|
||||
name: '基建变电',
|
||||
value: 80,
|
||||
value: 0,
|
||||
dataKey: 'infrastructureSubstation',
|
||||
},
|
||||
{
|
||||
name: '生产线路',
|
||||
value: 30,
|
||||
value: 0,
|
||||
dataKey: 'productionLine',
|
||||
},
|
||||
|
||||
{
|
||||
name: '生产变电',
|
||||
value: 12,
|
||||
value: 0,
|
||||
dataKey: 'productionSubstation',
|
||||
},
|
||||
{
|
||||
name: '配网',
|
||||
value: 12,
|
||||
value: 0,
|
||||
dataKey: 'network',
|
||||
},
|
||||
{
|
||||
name: '其他',
|
||||
value: 12,
|
||||
value: 0,
|
||||
dataKey: 'proNum',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
@ -58,7 +70,10 @@ export default {
|
|||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const pieData = this.pieData
|
||||
const pieData = this.pieData.map((item) => ({
|
||||
...item,
|
||||
value: this.threeData[item.dataKey],
|
||||
}))
|
||||
|
||||
// 默认显示第一条数据
|
||||
const defaultSelectedIndex = 0
|
||||
|
|
@ -238,6 +253,15 @@ export default {
|
|||
})
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
threeData: {
|
||||
handler() {
|
||||
this.initChart()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ import resize from '@/views/dashboard/mixins/resize'
|
|||
export default {
|
||||
name: 'ItemTwo',
|
||||
mixins: [resize],
|
||||
props: {
|
||||
twoData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
|
|
@ -44,9 +50,9 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
// this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
// })
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
|
|
@ -58,10 +64,13 @@ export default {
|
|||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
const xAxisData = this.chartData.map((item) => item.name).reverse()
|
||||
const seriesData = this.chartData
|
||||
.map((item) => item.value)
|
||||
.reverse()
|
||||
// const xAxisData = this.chartData.map((item) => item.name).reverse()
|
||||
// const seriesData = this.chartData
|
||||
// .map((item) => item.value)
|
||||
// .reverse()
|
||||
|
||||
const xAxisData = this.twoData.map((item) => item.name).reverse()
|
||||
const seriesData = this.twoData.map((item) => item.value).reverse()
|
||||
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
|
|
@ -139,6 +148,17 @@ export default {
|
|||
})
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
twoData: {
|
||||
handler(val) {
|
||||
if (val.length > 0) {
|
||||
this.initChart()
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,17 +6,17 @@
|
|||
<el-row :gutter="10" class="project-info-content">
|
||||
<el-col :span="6">
|
||||
<div class="item-1">
|
||||
<ItemOne />
|
||||
<ItemOne :oneInfo="oneInfo" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<div class="item-2">
|
||||
<ItemTwo />
|
||||
<ItemTwo :twoData="twoData" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="item-3">
|
||||
<ItemThree />
|
||||
<ItemThree :threeData="threeData" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
|
@ -29,17 +29,119 @@ import ItemOne from './components/item-one.vue'
|
|||
import ItemTwo from './components/item-two.vue'
|
||||
import ItemThree from './components/item-three.vue'
|
||||
|
||||
import { getProjectInfoAPI } from '@/api/home-index/index'
|
||||
|
||||
export default {
|
||||
name: 'ProjectInfo',
|
||||
dicts: ['voltage_level'],
|
||||
components: {
|
||||
ItemOne,
|
||||
ItemTwo,
|
||||
ItemThree,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
props: {
|
||||
selectCompany: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
oneInfo: {
|
||||
buildProNum: 0, // 在建工程
|
||||
prepareProNum: 0, // 筹建工程
|
||||
stopProNum: 0, // 停工工程
|
||||
completeProNum: 0, // 完工工程
|
||||
legacyProNum: 0, // 遗留收尾
|
||||
},
|
||||
twoData: [],
|
||||
threeData: {
|
||||
infrastructureLine: 0, // 基建线路
|
||||
infrastructureSubstation: 0, // 基建变电
|
||||
productionLine: 0, // 生产线路
|
||||
productionSubstation: 0, // 生产变电
|
||||
network: 0, // 配网
|
||||
proNum: 0,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async getProjectInfo() {
|
||||
const { data: res } = await getProjectInfoAPI({
|
||||
companyId: this.selectCompany,
|
||||
})
|
||||
|
||||
const {
|
||||
buildProNum,
|
||||
prepareProNum,
|
||||
stopProNum,
|
||||
completeProNum,
|
||||
legacyProNum,
|
||||
} = res
|
||||
|
||||
this.oneInfo = {
|
||||
buildProNum,
|
||||
prepareProNum,
|
||||
stopProNum,
|
||||
completeProNum,
|
||||
legacyProNum,
|
||||
}
|
||||
this.twoData = []
|
||||
for (const key in res) {
|
||||
// this.dict.type.voltage_level.forEach((item) => {
|
||||
// if (
|
||||
// key.includes('level') &&
|
||||
// item.value.includes(key.split('level')[1])
|
||||
// ) {
|
||||
// this.twoData.push({
|
||||
// name: item.label,
|
||||
// value: res[key],
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
|
||||
if (key.includes('level')) {
|
||||
this.twoData.push({
|
||||
name: key.split('level')[1] + 'kV',
|
||||
value: res[key],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
console.log(this.twoData, 'twoData')
|
||||
|
||||
const {
|
||||
infrastructureLine,
|
||||
infrastructureSubstation,
|
||||
productionLine,
|
||||
productionSubstation,
|
||||
network,
|
||||
proNum,
|
||||
} = res
|
||||
|
||||
this.threeData = {
|
||||
infrastructureLine,
|
||||
infrastructureSubstation,
|
||||
productionLine,
|
||||
productionSubstation,
|
||||
network,
|
||||
proNum,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getProjectInfo()
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectCompany: {
|
||||
handler() {
|
||||
this.getProjectInfo()
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
showOftenUse: true, // 常用功能是否显示
|
||||
selectCompany: '全部', // tap 选择的公司
|
||||
selectCompany: '', // tap 选择的公司
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue