1343 lines
42 KiB
Python
1343 lines
42 KiB
Python
<template>
|
||
<div class="dashboard-container">
|
||
<div class="dashboardTopCard">
|
||
<div class="cardsWrap" @click="toDetail('1')">
|
||
<div class="svgIconWrap">
|
||
<el-icon class="el-icon-s-order svgIcon"></el-icon>
|
||
</div>
|
||
<div class="totalCountWrap">
|
||
<div class="totalCountNum">
|
||
<span class="totalCount">{{contractTotalCurrent}}</span>
|
||
<span>个</span>
|
||
</div>
|
||
<span class="totalCountText">本月合同数</span>
|
||
</div>
|
||
</div>
|
||
<div class="cardsWrap" @click="toDetail('2')">
|
||
<div class="svgIconWrap">
|
||
<el-icon class="el-icon-menu svgIcon"></el-icon>
|
||
<svg-icon
|
||
class="svgIcon"
|
||
icon-class="order"
|
||
:className="'svgIcon'"
|
||
/>
|
||
</div>
|
||
<div class="totalCountWrap">
|
||
<div class="totalCountNum">
|
||
<span class="totalCount">{{orderTotalCurrent}}</span>
|
||
<span>个</span>
|
||
</div>
|
||
<span class="totalCountText">本月生产订单数</span>
|
||
</div>
|
||
</div>
|
||
<div class="cardsWrap" @click="toDetail('3')">
|
||
<div class="svgIconWrap">
|
||
<el-icon class="el-icon-s-operation svgIcon"></el-icon>
|
||
</div>
|
||
<div class="totalCountWrap">
|
||
<div class="totalCountNum">
|
||
<span class="totalCount">{{planTotalCurrent}}</span>
|
||
<span>个</span>
|
||
</div>
|
||
<span class="totalCountText">本月在制任务</span>
|
||
</div>
|
||
</div>
|
||
<div class="cardsWrap" @click="toDetail('4')">
|
||
<div class="svgIconWrap">
|
||
<el-icon class="el-icon-s-claim svgIcon"></el-icon>
|
||
</div>
|
||
<div class="totalCountWrap">
|
||
<div class="totalCountNum">
|
||
<span class="totalCount">{{selledTotalCurrent}}</span>
|
||
<span>个</span>
|
||
</div>
|
||
<span class="totalCountText">本月交付产品</span>
|
||
</div>
|
||
</div>
|
||
<div class="cardsWrap" @click="toDetail('5')">
|
||
<div class="svgIconWrap">
|
||
<el-icon class="el-icon-error svgIcon"></el-icon>
|
||
</div>
|
||
<div class="totalCountWrap">
|
||
<div class="totalCountNum">
|
||
<span class="totalCount">{{notokTotalCurrent}}</span>
|
||
<span>个</span>
|
||
</div>
|
||
<span class="totalCountText">本月不合格产品</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-row :gutter="20">
|
||
<el-col :span="16">
|
||
<div id="dashboardMiddle" class="dashboardMiddle">
|
||
<div class="dashboardCardPadding">
|
||
<div class="CardTitleWrap">
|
||
<span class="verticalLine"></span><span class="dashboardCardTitle">任务进度</span>
|
||
</div>
|
||
<div>
|
||
<gantt
|
||
v-if="proList.length>0"
|
||
style="position: relative"
|
||
:proList="proList"
|
||
:ganttHeight="ganttHeight"
|
||
></gantt>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div class="dashboardMiddle">
|
||
<div class="dashboardCardPadding">
|
||
<div class="dashboardCardHand">
|
||
<div class="CardTitleWrap" style="border-bottom: 0">
|
||
<span class="verticalLine"></span><span class="dashboardCardTitle">生产设备</span>
|
||
<span @click="refreshBottomTabel('1')">
|
||
<el-icon class="el-icon-refresh refreshIcon"></el-icon>
|
||
</span>
|
||
</div>
|
||
<div class="block">
|
||
<el-pagination
|
||
small
|
||
:pager-count="pageCounts"
|
||
:current-page.sync="equipmentPage"
|
||
:page-size="equipmentPageSize"
|
||
layout="prev, pager, next, jumper"
|
||
:total="equipmentTotal"
|
||
@current-change="handleEquipmentCurrentChange"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
v-loading="listLoadingEm"
|
||
small
|
||
:data="equipmentList"
|
||
fit
|
||
size="mini"
|
||
:height="ganttHeight"
|
||
pager-count="3"
|
||
style="border-top: 1px solid #f5f5f5;"
|
||
>
|
||
<el-table-column label="序号" type="index" width="50">
|
||
</el-table-column>
|
||
<el-table-column label="设备编号" prop="number">
|
||
</el-table-column>
|
||
<el-table-column label="设备名称" prop="name" show-overflow-tooltip>
|
||
</el-table-column>
|
||
<el-table-column label="设备状态" prop="material_">
|
||
<!--type=1生产设备-->
|
||
<template slot-scope="scope">
|
||
<div v-if="scope.row.type===2">
|
||
<el-tag v-if="scope.row.state===40" type="danger">
|
||
禁用
|
||
</el-tag>
|
||
<el-tag v-else type="success">
|
||
合格
|
||
</el-tag>
|
||
</div>
|
||
<div v-else>
|
||
<el-tag v-if="scope.row.state===10" type="success">
|
||
{{ state_[scope.row.state] }}
|
||
</el-tag>
|
||
<el-tag v-else-if="scope.row.state===20">
|
||
{{ state_[scope.row.state] }}
|
||
</el-tag>
|
||
<el-tag v-else-if="scope.row.state===30" type="warning">
|
||
{{ state_[scope.row.state] }}
|
||
</el-tag>
|
||
<el-tag v-else type="danger">
|
||
{{ state_[scope.row.state] }}
|
||
</el-tag>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<!-- <div id="chartColumn" style="width:100%;height: 500px;" :style="{height:ganttHeight+'px'}"></div> -->
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="dashboardBottomRow">
|
||
<div class="CardTitleWrap">
|
||
<span class="verticalLine"></span><span class="dashboardCardTitle">成品率</span>
|
||
</div>
|
||
<div class="dashboardCardHand" id="searchWrap" style="position: absolute;top: 15px;right: 20px;">
|
||
<el-date-picker
|
||
v-model="chartDate"
|
||
type="monthrange"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
range-separator="至"
|
||
format="yyyy 年 MM 月"
|
||
value-format="yyyy-MM"
|
||
@change="searchTimeChange('1')"
|
||
>
|
||
</el-date-picker>
|
||
</div>
|
||
<div id="chartColumn" style="width:100%;" :style="{height:cardTabelHeight+'px'}"></div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<div class="dashboardBottomRow">
|
||
<div class="dashboardCardHand">
|
||
<div class="CardTitleWrap" style="border-bottom: 0">
|
||
<span class="verticalLine"></span><span class="dashboardCardTitle">人员到岗</span>
|
||
<span @click="refreshBottomTabel('2')">
|
||
<el-icon class="el-icon-refresh refreshIcon"></el-icon>
|
||
</span>
|
||
</div>
|
||
<div class="block">
|
||
<el-pagination
|
||
small
|
||
:pager-count="pageCounts"
|
||
:current-page.sync="userPage"
|
||
:page-size="userPageSize"
|
||
layout="prev, pager, next, jumper"
|
||
:total="userTotal"
|
||
@current-change="handleUserCurrentChange"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;">
|
||
<div
|
||
style="width:55%"
|
||
@mouseenter="stopScroll()"
|
||
@mouseleave="toScroll()"
|
||
>
|
||
<el-table
|
||
v-loading="listLoadingUser"
|
||
:data="userList"
|
||
fit
|
||
size="mini"
|
||
:height="cardTabelHeight"
|
||
style="border-top: 1px solid #f5f5f5;"
|
||
>
|
||
<el-table-column type="index" width="50">
|
||
</el-table-column>
|
||
<el-table-column label="人员名称" prop="name" show-overflow-tooltip>
|
||
</el-table-column>
|
||
<el-table-column label="到岗情况" prop="dept_name">
|
||
<template slot-scope="scope">
|
||
<el-tag v-if="scope.row.is_atwork" type="success">
|
||
到岗
|
||
</el-tag>
|
||
<el-tag v-else type="danger">
|
||
未到
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="部门" prop="dept_">
|
||
<template slot-scope="scope" v-if="scope.row.dept_">{{scope.row.dept_.name}}</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<Echart
|
||
:options="pieOptions"
|
||
id="pieChart"
|
||
:height="pieHeight"
|
||
></Echart>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import Echart from '@/components/echart';
|
||
import echarts from 'echarts'
|
||
import {mapGetters} from 'vuex';
|
||
import {getEmployee} from "@/api/hrm";
|
||
import {getMaterialList} from "@/api/mtm";
|
||
import {getProductionplanList} from "@/api/pm";
|
||
import {getmaterialbatchList} from "@/api/inm";
|
||
import gantt from "@/components/Gantt/dashGantt";
|
||
import {getpEquipmentList} from "@/api/equipment";
|
||
import {getProcessYield, getPlanGantt,productCount} from "@/api/srm";
|
||
import {getContractList, getOrderList} from "@/api/sam";
|
||
import {getToken} from '@/utils/auth' // get token from cookie
|
||
export default {
|
||
components: {gantt,Echart},
|
||
name: 'Dashboard',
|
||
data() {
|
||
return {
|
||
animate: false,
|
||
intNum: null,
|
||
intNumUser: null,
|
||
animateUser: false,
|
||
chartColumn: null,
|
||
week: null,
|
||
nowHour: null,//当前时间的小时数
|
||
currentTime: null,
|
||
currentYear: null,
|
||
currentMonth: null,
|
||
currentDay: null,
|
||
pageCounts: 5,
|
||
userPage: 1,
|
||
userPageSize: 10,
|
||
userTotal: 0,
|
||
equipmentPage: 1,
|
||
equipmentPageSize: 10,
|
||
equipmentTotal: 0,
|
||
warningPage: 1,
|
||
warningPageSize: 10,
|
||
warningTotal: 0,
|
||
tableIndex: null,
|
||
chartIndex: null,
|
||
tableDate: '2021-12',
|
||
chartDate: [],
|
||
proList: [],
|
||
userList: [],
|
||
warningList: [],
|
||
equipmentList: [],
|
||
list: [
|
||
{id: 1, name: 'HIehd91', card: '3337', sco: 'REF-32'},
|
||
{id: 2, name: 'HIehd92', card: '3337', sco: 'REF-32'},
|
||
{id: 3, name: 'HIehd93', card: '3337', sco: 'REF-32'},
|
||
{id: 4, name: 'HIehd94', card: '3337', sco: 'REF-32'},
|
||
{id: 5, name: 'HIehd95', card: '3337', sco: 'REF-32'},
|
||
{id: 6, name: 'HIehd96', card: '3337', sco: 'REF-32'},
|
||
{id: 7, name: 'HIehd97', card: '3337', sco: 'REF-32'},
|
||
],
|
||
state_: {
|
||
10: '完好',
|
||
20: '限用',
|
||
30: '在修',
|
||
40: '禁用',
|
||
},
|
||
options: {
|
||
"1": '成品',
|
||
"2": '半成品',
|
||
"3": '主要原料',
|
||
"4": '辅助材料',
|
||
"5": '加工工具',
|
||
"6": '辅助工装',
|
||
},
|
||
activeName: '库存警告',
|
||
chartData: {
|
||
xAxisData: ["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
|
||
seriesData: [80, 95, 96, 96, 96, 98, 99, 100],
|
||
},
|
||
contractTotalCount: null,//合同总数
|
||
contractTotalCurrent: null,
|
||
orderTotalCount: null,//生产订单总数
|
||
orderTotalCurrent: null,
|
||
planTotalCount: null,//已排产任务总数
|
||
planTotalCurrent: null,
|
||
selledTotalCurrent: null,//累计交付产品总数
|
||
notokTotalCurrent: null,//累计不合格产品总数
|
||
listLoadingPlan: false,
|
||
listLoadingEm: false,
|
||
listLoadingUser: false,
|
||
cardTabelHeight: null,
|
||
ganttHeight: null,
|
||
pieHeight:'300px',
|
||
cdata: {
|
||
xData: ["已到岗","请假","公出", "未到岗"],
|
||
seriesData: [
|
||
{value: 70, name:"已到岗"},
|
||
{value: 15, name: "请假"},
|
||
{value: 10, name: "公出"},
|
||
{value: 5, name: "未到岗"},
|
||
]
|
||
},
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'name',
|
||
'perms',
|
||
'count'
|
||
])
|
||
},
|
||
watch: {
|
||
'$route.path': function (newVal) {
|
||
if (newVal === '/dashboard') {
|
||
this.getUserList();//用户列表
|
||
this.getEquipmentList();//设备列表
|
||
this.getGanttData();//甘特图数据
|
||
this.getStatisticsData();//统计数据
|
||
// this.getNoticeData();//提醒列表
|
||
}
|
||
},
|
||
cdata: {
|
||
handler(newData) {
|
||
this.pieOptions = {
|
||
color: [
|
||
"#409eff",
|
||
"#ffdb5c",
|
||
"#67c23a",
|
||
"#f27197"
|
||
],
|
||
legend: {
|
||
data:newData.xData,
|
||
top: 'top',
|
||
left: 'right',
|
||
orient: "vertical",
|
||
textStyle: {
|
||
color: "#556677", // 文字的颜色。
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
toolbox: {
|
||
show: true
|
||
},
|
||
calculable: true,
|
||
series: [
|
||
{
|
||
name: '人员到岗率',
|
||
type: 'pie', // 设置图表类型为饼图
|
||
radius: ['30%', '50%'], // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
|
||
center: ['50%', '45%'], //圆心位置
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
borderRadius: 20,
|
||
borderColor: '#fff',
|
||
borderWidth: 3
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: true,
|
||
fontSize: 14,
|
||
// fontWeight: 'bold'
|
||
}
|
||
},
|
||
data:newData.seriesData
|
||
}
|
||
]
|
||
}
|
||
},
|
||
immediate: true,
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
|
||
},
|
||
methods: {
|
||
setClass: function (check_date) {
|
||
let obj = {};
|
||
if (check_date != null) {
|
||
let dat = new Date();
|
||
let time = dat.getTime();
|
||
let check = new Date(check_date).getTime();
|
||
let timeDiffer = (check - time) / 1000 / 60 / 60 / 24;
|
||
if (4 > timeDiffer && timeDiffer > 0) {
|
||
obj = 'warning';
|
||
} else if (timeDiffer < 0) {
|
||
obj = "danger";
|
||
}
|
||
}
|
||
return obj;
|
||
},
|
||
|
||
// getNoticeData() {
|
||
// this.ScrollUp();
|
||
// },
|
||
|
||
// ScrollUp() {
|
||
// let that = this;
|
||
// that.intNum = setInterval(() => {
|
||
// if (that.warningList.length > 3) {
|
||
// that.animate = true;
|
||
// setTimeout(() => {
|
||
// that.warningList.push(that.warningList[0]);
|
||
// that.warningList.shift();
|
||
// that.animate = false;
|
||
// }, 3000)
|
||
// }
|
||
// }, 3000);
|
||
// },
|
||
|
||
//鼠标移上去停止
|
||
Stop() {
|
||
clearInterval(this.intNum);
|
||
},
|
||
|
||
Up() {
|
||
this.ScrollUp();
|
||
},
|
||
|
||
getStatisticsData() {
|
||
let that = this;
|
||
let dat = new Date();
|
||
that.week = dat.getDay();
|
||
that.currentTime = dat.getTime();
|
||
that.currentYear = dat.getFullYear();
|
||
let month = dat.getMonth() + 1;
|
||
that.currentMonth = month > 9 ? month : '0' + month;
|
||
that.currentDay = dat.getDate();
|
||
let create_time_start = that.currentYear + '-' + that.currentMonth + '-01';
|
||
//获取合同数
|
||
getContractList({page: 1, page_size: 1, create_time_start: create_time_start}).then((response) => {
|
||
if (response.data) {
|
||
that.contractTotalCurrent = response.data.count;
|
||
}
|
||
});
|
||
//获取生产订单数
|
||
getOrderList({page: 1, page_size: 1, create_time_start: create_time_start}).then((response) => {
|
||
if (response.data) {
|
||
that.orderTotalCurrent = response.data.count;
|
||
}
|
||
});
|
||
//获取已排产任务
|
||
getProductionplanList({page: 1, page_size: 1}).then((response) => {
|
||
if (response.data) {
|
||
that.planTotalCount = response.data.count;
|
||
}
|
||
});
|
||
//本月在制任务
|
||
getProductionplanList({page: 1, page_size: 1, tag: 'working'}).then((response) => {
|
||
if (response.data) {
|
||
that.planTotalCurrent = response.data.count;
|
||
}
|
||
});
|
||
//本月交付产品&本月不合格产品
|
||
productCount({datetime_start:create_time_start,tag:1}).then(respo=>{
|
||
if (respo.data) {
|
||
that.selledTotalCurrent = respo.data.count_selled;
|
||
that.notokTotalCurrent = respo.data.count_notok;
|
||
}
|
||
});
|
||
//获取不合格产品
|
||
|
||
//获取成品率
|
||
let d = new Date(that.currentYear, month, 0);
|
||
let days = d.getDate();
|
||
let start = that.currentYear + '-' + that.currentMonth;
|
||
let startDate = start + '-01';
|
||
let endDate = start + '-' + days;
|
||
that.chartDate = [start, start];
|
||
getProcessYield({datetime_start: startDate, datetime_end: endDate}).then((response) => {
|
||
if (response.data) {
|
||
let list = response.data;
|
||
let xAxisData = [], seriesData = [];
|
||
list.forEach(item => {
|
||
xAxisData.push(item.name);
|
||
let rate = item.rate * 100;
|
||
seriesData.push(rate.toFixed(2))
|
||
});
|
||
that.chartData.xAxisData = xAxisData;
|
||
that.chartData.seriesData = seriesData;
|
||
this.drawChart();
|
||
}
|
||
});
|
||
//获取库存警告
|
||
getMaterialList({page: 1, page_size: that.warningPageSize, tag: 'low_inm'}).then((response) => {
|
||
if (response.data) {
|
||
that.warningList = response.data.results;
|
||
that.warningTotal = response.data.count;
|
||
}
|
||
});
|
||
},
|
||
|
||
//设备列表
|
||
getEquipmentList() {
|
||
let that = this;
|
||
this.listLoadingEm = true;
|
||
that.equipmentPage = 1;
|
||
getpEquipmentList({page: that.equipmentPage, page_size: that.equipmentPageSize}).then((response) => {
|
||
if (response.data) {
|
||
that.equipmentList = response.data.results;
|
||
that.equipmentTotal = response.data.count;
|
||
}
|
||
that.listLoadingEm = false;
|
||
});
|
||
},
|
||
|
||
//设备分页跳转
|
||
handleEquipmentCurrentChange(val) {
|
||
let that = this;
|
||
that.listLoadingEm = true;
|
||
that.equipmentPage = val;
|
||
getpEquipmentList({page: val, page_size: that.equipmentPageSize}).then((response) => {
|
||
if (response.data) {
|
||
that.equipmentList = response.data.results;
|
||
that.equipmentTotal = response.data.count;
|
||
}
|
||
that.listLoadingEm = false;
|
||
});
|
||
},
|
||
|
||
//用户列表
|
||
getUserList() {
|
||
let that = this;
|
||
that.listLoadingUser = true;
|
||
that.userPage = 1;
|
||
getEmployee({page: that.userPage, page_size: that.userPageSize,show_atwork:true}).then((response) => {
|
||
if (response.data) {
|
||
that.userList = response.data.results;
|
||
that.userTotal = response.data.count;
|
||
that.userScroll();
|
||
}
|
||
that.listLoadingUser = false;
|
||
});
|
||
},
|
||
|
||
//用户分页跳转
|
||
handleUserCurrentChange(val) {
|
||
let that = this;
|
||
that.listLoadingUser = true;
|
||
that.userPage = val;
|
||
getEmployee({
|
||
page: val,
|
||
show_atwork:true,
|
||
page_size: that.userPageSize,
|
||
}).then((response) => {
|
||
if (response.data) {
|
||
that.userList = response.data.results;
|
||
that.userTotal = response.data.count;
|
||
that.userScroll();
|
||
}
|
||
that.listLoadingUser = false;
|
||
});
|
||
},
|
||
|
||
userScroll() {
|
||
let that = this;
|
||
that.intNumUser = setInterval(() => {
|
||
that.animateUser = true;
|
||
setTimeout(() => {
|
||
that.userList.push(that.userList[0]);
|
||
that.userList.shift();
|
||
that.animateUser = false;
|
||
}, 3000)
|
||
}, 3000);
|
||
},
|
||
|
||
//鼠标移上去停止
|
||
stopScroll() {
|
||
clearInterval(this.intNumUser);
|
||
},
|
||
|
||
toScroll() {
|
||
this.userScroll();
|
||
},
|
||
|
||
//去往工作流页面
|
||
gotoTicketPage() {
|
||
let path = this.$route.path;
|
||
if (path === '/workflow/ticket') {
|
||
this.$message.success("已在当前页面");
|
||
} else {
|
||
this.$router.push({name: 'ticket', params: {}})
|
||
}
|
||
},
|
||
|
||
//图标渲染
|
||
drawChart() {
|
||
let that = this;
|
||
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
|
||
this.chartColumn.setOption({
|
||
// title: { text: '成品率' },
|
||
grid: {
|
||
top: '20%',
|
||
left: '10%',
|
||
right: '10%',
|
||
bottom: '10%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'item',
|
||
/* formatter(params){
|
||
for(let x in params){
|
||
return params[x].name +":"+params[x].data+"%";
|
||
}
|
||
}*/
|
||
formatter: function (params) {
|
||
let color = params.color;//图例颜色
|
||
let htmlStr = '<div>';
|
||
htmlStr += params.name + '<br/>';
|
||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||
htmlStr += params.seriesName + '：' + params.value + '%';
|
||
htmlStr += '</div>';
|
||
return htmlStr;
|
||
}
|
||
},
|
||
xAxis: {
|
||
// name:'工序',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false, //去掉X轴分割线
|
||
},
|
||
axisLabel: {//X轴字体倾斜度设置
|
||
interval: 0,
|
||
// 倾斜45°
|
||
rotate:45,//倾斜度 -90 至 90 默认为0
|
||
},
|
||
data: that.chartData.xAxisData,
|
||
},
|
||
yAxis: {
|
||
axisLine: {
|
||
show: true,//y轴线
|
||
},
|
||
axisTick: {
|
||
show: false//Y轴刻度线
|
||
},
|
||
axisLabel: {
|
||
color: '#333333',//Y轴文本颜色
|
||
fontSize: 10,//字体大小
|
||
},
|
||
splitLine: {
|
||
show: true, //Y轴分割线
|
||
lineStyle: {
|
||
color: '#dddddd'//Y轴分割线颜色
|
||
}
|
||
},
|
||
},
|
||
series: [{
|
||
name: '成品率',
|
||
type: 'bar',
|
||
barWidth: 20,
|
||
showBackground: true,
|
||
backgroundStyle: {
|
||
color: 'rgba(180, 180, 180, 0.2)'
|
||
},
|
||
// data: that.chartData.seriesData,
|
||
data:[90,80,60,80,70,90,100],
|
||
label: {
|
||
show: true, //开启显示
|
||
position: 'top', //在上方显示
|
||
formatter: '{c}%',//显示百分号
|
||
textStyle: { //数值样式
|
||
color: 'black',//字体颜色
|
||
fontSize: 10//字体大小
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
barBorderRadius:[8,8,0,0],
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#adcff3'
|
||
}, {
|
||
offset: 1,
|
||
color: '#409EFF'
|
||
}]),
|
||
}
|
||
},
|
||
}]
|
||
});
|
||
},
|
||
|
||
toDetail(index) {
|
||
if (index === '1') {
|
||
this.$router.push({name: 'contract', params: {page: 1, page_size: 20}})
|
||
} else if (index === '2') {
|
||
this.$router.push({name: 'order', params: {page: 1, page_size: 20}})
|
||
} else if (index === '3') {
|
||
this.$router.push({name: 'management', params: {page: 1, page_size: 20}})
|
||
} else if (index === '4') {
|
||
this.$router.push({name: 'sales'})
|
||
} else if (index === '5') {
|
||
this.$router.push({name: 'unproduct'})
|
||
}
|
||
},
|
||
|
||
//选择月份
|
||
searchTimeChange(index) {
|
||
let that = this;
|
||
let startDate = '', endDate = '';
|
||
let year = null, month = null, days = null;
|
||
if (index === '1') {
|
||
this.tableIndex = null;
|
||
startDate = that.chartDate[0] + '-01';
|
||
year = that.chartDate[1].split("-")[0];
|
||
month = that.chartDate[1].split("-")[1];
|
||
let d = new Date(year, month, 0);
|
||
days = d.getDate();
|
||
endDate = this.tableDate + '-' + days;
|
||
getProcessYield({datetime_start: startDate, datetime_end: endDate}).then((response) => {
|
||
if (response.data) {
|
||
let list = response.data;
|
||
let xAxisData = [], seriesData = [];
|
||
list.forEach(item => {
|
||
xAxisData.push(item.name);
|
||
let rate = item.rate * 100;
|
||
seriesData.push(rate.toFixed(2))
|
||
});
|
||
that.chartData.xAxisData = xAxisData;
|
||
that.chartData.seriesData = seriesData;
|
||
this.drawChart();
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
//提示
|
||
activeNameClick() {
|
||
let that = this;
|
||
that.warningPage = 1;
|
||
that.warningList = [];
|
||
if (that.activeName === '库存警告') {
|
||
getMaterialList({page: 1, page_size: that.warningPageSize, tag: 'low_inm'}).then((response) => {
|
||
if (response.data) {
|
||
that.warningList = response.data.results;
|
||
that.warningTotal = response.data.count;
|
||
}
|
||
});
|
||
} else if (that.activeName === '临近交货') {
|
||
getOrderList({page: 1, page_size: that.warningPageSize, tag: 'near_delivery'}).then((response) => {
|
||
if (response.data) {
|
||
that.warningList = response.data.results;
|
||
that.warningTotal = response.data.count;
|
||
}
|
||
});
|
||
} else if (that.activeName === '过期提醒') {
|
||
getmaterialbatchList({page: 1, page_size: that.warningPageSize, tag: 'expired'}).then((response) => {
|
||
if (response.data) {
|
||
let warningList = response.data.results;
|
||
let arr = [];
|
||
warningList.forEach(item => {
|
||
let obj = new Object();
|
||
obj.name = item.material_.name;
|
||
obj.unit = item.material_.unit;
|
||
obj.number = item.material_.number;
|
||
obj.id = item.id;
|
||
obj.expiration_date = item.expiration_date;
|
||
arr.push(obj)
|
||
});
|
||
that.warningList = arr;
|
||
that.warningTotal = response.data.count;
|
||
}
|
||
});
|
||
} else if (that.activeName === '设备检测') {
|
||
that.warningPageSize = 100;
|
||
let warningList = [];
|
||
getpEquipmentList({page: 0, tag: 'near_done'}).then((response) => {
|
||
if (response.data) {
|
||
let results = response.data;
|
||
if (results.length > 0) {
|
||
results.forEach(item => {
|
||
let obj = new Object();
|
||
obj = item;
|
||
obj.warningType = 1;
|
||
warningList.push(obj);
|
||
});
|
||
}
|
||
getpEquipmentList({page: 0, tag: 'out_done'}).then((res) => {
|
||
if (response.data) {
|
||
let resData = res.data;
|
||
if (resData.length > 0) {
|
||
resData.forEach(item => {
|
||
let obj1 = new Object();
|
||
obj1 = item;
|
||
obj1.warningType = 2;
|
||
warningList.push(obj1);
|
||
});
|
||
}
|
||
that.warningList = warningList;
|
||
that.warningTotal = warningList.length;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
} else if (that.activeName === '任务到期') {
|
||
that.warningPageSize = 100;
|
||
let warningList = [];
|
||
getProductionplanList({page: 0, tag: 'near_done'}).then((response) => {
|
||
if (response.data) {
|
||
let results = response.data;
|
||
if (results.length > 0) {
|
||
results.forEach(item => {
|
||
let obj = new Object();
|
||
obj = item;
|
||
obj.warningType = 1;
|
||
warningList.push(obj);
|
||
});
|
||
}
|
||
getProductionplanList({page: 0, tag: 'out_done'}).then((res) => {
|
||
if (response.data) {
|
||
let resData = res.data;
|
||
if (resData.length > 0) {
|
||
resData.forEach(item => {
|
||
let obj1 = new Object();
|
||
obj1 = item;
|
||
obj1.warningType = 2;
|
||
warningList.push(obj1);
|
||
});
|
||
}
|
||
that.warningList = warningList;
|
||
that.warningTotal = warningList.length;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
handleWarningSizeChange(val) {
|
||
this.warningPageSize = val;
|
||
this.warningPage = 1;
|
||
},
|
||
|
||
handleWarningCurrentChange(val) {
|
||
let that = this;
|
||
that.warningPage = val;
|
||
if (that.activeName === '库存警告') {
|
||
getMaterialList({page: val, page_size: that.warningPageSize, tag: 'low_inm'}).then((response) => {
|
||
if (response.data) {
|
||
that.warningList = response.data.results;
|
||
that.warningTotal = response.data.count;
|
||
}
|
||
});
|
||
} else if (that.activeName === '临近交货') {
|
||
getOrderList({page: val, page_size: that.warningPageSize, tag: 'near_delivery'}).then((response) => {
|
||
if (response.data) {
|
||
that.warningList = response.data.results;
|
||
that.warningTotal = response.data.count;
|
||
}
|
||
});
|
||
} else if (that.activeName === '过期提醒') {
|
||
getmaterialbatchList({page: val, page_size: that.warningPageSize, tag: 'expired'}).then((response) => {
|
||
if (response.data) {
|
||
that.warningList = response.data.results;
|
||
that.warningTotal = response.data.count;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
getGanttData() {
|
||
let that = this;
|
||
getPlanGantt({}).then(res => {
|
||
if (res.code === 200) {
|
||
let arr = [];
|
||
let list = res.data.results;
|
||
list.forEach(item => {
|
||
if (!item.children || item.children.length < 1) {
|
||
let startTime = new Date(item.start_date).getTime();
|
||
let endTime = new Date(item.end_date).getTime();
|
||
let obj = new Object();
|
||
obj.name = item.number;
|
||
obj.id = item.id;
|
||
obj.top = 20;
|
||
obj.startTime = startTime;
|
||
obj.endTime = endTime;
|
||
obj.planTime = [startTime, endTime];
|
||
obj.per = item.count;
|
||
obj.per1 = item.count_ok;
|
||
obj.type = 1;
|
||
obj.productName = item.product_.name;
|
||
obj.productNum = item.product_.specification;
|
||
obj.isShow = true;
|
||
arr.push(obj);
|
||
} else if (item.children && item.children.length >= 1) {
|
||
let startTime = new Date(item.start_date).getTime();
|
||
let endTime = new Date(item.end_date).getTime();
|
||
let temp = [];
|
||
let parentId = item.id;
|
||
let children = item.children;
|
||
children.forEach(child => {
|
||
let start = new Date(child.start_date).getTime();
|
||
let end = new Date(child.end_date).getTime();
|
||
let objChild = new Object();
|
||
objChild.name = child.number;
|
||
objChild.id = child.id;
|
||
objChild.top = 50;
|
||
objChild.parentId = parentId;
|
||
objChild.startTime = start;
|
||
objChild.endTime = end;
|
||
objChild.planTime = [start, end];
|
||
objChild.per = child.count;
|
||
objChild.per1 = child.count_ok;
|
||
objChild.type = 1;
|
||
objChild.productName = child.product_.name;
|
||
objChild.productNum = child.product_.specification;
|
||
objChild.isShow = true;
|
||
|
||
temp.push(objChild);
|
||
});
|
||
let obj = new Object();
|
||
obj.name = item.number;
|
||
obj.id = item.id;
|
||
obj.top = 20;
|
||
obj.startTime = startTime;
|
||
obj.endTime = endTime;
|
||
obj.planTime = [startTime, endTime];
|
||
obj.per = item.count;
|
||
obj.per1 = item.count_ok;
|
||
obj.type = 3;
|
||
obj.productName = item.product_.name;
|
||
obj.productNum = item.product_.specification;
|
||
obj.children = temp;
|
||
obj.isShow = true;
|
||
arr.push(obj);
|
||
}
|
||
that.proList = arr;
|
||
});
|
||
} else {
|
||
that.$message.error(res.msg);
|
||
}
|
||
})
|
||
},
|
||
|
||
refreshBottomTabel(index) {
|
||
if (index === '1') {//生产设备
|
||
this.getEquipmentList();//设备列表
|
||
} else if (index === '2') {//人员到岗
|
||
this.getUserList();//用户列表
|
||
} else {//提醒
|
||
this.activeNameClick();
|
||
}
|
||
},
|
||
|
||
refreshDataFrequently() {
|
||
let that = this;
|
||
let hasToken = getToken();
|
||
if (hasToken) {
|
||
this.timer = window.setInterval(() => {
|
||
if (that.nowHour > 7 && that.nowHour < 10) {
|
||
that.getUserList();//用户列表
|
||
that.getEquipmentList();//设备列表
|
||
that.getGanttData();//甘特图数据
|
||
that.getStatisticsData();//统计数据
|
||
// that.getNoticeData();//提醒列表
|
||
} else {
|
||
that.refreshDataSlowly();
|
||
}
|
||
}, 120000)//2分钟
|
||
}
|
||
},
|
||
|
||
refreshDataSlowly() {
|
||
let that = this;
|
||
let hasToken = getToken();
|
||
if (hasToken) {
|
||
this.timer = window.setInterval(() => {
|
||
if (that.nowHour > 7 && that.nowHour < 10) {
|
||
that.refreshDataFrequently();
|
||
} else {
|
||
that.getUserList();//用户列表
|
||
that.getEquipmentList();//设备列表
|
||
that.getGanttData();//甘特图数据
|
||
that.getStatisticsData();//统计数据
|
||
// that.getNoticeData();//提醒列表
|
||
}
|
||
}, 3600000)//1小时1000*10*60
|
||
}
|
||
},
|
||
},
|
||
mounted() {
|
||
let hei = document.getElementsByClassName('app-main')[0].clientHeight;
|
||
let heig = document.getElementsByClassName('dashboardTopCard')[0].clientHeight;
|
||
let domHeight = ((hei - heig - 240) / 2);
|
||
this.cardTabelHeight = domHeight;
|
||
this.pieHeight=domHeight+'px';
|
||
this.ganttHeight = domHeight;
|
||
document.getElementById('chartColumn').style.height = domHeight + 'px';
|
||
this.getUserList();//用户列表
|
||
this.getEquipmentList();//设备列表
|
||
this.getGanttData();//甘特图数据
|
||
this.getStatisticsData();//统计数据
|
||
// this.getNoticeData();//提醒列表
|
||
let nowDate = new Date();
|
||
let nowHour = nowDate.getHours();
|
||
this.nowHour = nowHour;
|
||
if (nowHour > 7 && nowHour < 10) {
|
||
this.refreshDataFrequently();
|
||
} else {
|
||
this.refreshDataSlowly();
|
||
}
|
||
if(this.intNumUser){}else{}
|
||
if(this.intNumUser){}else{}
|
||
},
|
||
beforeDestroy() {
|
||
window.clearInterval(this.timer);
|
||
this.timer = null;
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
::-webkit-scrollbar {
|
||
width: 5px!important;
|
||
background: #eee!important;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3)!important;
|
||
border-radius: 3px!important;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
border-radius: 3px!important;
|
||
height: 100px!important;
|
||
background-color: #ccc!important;
|
||
}
|
||
.el-card.is-always-shadow {
|
||
height: auto !important;
|
||
}
|
||
|
||
.dashboard-container {
|
||
margin: 20px 30px;
|
||
}
|
||
|
||
.dashboardTopCard, .dashboardMiddle, .dashboardBottomRow {
|
||
-webkit-border-radius: 15px;
|
||
-moz-border-radius: 15px;
|
||
border-radius: 15px;
|
||
margin-bottom: 20px;
|
||
background: #ffffff;
|
||
overflow: hidden;
|
||
// box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||
}
|
||
.dashboardTopCard{
|
||
background: none;
|
||
box-shadow:none;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.dashboardBottomRow {
|
||
margin-bottom: 0;
|
||
position: relative;
|
||
padding: 20px;
|
||
}
|
||
|
||
.dashboardCardPadding {
|
||
overflow: hidden;
|
||
padding: 20px;
|
||
}
|
||
|
||
/**/
|
||
.cardsWrap {
|
||
display: flex;
|
||
width: 18%;
|
||
color: #777777;
|
||
float: left;
|
||
font-size: 14px;
|
||
border-radius: 15px;
|
||
padding: 30px 20px 30px 40px;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.svgIconWrap {
|
||
margin-right: 20px;
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 15px;
|
||
text-align: center;
|
||
|
||
.svgIcon {
|
||
font-size: 24px;
|
||
margin-top: 13px
|
||
}
|
||
}
|
||
|
||
.cardsWrap:nth-child(1) {
|
||
.svgIconWrap {
|
||
background: #e9f3ff;
|
||
|
||
.svgIcon {
|
||
color: #409EFF;
|
||
fill: #409EFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cardsWrap:nth-child(2) {
|
||
.svgIconWrap {
|
||
background: #fff1de;
|
||
|
||
.svgIcon {
|
||
color: #ffb23f;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cardsWrap:nth-child(3) {
|
||
.svgIconWrap {
|
||
background: #d9f6d8;
|
||
|
||
.svgIcon {
|
||
color: #54cb48;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cardsWrap:nth-child(4) {
|
||
.svgIconWrap {
|
||
background: #f0e8fd;
|
||
|
||
.svgIcon {
|
||
color: #a378e4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cardsWrap:nth-child(5) {
|
||
.svgIconWrap {
|
||
background: #f7e5ea;
|
||
|
||
.svgIcon {
|
||
color: #f27197;
|
||
}
|
||
}
|
||
}
|
||
|
||
.totalCountText {
|
||
height: 20px;
|
||
line-height: 20px
|
||
}
|
||
|
||
.totalCountNum {
|
||
height: 30px;
|
||
}
|
||
|
||
.totalCount {
|
||
font-size: 25px;
|
||
font-weight: bold;
|
||
color: #626262;
|
||
}
|
||
|
||
/**/
|
||
.CardTitleWrap {
|
||
display: flex;
|
||
height: 35px;
|
||
line-height: 35px;
|
||
padding-left: 1%;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
/*padding-top: 6px;*/
|
||
.verticalLine {
|
||
width: 4px;
|
||
height: 15px;
|
||
background: #409EFF;
|
||
margin-right: 7px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.dashboardCardTitle {
|
||
height: 34px;
|
||
line-height: 34px;
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
width: 70px;
|
||
vertical-align: middle;
|
||
margin-right: 7px;
|
||
}
|
||
|
||
.stockMore {
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
color: #409EFF;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
/*成品率筛选条件*/
|
||
.dashboardCardHand {
|
||
display: flex;
|
||
padding-left: 1%;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
|
||
.dashboardCardFilter {
|
||
display: flex;
|
||
|
||
.convenientWrap {
|
||
display: flex;
|
||
border: 1px solid #DCDFE6;
|
||
border-radius: 6px;
|
||
height: 30px;
|
||
line-height: 30px;
|
||
margin-left: 10px;
|
||
font-size: 12px;
|
||
|
||
.convenientBtn {
|
||
cursor: pointer;
|
||
width: 50px;
|
||
text-align: center;
|
||
border-right: 1px solid #DCDFE6;
|
||
}
|
||
|
||
.convenientBtn:last-child {
|
||
border-right: 0;
|
||
border-radius: 0 6px 6px 0;
|
||
}
|
||
|
||
.convenientBtn:first-child {
|
||
border-radius: 6px 0 0 6px;
|
||
}
|
||
|
||
.activeIndex {
|
||
color: #ffffff;
|
||
background: #409EFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.refreshIcon {
|
||
color: #409EFF;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.anim {
|
||
transition: all 0.5s;
|
||
margin-top: -35px; //高度等于行高
|
||
}
|
||
|
||
.lists {
|
||
height: 100%;
|
||
line-height: 35px;
|
||
transition: top 0.5s;
|
||
overflow-y: scroll;
|
||
padding-right: 40px;
|
||
margin: 0 !important;
|
||
|
||
.listItem {
|
||
height: 40px;
|
||
line-height: 40px;
|
||
font-size: 12px;
|
||
|
||
.itemText {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nearStatus {
|
||
color: #e6a23c;
|
||
}
|
||
|
||
.outStatus {
|
||
color: #f56c6c;
|
||
}
|
||
|
||
#chartColumn > div {
|
||
height: 100% !important;
|
||
|
||
canvas {
|
||
height: 100% !important;
|
||
}
|
||
}
|
||
#searchWrap .el-range-editor.el-input__inner {
|
||
height: 30px !important;
|
||
padding: 0 5px !important;
|
||
}
|
||
#dashboardMiddle .el-range-editor--medium.el-input__inner,
|
||
#dashboardMiddle .el-range-editor.el-input__inner {
|
||
height: 30px !important;
|
||
}
|
||
#pieChart{
|
||
width: 45%!important;
|
||
}
|
||
</style>
|