1126 lines
27 KiB
Vue
1126 lines
27 KiB
Vue
<template>
|
||
<view>
|
||
<u-sticky>
|
||
<HeaderNav title="绩效"></HeaderNav>
|
||
</u-sticky>
|
||
<view class="per-title" @click="changeOpen" style="margin-top: 10px;">
|
||
<view class="personal-choose">
|
||
<view class="personal-big">个人绩效</view>
|
||
<view class="personal-small">（近6个月）</view>
|
||
</view>
|
||
<view>
|
||
<view v-if="openPerson===false">
|
||
<u-icon name="arrow-up"></u-icon>
|
||
</view>
|
||
<view v-if="openPerson===true">
|
||
<u-icon name="arrow-down"></u-icon>
|
||
</view>
|
||
</view>
|
||
<!-- <view :class="chooseIndex === false?'tissue-choose':'tissue'" @click="changeTisIndex">组织绩效</view> -->
|
||
</view>
|
||
<!-- </u-sticky> -->
|
||
<view class="performance" v-if="openPerson===true">
|
||
|
||
|
||
<view>
|
||
<view class="task-num">
|
||
<!-- <view style="font-size: 20px;font-weight: bold;margin-bottom: 20px;">
|
||
我的数据
|
||
</view> -->
|
||
<view class="data-content">
|
||
<view class="data-wrap">
|
||
<view class="data-title">
|
||
<!-- <view class="data-badge" style="background-color: #000000E6"></view> -->
|
||
<text class="data-text">总任务数</text>
|
||
</view>
|
||
|
||
<view class="data-num">{{chartData.TotalCount || 0}}</view>
|
||
|
||
</view>
|
||
<view class="data-wrap">
|
||
<view class="data-title">
|
||
<!-- <view class="data-badge" style="background-color: #91CB74"></view> -->
|
||
<text class="data-text">待办数</text>
|
||
</view>
|
||
<view class="data-num" style="color: #91CB74">{{chartData.unfinishCount || 0}}</view>
|
||
|
||
</view>
|
||
<view class="data-wrap">
|
||
<view class="data-title">
|
||
<!-- <view class="data-badge" style="background-color: #FAC858"></view> -->
|
||
<text class="data-text">超时待办数</text>
|
||
</view>
|
||
<view class="data-num" style="color: #FAC858">{{chartData.timeOverWaitCount || 0}}</view>
|
||
|
||
</view>
|
||
<view class="data-wrap">
|
||
<view class="data-title">
|
||
<!-- <view class="data-badge" style="background-color: #EE6666"></view> -->
|
||
<text class="data-text">已办事项</text>
|
||
</view>
|
||
<view class="data-num" style="color: #EE6666">{{
|
||
(chartData.doneCount || 0) + (chartData.timeOverCount || 0)
|
||
}}</view>
|
||
|
||
</view>
|
||
<view class="data-wrap">
|
||
<view class="data-title">
|
||
<!-- <view class="data-badge" style="background-color: #73C0DE"></view> -->
|
||
<text class="data-text">完成率</text>
|
||
</view>
|
||
<view style="display: flex;flex-direction: row;align-items: flex-end;">
|
||
<view class="data-num" style="color: #73C0DE">{{allFinishRate}}</view>
|
||
<view style="font-size: 12px;margin-bottom: 3px;margin-left: 2px;">%</view>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="data-wrap">
|
||
<view class="data-title">
|
||
<!-- <view class="data-badge" style="background-color: #3CA272"></view> -->
|
||
<text class="data-text">及时完成率</text>
|
||
</view>
|
||
<view style="display: flex;flex-direction: row;align-items: flex-end;">
|
||
<view class="data-num" style="color: #3CA272">{{finishRate}}</view>
|
||
<view style="font-size: 12px;margin-bottom: 3px;margin-left: 2px;">%</view>
|
||
</view>
|
||
|
||
</view>
|
||
<!-- <view class="data-wrap">
|
||
<view class="data-title">
|
||
<text class="data-text">个人学时</text>
|
||
</view>
|
||
<view style="display: flex;flex-direction: row;align-items: flex-end;">
|
||
<view class="data-num" style="color: #3CA272">{{trainHours}}</view>
|
||
<view style="font-size: 12px;margin-bottom: 3px;margin-left: 2px;"></view>
|
||
</view>
|
||
|
||
</view> -->
|
||
|
||
</view>
|
||
</view>
|
||
<view class="line-chart">
|
||
<view class="line-chart-title">
|
||
<i class="iconfont icon-zhexiantu1" style="font-size: 16px;margin-right: 5px;"></i>
|
||
任务及时完成率
|
||
</view>
|
||
<view class="charts-view">
|
||
<qiun-data-charts type="line" :opts="lineOpts" :chartData="lineChartData" />
|
||
</view>
|
||
|
||
</view>
|
||
<!-- <view style="font-size: 20px;font-weight: bold;margin: 20px 0px;">
|
||
数据分析
|
||
</view> -->
|
||
<view class="table">
|
||
<uni-table style="width: 100%;border-radius: 8px;" border stripe emptyText="暂无更多数据">
|
||
<!-- 表头行 -->
|
||
<uni-tr style="background-color: #e6f8ff;">
|
||
<uni-th width="100" align="center">月份</uni-th>
|
||
<uni-th width="60" align="center">任务数</uni-th>
|
||
<uni-th width="60" align="center">完成率</uni-th>
|
||
<uni-th width="90" align="center">及时完成率</uni-th>
|
||
</uni-tr>
|
||
<!-- 表格数据行 -->
|
||
<uni-tr v-for="(item, key) in tableData" :key="key">
|
||
<uni-td align="center">{{item.MONTHStr}}</uni-td>
|
||
<uni-td align="center">{{item.TOTAL_QTY}}</uni-td>
|
||
<uni-td align="center">{{item.FINISH_RATE}}%</uni-td>
|
||
<uni-td align="center">{{item.NORMAL_FINISH_RATE}}%</uni-td>
|
||
</uni-tr>
|
||
</uni-table>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view class="per-title">
|
||
<!-- <view :class="chooseIndex === true? 'personal-choose':'personal'" @click="changePerIndex">个人绩效</view> -->
|
||
<view class="tissue-choose">组织绩效</view>
|
||
<!-- <view class="tissue-pro" @click="changePicker">
|
||
<view>
|
||
<view class="production" v-if="MineType === '10'">生产单元：选矿厂</view>
|
||
<view class="production" v-if="MineType === '20'">生产单元：尾矿库</view>
|
||
<view class="production" v-if="MineType === '30'">生产单元：露天矿</view>
|
||
</view>
|
||
<view class="production" v-if="MineType==null">生产单元：{{columns[0][0]}}</view>
|
||
|
||
<u-icon name="arrow-down" size="12"></u-icon>
|
||
</view> -->
|
||
</view>
|
||
<view class="performance">
|
||
<view>
|
||
<!-- <view class="standard-content">
|
||
<view class="standard-wrap">
|
||
<view class="standard-left">
|
||
<view>标准化得分</view>
|
||
<view v-if="MineType === '10'">选矿厂</view>
|
||
<view v-if="MineType === '20'">尾矿库</view>
|
||
<view v-if="MineType === '30'">露天矿</view>
|
||
</view>
|
||
<view class="standard-right">
|
||
<view>{{standardScore}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view> -->
|
||
|
||
<view class="line-chart">
|
||
<view class="line-chart-title">
|
||
<i class="iconfont icon-bingtu" style="font-size: 16px;margin-right: 5px;"></i>
|
||
风险等级占比
|
||
</view>
|
||
<view class="charts-view">
|
||
<qiun-data-charts type="ring" :opts="riskOpts" :chartData="riskChartData" />
|
||
</view>
|
||
|
||
</view>
|
||
<!-- <view class="line-chart">
|
||
<view class="line-chart-title">
|
||
<i class="iconfont icon-zhuzhuangtu" style="font-size: 16px;margin-right: 5px;"></i>
|
||
班组活动完成率
|
||
</view>
|
||
<view class="charts-view" :style="{'height':cHeight}">
|
||
<qiun-data-charts type="bar" :opts="classOpts" :chartData="classChartData" />
|
||
</view>
|
||
|
||
</view>
|
||
<view class="line-chart">
|
||
|
||
<view class="line-chart-title">
|
||
<i class="iconfont icon-zhuzhuangtu" style="font-size: 16px;margin-right: 5px;"></i>
|
||
工作票完成数
|
||
</view>
|
||
<view class="charts-view" :style="{'height':wHeight}">
|
||
<qiun-data-charts type="bar" :opts="workOpts" :chartData="workChartData" />
|
||
</view>
|
||
|
||
</view> -->
|
||
<view class="line-chart">
|
||
<view class="line-chart-title">
|
||
<i class="iconfont icon-zhuzhuangtu" style="font-size: 16px;margin-right: 5px;"></i>
|
||
安全检查次数统计
|
||
</view>
|
||
<view class="charts-view">
|
||
<qiun-data-charts type="column" :opts="safeOpts" :chartData="safeChartData" />
|
||
</view>
|
||
|
||
</view>
|
||
<view class="line-chart-bottom">
|
||
<view class="line-chart-title">
|
||
<i class="iconfont icon-zhuzhuangtu" style="font-size: 16px;margin-right: 5px;"></i>
|
||
月度隐患整改情况
|
||
</view>
|
||
<view class="charts-view">
|
||
<qiun-data-charts type="column" :opts="dangerOpts" :chartData="dangerChartData" />
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <u-picker :show="modalShow" :columns="columns" @confirm="confirm" @change="changeHandler" @cancel="cancel"></u-picker> -->
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getChartData,
|
||
// getStandardScore,
|
||
getRiskLevel,
|
||
getClassActive,
|
||
getWorkTicket,
|
||
getDangerTotal,
|
||
// getTrainHours
|
||
} from '../../services/app'
|
||
import {
|
||
initFilter,
|
||
extendOrder,
|
||
extendRule
|
||
} from '../../utils/common'
|
||
import HeaderNav from '@/components/custom/head-nav.vue';
|
||
|
||
let uChartsInstance = {}
|
||
export default {
|
||
components: {
|
||
HeaderNav
|
||
},
|
||
data() {
|
||
return {
|
||
trainHours: '',
|
||
chooseIndex: true,
|
||
modalShow: false,
|
||
columns: [],
|
||
chartData: {},
|
||
tableData: [],
|
||
lineChartData: {},
|
||
wordChartData: {},
|
||
wordOpts: {
|
||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
||
"#ea7ccc"
|
||
],
|
||
padding: undefined,
|
||
enableScroll: false,
|
||
extra: {
|
||
word: {
|
||
type: "normal",
|
||
autoColors: false
|
||
}
|
||
}
|
||
},
|
||
lineOpts: {
|
||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
||
"#ea7ccc"
|
||
],
|
||
padding: [35, 10, 0, 10],
|
||
enableScroll: false,
|
||
legend: {},
|
||
xAxis: {
|
||
disableGrid: true
|
||
},
|
||
yAxis: {
|
||
gridType: "dash",
|
||
dashLength: 2,
|
||
unit: '%'
|
||
},
|
||
extra: {
|
||
line: {
|
||
type: "curve",
|
||
width: 2,
|
||
activeType: "hollow"
|
||
}
|
||
}
|
||
},
|
||
// MineType: '',
|
||
// MineCurrentType: '',
|
||
localMintype: [],
|
||
standardScore: 0,
|
||
openPerson: true,
|
||
allNum: 0,
|
||
riskChartData: {},
|
||
classChartData: {},
|
||
riskColor: [],
|
||
riskOpts: {
|
||
|
||
},
|
||
classOpts: {
|
||
// height:300,
|
||
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
||
"#ea7ccc"
|
||
],
|
||
padding: [25, 60, 25, 5],
|
||
enableScroll: false,
|
||
legend: {
|
||
show: false
|
||
},
|
||
xAxis: {
|
||
disabled: true,
|
||
boundaryGap: "justify",
|
||
disableGrid: true,
|
||
min: 0,
|
||
axisLine: false,
|
||
max: 40,
|
||
},
|
||
yAxis: {
|
||
axisLine: false,
|
||
disableGrid: true,
|
||
gridColor: '#fff',
|
||
},
|
||
extra: {
|
||
bar: {
|
||
// type: "group",
|
||
type: "group",
|
||
width: 10,
|
||
meterBorde: 1,
|
||
meterFillColor: "#FFFFFF",
|
||
activeBgColor: "#000000",
|
||
activeBgOpacity: 0.08,
|
||
// linearType: "custom",
|
||
barBorderCircle: true,
|
||
// seriesGap: 2,
|
||
categoryGap: 2
|
||
}
|
||
}
|
||
},
|
||
workChartData: {},
|
||
workOpts: {
|
||
color: ["#1890FF", "#f6841a", "#cc0404"],
|
||
|
||
padding: [25, 40, 25, 5],
|
||
enableScroll: false,
|
||
legend: {
|
||
show: false
|
||
},
|
||
xAxis: {
|
||
disabled: true,
|
||
boundaryGap: "justify",
|
||
disableGrid: true,
|
||
min: 0,
|
||
axisLine: false,
|
||
max: 40,
|
||
},
|
||
yAxis: {
|
||
axisLine: false,
|
||
disableGrid: true,
|
||
gridColor: '#fff',
|
||
},
|
||
extra: {
|
||
bar: {
|
||
type: "group",
|
||
width: 10,
|
||
meterBorde: 1,
|
||
meterFillColor: "#FFFFFF",
|
||
activeBgColor: "#000000",
|
||
activeBgOpacity: 0.08,
|
||
// linearType: "custom",
|
||
barBorderCircle: true,
|
||
// seriesGap: 2,
|
||
categoryGap: 2
|
||
}
|
||
}
|
||
},
|
||
safeChartData: {},
|
||
safeOpts: {
|
||
color: ["#4285F4", "#72b85b", "#c92a2a", "#ffa94d"],
|
||
dataLabel: false,
|
||
padding: [25, 15, 0, 15],
|
||
enableScroll: false,
|
||
legend: {
|
||
float: 'left',
|
||
lineHeight: 20,
|
||
},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
},
|
||
yAxis: {
|
||
disabled: false,
|
||
disableGrid: false,
|
||
splitNumber: 5,
|
||
gridType: "dash",
|
||
dashLength: 4,
|
||
gridColor: "#CCCCCC",
|
||
padding: 10,
|
||
showTitle: false,
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: "stack",
|
||
width: 20,
|
||
activeBgColor: "#000000",
|
||
activeBgOpacity: 0.08,
|
||
labelPosition: "center"
|
||
}
|
||
}
|
||
},
|
||
dangerChartData: {},
|
||
dangerOpts: {
|
||
color: ["#72b85b", "#f6841a", "#cc0404"],
|
||
padding: [25, 15, 0, 15],
|
||
enableScroll: false,
|
||
legend: {
|
||
float: 'left',
|
||
lineHeight: 20,
|
||
},
|
||
xAxis: {
|
||
disableGrid: true,
|
||
// title: "单位：年"
|
||
},
|
||
yAxis: {
|
||
disabled: false,
|
||
disableGrid: false,
|
||
splitNumber: 5,
|
||
gridType: "dash",
|
||
dashLength: 4,
|
||
gridColor: "#CCCCCC",
|
||
padding: 10,
|
||
showTitle: false,
|
||
},
|
||
extra: {
|
||
column: {
|
||
type: "group",
|
||
width: 10,
|
||
activeBgColor: "#000000",
|
||
activeBgOpacity: 0.08,
|
||
seriesGap: 4,
|
||
|
||
}
|
||
}
|
||
},
|
||
cHeight: '',
|
||
wHeight: '',
|
||
}
|
||
|
||
},
|
||
onReady() {
|
||
// this.getLineServerData();
|
||
// this.getWordServerData();
|
||
},
|
||
async onShow() {
|
||
// this.getTrainHours()
|
||
// this.MineType = uni.getStorageSync('MineType')
|
||
// this.MineCurrentType =uni.getStorageSync('MineType')
|
||
const orgId = uni.getStorageSync('orgId')
|
||
const {
|
||
User
|
||
} = uni.getStorageSync('appInfo')
|
||
|
||
|
||
let newarr = [];
|
||
// if (User.MineType) {
|
||
// this.localMintype = User.MineType.split(",");
|
||
// if (this.localMintype.length !== 0) {
|
||
// if (uni.getStorageSync('MineType') == '') {
|
||
// uni.setStorageSync('MineType', this.localMintype[0])
|
||
// this.MineType = this.localMintype[0]
|
||
// // this.MineType = this.localMintype[0]
|
||
// }
|
||
// if (User.MineType.split(",").indexOf("10") > -1) {
|
||
// newarr.push('选矿厂')
|
||
// this.columns = [newarr]
|
||
// }
|
||
// if (User.MineType.split(",").indexOf("20") > -1) {
|
||
|
||
// newarr.push('尾矿库')
|
||
// this.columns = [newarr]
|
||
// }
|
||
// if (User.MineType.split(",").indexOf("30") > -1) {
|
||
// newarr.push('露天矿')
|
||
// this.columns = [newarr]
|
||
// }
|
||
|
||
// if (this.MineType === '10' || this.MineType === '20') {
|
||
// this.MineCurrentType = '10'
|
||
// } else {
|
||
// this.MineCurrentType = '30'
|
||
// }
|
||
// }
|
||
// }
|
||
|
||
const curDate = new Date()
|
||
const curYear = curDate.getFullYear()
|
||
const curMonth = curDate.getMonth()
|
||
let y, m, d;
|
||
if (curMonth > 5) {
|
||
y = curYear
|
||
m = curMonth - 5
|
||
} else {
|
||
y = curYear - 1
|
||
m = 12 + (curMonth - 5)
|
||
}
|
||
d = curDate.getDate()
|
||
|
||
const startTime = uni.$u.timeFormat(new Date(y, m, d), 'yyyy-mm-dd')
|
||
const endTime = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd')
|
||
let json = initFilter(orgId, User.NAME, "", "", "", startTime, endTime);
|
||
const res = await getChartData(json)
|
||
if (res.IsSuccessful) {
|
||
this.chartData = res.Data
|
||
const preLineChartData = (res.Data?.groupDataLine || []).splice(-6, 6)
|
||
const lineChartConfig = {
|
||
categories: preLineChartData.map(i => i.MONTHStr.split('年')[1]),
|
||
series: [{
|
||
name: "完成率",
|
||
data: preLineChartData.map(i => i.FINISH_RATE)
|
||
},
|
||
{
|
||
name: "及时完成率",
|
||
data: preLineChartData.map(i => i.NORMAL_FINISH_RATE)
|
||
}
|
||
]
|
||
}
|
||
this.lineChartData = JSON.parse(JSON.stringify(lineChartConfig));
|
||
this.tableData = res.Data?.groupData || []
|
||
}
|
||
// this.getStandard()
|
||
this.getRiskLevel()
|
||
// this.getClassActive()
|
||
// this.getWorkTicket()
|
||
this.getDangerTotal()
|
||
|
||
},
|
||
methods: {
|
||
changePicker() {
|
||
this.modalShow = true
|
||
},
|
||
changeOpen() {
|
||
this.openPerson = !this.openPerson
|
||
},
|
||
// confirm(e) {
|
||
// this.modalShow = false
|
||
// if (e.value[0] === '选矿厂') {
|
||
// // uni.setStorageSync('MineType', '10')
|
||
// uni.reLaunch({
|
||
// url: '/pages/performance/index1'
|
||
// })
|
||
// }
|
||
// if (e.value[0] === '尾矿库') {
|
||
// uni.setStorageSync('MineType', '20')
|
||
// uni.reLaunch({
|
||
// url: '/pages/performance/index1'
|
||
// })
|
||
|
||
// }
|
||
// if (e.value[0] === '露天矿') {
|
||
// uni.setStorageSync('MineType', '30')
|
||
// uni.reLaunch({
|
||
// url: '/pages/performance/index1'
|
||
// })
|
||
// }
|
||
|
||
// },
|
||
cancel() {
|
||
this.modalShow = false
|
||
},
|
||
changeHandler(e) {
|
||
console.log(e, 'eeeee')
|
||
},
|
||
async getTrainHours() {
|
||
let json = initFilter();
|
||
const res = await getTrainHours(json)
|
||
if (res.IsSuccessful) {
|
||
let nums = res.Data.TOTAL_HOURS
|
||
this.trainHours = nums.toFixed(2)
|
||
}
|
||
},
|
||
// async getStandard() {
|
||
// const orgId = uni.getStorageSync('orgId')
|
||
// let json = initFilter(orgId, this.MineCurrentType);
|
||
// const res = await getStandardScore(json)
|
||
// if (res.IsSuccessful) {
|
||
// this.standardScore = (Number(res.Data.RESULT_TOTAL / res.Data.STAND_TOTAL) * 100).toFixed(2);
|
||
// }
|
||
|
||
// },
|
||
async getRiskLevel() {
|
||
const orgId = uni.getStorageSync('orgId')
|
||
let json = initFilter(orgId);
|
||
extendOrder(json, "CREATE_TIME", 0);
|
||
// extendRule(json, "COLOR", 1, );
|
||
const res = await getRiskLevel(json)
|
||
if (res.IsSuccessful) {
|
||
let riskLevel = [];
|
||
let showData = [];
|
||
let color = [];
|
||
res.Data.forEach((item) => {
|
||
riskLevel.push(item.RISK_LEVEL);
|
||
// color.push(item.COLOR);
|
||
showData.push({
|
||
value: item.COUNT,
|
||
name: item.RISK_LEVEL,
|
||
// labelShow:false
|
||
});
|
||
});
|
||
showData.map((item) => {
|
||
this.allNum = Number(this.allNum + item.value)
|
||
})
|
||
setTimeout(() => {
|
||
let riskLevelConfig = {
|
||
series: [{
|
||
data: showData,
|
||
}],
|
||
};
|
||
this.riskOpts = {
|
||
rotate: false,
|
||
rotateLock: false,
|
||
color: ['#c92a2a', '#ffa94d', '#ffe066', '#4285F4'],
|
||
padding: [5, 5, 5, 5],
|
||
dataLabel: true,
|
||
enableScroll: false,
|
||
legend: {
|
||
show: true,
|
||
position: "bottom",
|
||
lineHeight: 25,
|
||
formatter: function(val) {
|
||
return val + '000000'
|
||
}
|
||
},
|
||
title: {
|
||
name: "",
|
||
fontSize: 15,
|
||
color: "#666666"
|
||
},
|
||
subtitle: {
|
||
name: this.allNum,
|
||
fontSize: 25,
|
||
color: "#666666"
|
||
},
|
||
extra: {
|
||
ring: {
|
||
ringWidth: 20,
|
||
activeOpacity: 0.5,
|
||
activeRadius: 10,
|
||
offsetAngle: 0,
|
||
labelWidth: 15,
|
||
border: true,
|
||
borderWidth: 3,
|
||
borderColor: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
|
||
this.riskChartData = JSON.parse(JSON.stringify(riskLevelConfig));
|
||
}, 500)
|
||
|
||
|
||
}
|
||
},
|
||
async getClassActive() {
|
||
const orgId = uni.getStorageSync('orgId')
|
||
let json = initFilter(
|
||
orgId,
|
||
'',
|
||
"NUM",
|
||
"desc",
|
||
undefined,
|
||
10
|
||
);
|
||
const res = await getClassActive(json)
|
||
if (res.IsSuccessful) {
|
||
this.cHeight = res.Data.length * 30 + 20 + 'px'
|
||
let teamName = [];
|
||
let finishQty = [];
|
||
res.Data.forEach((item) => {
|
||
teamName.push(item.TEAM_NAME);
|
||
let finishData = Number(item.CALC * 100).toFixed(2);
|
||
finishQty.push(finishData);
|
||
});
|
||
setTimeout(() => {
|
||
let classActiveConfig = {
|
||
categories: teamName,
|
||
series: [{
|
||
name: "完成率",
|
||
data: finishQty,
|
||
}],
|
||
};
|
||
|
||
this.classChartData = JSON.parse(JSON.stringify(classActiveConfig));
|
||
}, 500)
|
||
}
|
||
},
|
||
async getWorkTicket() {
|
||
const orgId = uni.getStorageSync('orgId')
|
||
let json = initFilter(
|
||
orgId,
|
||
'',
|
||
"NUM",
|
||
"desc",
|
||
);
|
||
const res = await getWorkTicket(json)
|
||
if (res.IsSuccessful) {
|
||
this.wHeight = res.Data.length * 30 + 20 + 'px'
|
||
let teamName = [];
|
||
let wattingQty = [];
|
||
let finishQty = [];
|
||
let overFinishQty = [];
|
||
let totalQty = [];
|
||
res.Data.forEach((item) => {
|
||
teamName.push(item.TEAM_NAME);
|
||
wattingQty.push(item.WAITTING_COUNT);
|
||
finishQty.push(item.FINISH_COUNT);
|
||
overFinishQty.push(item.OVER_FINISH_COUNT);
|
||
totalQty.push(item.TOTAL_COUNT);
|
||
});
|
||
setTimeout(() => {
|
||
let workTicketConfig = {
|
||
categories: teamName,
|
||
series: [{
|
||
name: "正常已办",
|
||
data: finishQty,
|
||
}],
|
||
};
|
||
|
||
this.workChartData = JSON.parse(JSON.stringify(workTicketConfig));
|
||
}, 500)
|
||
}
|
||
},
|
||
async getDangerTotal() {
|
||
const orgId = uni.getStorageSync('orgId')
|
||
let json = initFilter(
|
||
orgId,
|
||
'',
|
||
"NUM",
|
||
);
|
||
const res = await getDangerTotal(json)
|
||
if (res.IsSuccessful) {
|
||
let xData = [];
|
||
let data1 = [];
|
||
let data2 = [];
|
||
let data3 = [];
|
||
let seriesName = [];
|
||
if (res.Data.ListSafeCheckYearMonth) {
|
||
let ListSafeCheckYearMonth = res.Data.ListSafeCheckYearMonth.slice(-6)
|
||
ListSafeCheckYearMonth.forEach((item) => {
|
||
xData.push(item.MONTH + '月')
|
||
seriesName = item.listSOURCENAME
|
||
data1.push(item.listListCount);
|
||
});
|
||
for (var i = 0; i < ListSafeCheckYearMonth[0].listListCount.length; i++) {
|
||
for (var j = 0; j < ListSafeCheckYearMonth.length; j++) {
|
||
data2.push(data1[j][i]);
|
||
}
|
||
}
|
||
for (var i = 0; i < data2.length; i += ListSafeCheckYearMonth.length) {
|
||
data3.push(data2.slice(i, i + ListSafeCheckYearMonth.length))
|
||
}
|
||
setTimeout(() => {
|
||
let safeCheckConfig = {
|
||
categories: xData,
|
||
series: [{
|
||
name: seriesName[0],
|
||
data: data3[0],
|
||
}, {
|
||
name: seriesName[1],
|
||
data: data3[1],
|
||
}, {
|
||
name: seriesName[2],
|
||
data: data3[2],
|
||
}, {
|
||
name: seriesName[3],
|
||
data: data3[3],
|
||
}],
|
||
};
|
||
|
||
this.safeChartData = JSON.parse(JSON.stringify(safeCheckConfig));
|
||
}, 500);
|
||
}
|
||
|
||
let xName = [];
|
||
let yName = [];
|
||
let legendName = [];
|
||
res.Data.ListC.forEach((item) => {
|
||
let name = item.NAME.split(",");
|
||
xName.push(name);
|
||
legendName.push(item.SOURCENAME);
|
||
let valu = item.Val.split(",");
|
||
yName.push(valu);
|
||
});
|
||
let month = xName[0].map((item) => {
|
||
return item.replace("月", "");
|
||
});
|
||
|
||
setTimeout(() => {
|
||
let monthDangerConfig = {
|
||
categories: xName[0],
|
||
series: [{
|
||
name: legendName[0],
|
||
// index: 1,
|
||
type: "column",
|
||
data: yName[0]
|
||
},
|
||
{
|
||
name: legendName[1],
|
||
// index: 1,
|
||
type: "column",
|
||
data: yName[1]
|
||
},
|
||
{
|
||
name: legendName[2],
|
||
// index: 1,
|
||
type: "column",
|
||
data: yName[2]
|
||
},
|
||
|
||
],
|
||
};
|
||
|
||
this.dangerChartData = JSON.parse(JSON.stringify(monthDangerConfig));
|
||
}, 500)
|
||
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
allFinishRate() {
|
||
const {
|
||
TotalCount,
|
||
timeOverCount,
|
||
doneCount
|
||
} = this.chartData
|
||
if (TotalCount) {
|
||
return ((doneCount + timeOverCount) / TotalCount * 100).toFixed(1)
|
||
}
|
||
return 0
|
||
},
|
||
finishRate() {
|
||
const {
|
||
TotalCount,
|
||
doneCount
|
||
} = this.chartData
|
||
if (TotalCount) {
|
||
return (doneCount / TotalCount * 100).toFixed(1)
|
||
}
|
||
return 0
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.performance {
|
||
padding: 16px;
|
||
}
|
||
|
||
.per-title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 30px;
|
||
background-color: #fff;
|
||
/* box-shadow: 0px 0px 10px #dddddd; */
|
||
|
||
}
|
||
|
||
.personal-choose {
|
||
font-size: 20px;
|
||
color: #333;
|
||
/* margin-right: 15px; */
|
||
/* font-weight: bold; */
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.personal-big {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.personal-small {
|
||
font-size: 12px;
|
||
/* font-weight: bold; */
|
||
}
|
||
|
||
.tissue-choose {
|
||
font-size: 20px;
|
||
color: #333;
|
||
/* margin-left: 15px; */
|
||
font-weight: bold;
|
||
|
||
}
|
||
|
||
.task-num {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.data-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
/* background-color: #f6faf8; */
|
||
/* border: 1px solid #e5e5e5; */
|
||
}
|
||
|
||
.data-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 8px 10px;
|
||
/* background-color: #f6faf8; */
|
||
margin: 5px;
|
||
border-radius: 5px;
|
||
border: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.data-title {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.data-badge {
|
||
width: 2px;
|
||
height: 8px;
|
||
/* background-color: #91CB74; */
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.data-num {
|
||
font-size: 24px;
|
||
/* margin-left: 4px; */
|
||
margin-top: 5px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.data-text {
|
||
font-size: 14px;
|
||
}
|
||
|
||
.word-chart {
|
||
border: 1px solid #e5e5e5;
|
||
padding: 10px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.line-chart {
|
||
margin-top: 26px;
|
||
margin-bottom: 26px;
|
||
width: 100%;
|
||
padding-bottom: 40px;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
/* border: 1px solid #e5e5e5;
|
||
border-radius: 10px; */
|
||
}
|
||
|
||
.line-chart-bottom {
|
||
margin-top: 26px;
|
||
margin-bottom: 26px;
|
||
width: 100%;
|
||
padding-bottom: 20px;
|
||
/* border-bottom: 1px solid #e5e5e5; */
|
||
/* border: 1px solid #e5e5e5;
|
||
border-radius: 10px; */
|
||
}
|
||
|
||
.charts-view {
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 10px;
|
||
/* height: 500px; */
|
||
}
|
||
|
||
.charts-view-work {
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 10px;
|
||
height: 500px;
|
||
}
|
||
|
||
.charts-view-class {
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.line-chart-title {
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
/* text-align: center; */
|
||
margin-bottom: 16px;
|
||
margin-left: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.grid-card {
|
||
margin-bottom: 26px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
}
|
||
|
||
.grid-item-box {
|
||
flex: 1;
|
||
// position: relative;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 0;
|
||
}
|
||
|
||
.grid-item-box-row {
|
||
flex: 1;
|
||
// position: relative;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 15px 0;
|
||
}
|
||
|
||
.grid-item-box .num {
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.grid-item-box .text {
|
||
color: rgba(0, 0, 0, .65);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.table {
|
||
padding-bottom: 40px;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
|
||
}
|
||
|
||
.tissue-pro {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.production {
|
||
font-size: 14px;
|
||
margin-right: 15px;
|
||
color: #999;
|
||
}
|
||
|
||
.open {
|
||
font-size: 14px;
|
||
/* margin-right: 15px; */
|
||
color: #999;
|
||
font-weight: bold;
|
||
/* border: 1px solid #e5e5e5; */
|
||
padding: 3px 15px;
|
||
border-radius: 10px;
|
||
background-color: #e5e5e5;
|
||
}
|
||
|
||
.standard-content {
|
||
padding-bottom: 40px;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.standard-wrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
/* justify-content: center; */
|
||
width: 100%;
|
||
height: 100px;
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 15px;
|
||
/* background-color: #386AF6; */
|
||
/* box-shadow: 1px 1px 10px #386AF6; */
|
||
/* padding-bottom: 40px;
|
||
border-bottom: 1px solid #e5e5e5; */
|
||
}
|
||
|
||
.standard-left {
|
||
/* border: 1px solid #e5e5e5; */
|
||
padding: 20px 0px;
|
||
border-radius: 20px;
|
||
width: 45%;
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
color: #333333;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.standard-right {
|
||
/* border: 1px solid #e5e5e5; */
|
||
/* padding: 20px 40px; */
|
||
/* border-radius: 20px; */
|
||
width: 55%;
|
||
color: #eb0404;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 40px;
|
||
border-left: 1px dashed #e5e5e5;
|
||
border-left-width: 2px;
|
||
|
||
/* height: 300px; */
|
||
}
|
||
</style> |