dashPage
This commit is contained in:
parent
9a31871839
commit
0796f30cb1
|
|
@ -7,3 +7,11 @@ export function getPlanGantt(data) {
|
|||
params: data
|
||||
})
|
||||
}
|
||||
//合格率
|
||||
export function getProcessYield(data) {
|
||||
return request({
|
||||
url: '/srm/process/yield/',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<div class="tableMneu">
|
||||
<div
|
||||
class="mask"
|
||||
v-if="isShowHeaderBox || menuOpen"
|
||||
@click="maskClick"
|
||||
></div>
|
||||
<el-table
|
||||
ref="tableMenu"
|
||||
:data="tableData"
|
||||
border
|
||||
fit
|
||||
style="width: 100%"
|
||||
row-key="id"
|
||||
height="100%"
|
||||
default-expand-all
|
||||
highlight-current-row
|
||||
@row-click="handlerRowClick"
|
||||
@expand-change="handlerExpand"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column label="任务编号" prop="name" width="140" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品名称" prop="productName" width="120" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品型号" prop="productNum">
|
||||
</el-table-column>
|
||||
<el-table-column label="生产数量" prop="per">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: Array,
|
||||
BGScrollTop: Number
|
||||
},
|
||||
computed: {
|
||||
tableData() {
|
||||
return this.list;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
BGScrollTop: {
|
||||
handler: function(newValue) {
|
||||
let table = this.$refs.tableMenu.bodyWrapper;
|
||||
table.scrollTo(0, newValue);
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkList: [],
|
||||
isShowHeaderBox: false,
|
||||
menuOpen: false,
|
||||
//当前点击的row
|
||||
currentRow: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handlerWatchScroll() {
|
||||
let table = this.$refs.tableMenu.bodyWrapper;
|
||||
table.addEventListener("scroll", e => {
|
||||
this.$emit("TableScrollTop", e.srcElement.scrollTop);
|
||||
});
|
||||
},
|
||||
handlerSelect(row) {
|
||||
this.$refs.tableMenu.setCurrentRow(row);
|
||||
},
|
||||
handlerExpand(row, expand) {
|
||||
// console.log(row, expanded);
|
||||
this.$emit("handlerExpand", row, expand);
|
||||
},
|
||||
maskClick() {
|
||||
this.isShowHeaderBox = false;
|
||||
this.menuOpen = false;
|
||||
this.currentRow = {};
|
||||
},
|
||||
handlerRowClick(row) {
|
||||
this.$emit("handlerRowClick", row);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.handlerWatchScroll();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tableMneu {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: transparent;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
.tableMneu {
|
||||
.el-table th.gutter {
|
||||
display: table-cell !important;
|
||||
}
|
||||
.el-table td,
|
||||
.el-table th {
|
||||
padding: 8px 0;
|
||||
}
|
||||
.el-table--border td {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
.el-table th.el-table__cell>.cell{
|
||||
font-size: 12px!important;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -35,12 +35,56 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.openTheCamera();
|
||||
},
|
||||
methods: {
|
||||
openTheCamera () {
|
||||
this.$nextTick(function () {
|
||||
let _this = this;
|
||||
this.video = document.getElementById('video');
|
||||
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
|
||||
if (navigator.mediaDevices === undefined) {
|
||||
navigator.mediaDevices = {}
|
||||
}
|
||||
// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
|
||||
// 使用getUserMedia，因为它会覆盖现有的属性。
|
||||
// 这里，如果缺少getUserMedia属性，就添加它。
|
||||
if (navigator.mediaDevices.getUserMedia === undefined) {
|
||||
navigator.mediaDevices.getUserMedia = function (constraints) {
|
||||
// 首先获取现存的getUserMedia(如果存在)
|
||||
let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
|
||||
// 有些浏览器不支持，会返回错误信息
|
||||
// 保持接口一致
|
||||
if (!getUserMedia) {
|
||||
return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
|
||||
}
|
||||
// 否则，使用Promise将调用包装到旧的navigator.getUserMedia
|
||||
return new Promise(function (resolve, reject) {
|
||||
getUserMedia.call(navigator, constraints, resolve, reject)
|
||||
})
|
||||
}
|
||||
}
|
||||
let constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } };
|
||||
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
|
||||
// 旧的浏览器可能没有srcObject
|
||||
if ('srcObject' in _this.video) {
|
||||
_this.video.srcObject = stream
|
||||
} else {
|
||||
// 避免在新的浏览器中使用它，因为它正在被弃用。
|
||||
_this.video.src = window.URL.createObjectURL(stream)
|
||||
}
|
||||
_this.video.onloadedmetadata = function (e) {
|
||||
_this.video.play();
|
||||
};
|
||||
_this.init();
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
});
|
||||
},
|
||||
// 初始化设置
|
||||
init() {
|
||||
this.video = document.getElementById('video');
|
||||
// this.video = document.getElementById('video');
|
||||
this.screenshotCanvas = document.getElementById('screenshotCanvas');
|
||||
let canvas = document.getElementById('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
|
@ -64,7 +108,6 @@
|
|||
event.data.forEach(function (rect) {
|
||||
context.strokeStyle = '#0764B7';
|
||||
context.strokeRect(rect.x, rect.y, rect.width, rect.height);
|
||||
// window.plot(rect.x, rect.y, rect.width, rect.height+20);
|
||||
// 避免重复发送请求
|
||||
if(!_this.uploadLock){
|
||||
_this.uploadLock = true;
|
||||
|
|
@ -133,7 +176,10 @@
|
|||
that.uploadLock = false;
|
||||
// this.$message.error('面部识别失败请重新验证');
|
||||
});
|
||||
}
|
||||
},
|
||||
closeCamera () {
|
||||
this.video.srcObject.getTracks()[0].stop();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -24,12 +24,55 @@
|
|||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
this.openTheCamera();
|
||||
},
|
||||
methods: {
|
||||
openTheCamera () {
|
||||
this.$nextTick(function () {
|
||||
let _this = this;
|
||||
this.video = document.getElementById('video');
|
||||
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
|
||||
if (navigator.mediaDevices === undefined) {
|
||||
navigator.mediaDevices = {}
|
||||
}
|
||||
// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
|
||||
// 使用getUserMedia，因为它会覆盖现有的属性。
|
||||
// 这里，如果缺少getUserMedia属性，就添加它。
|
||||
if (navigator.mediaDevices.getUserMedia === undefined) {
|
||||
navigator.mediaDevices.getUserMedia = function (constraints) {
|
||||
// 首先获取现存的getUserMedia(如果存在)
|
||||
let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
|
||||
// 有些浏览器不支持，会返回错误信息
|
||||
// 保持接口一致
|
||||
if (!getUserMedia) {
|
||||
return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
|
||||
}
|
||||
// 否则，使用Promise将调用包装到旧的navigator.getUserMedia
|
||||
return new Promise(function (resolve, reject) {
|
||||
getUserMedia.call(navigator, constraints, resolve, reject)
|
||||
})
|
||||
}
|
||||
}
|
||||
let constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } };
|
||||
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
|
||||
// 旧的浏览器可能没有srcObject
|
||||
if ('srcObject' in _this.video) {
|
||||
_this.video.srcObject = stream
|
||||
} else {
|
||||
// 避免在新的浏览器中使用它，因为它正在被弃用。
|
||||
_this.video.src = window.URL.createObjectURL(stream)
|
||||
}
|
||||
_this.video.onloadedmetadata = function (e) {
|
||||
_this.video.play();
|
||||
};
|
||||
_this.init();
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
});
|
||||
},
|
||||
// 初始化设置
|
||||
init() {
|
||||
this.video = document.getElementById('video');
|
||||
this.screenshotCanvas = document.getElementById('screenshotCanvas');
|
||||
let canvas = document.getElementById('canvas');
|
||||
let context = canvas.getContext('2d');
|
||||
|
|
@ -46,7 +89,6 @@
|
|||
let _this = this;
|
||||
//添加事件
|
||||
tracker.on('track', function (event) {
|
||||
|
||||
// 检测出人脸 绘画人脸位置
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
// 给每个人脸绘制对应的框
|
||||
|
|
@ -112,7 +154,10 @@
|
|||
that.uploadLock = false;
|
||||
// this.$message.error('面部识别失败请重新验证');
|
||||
});
|
||||
}
|
||||
},
|
||||
closeCamera () {
|
||||
this.video.srcObject.getTracks()[0].stop();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,58 +1,121 @@
|
|||
<template>
|
||||
<div class="dashboard-container">
|
||||
<el-card class="dashboardTopCard">
|
||||
<div class="dashboardTopCard">
|
||||
<div class="CardTitleWrap">
|
||||
<span class="verticalLine"></span><span class="dashboardCardTitle">数据统计</span>
|
||||
</div>
|
||||
<div class="cards" @click="toDetail('1')">
|
||||
<div class="cardCurrentText">本月：{{contractTotalCurrent}}</div>
|
||||
<div class="cardTotalText">{{contractTotalCount}}</div>
|
||||
<div>合同总数</div>
|
||||
<div style="padding: 20px;overflow: hidden;">
|
||||
<div class="cardsWrap" @click="toDetail('1')">
|
||||
<div class="svgIconWrap">
|
||||
<svg-icon
|
||||
icon-class="form"
|
||||
class="svgIcon"
|
||||
/>
|
||||
</div>
|
||||
<div class="cards" @click="toDetail('2')">
|
||||
<div class="cardCurrentText">本月：{{orderTotalCurrent}}</div>
|
||||
<div class="cardTotalText">{{orderTotalCount}}</div>
|
||||
<div>生产订单总数</div>
|
||||
<div class="totalCountWrap">
|
||||
<span class="totalCountText">本月合同数</span>
|
||||
<div class="totalCountNum">
|
||||
<span class="totalCount">30</span>
|
||||
<span>个</span>
|
||||
</div>
|
||||
<div class="cards" @click="toDetail('3')">
|
||||
<div class="cardCurrentText">在制：{{planTotalCurrent}}</div>
|
||||
<div class="cardTotalText">{{planTotalCount}}</div>
|
||||
<div>已排产生产任务</div>
|
||||
</div>
|
||||
<div class="cards" @click="toDetail('4')">
|
||||
<div class="cardCurrentText">本月：4</div>
|
||||
<div class="cardTotalText">20</div>
|
||||
<div>累计交付产品数</div>
|
||||
</div>
|
||||
<div class="cards" @click="toDetail('5')">
|
||||
<div class="cardCurrentText">本月：2</div>
|
||||
<div class="cardTotalText">2</div>
|
||||
<div>累计不合格产品数</div>
|
||||
<div class="cardsWrap" @click="toDetail('2')">
|
||||
<div class="svgIconWrap">
|
||||
<svg-icon
|
||||
icon-class="form"
|
||||
class="svgIcon"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="box-card dashboardSubRow" >
|
||||
<div style="height: 40px;line-height: 40px;background: #F5F7FA;padding-left: 20px;">甘特图</div>
|
||||
<!--<div :style="{height:cardTabelHeight+'px'}">-->
|
||||
<div class="totalCountWrap">
|
||||
<span class="totalCountText">本月生产订单数</span>
|
||||
<div class="totalCountNum">
|
||||
<span class="totalCount">30</span>
|
||||
<span>个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cardsWrap" @click="toDetail('3')">
|
||||
<div class="svgIconWrap">
|
||||
<svg-icon
|
||||
icon-class="form"
|
||||
class="svgIcon"
|
||||
/>
|
||||
</div>
|
||||
<div class="totalCountWrap">
|
||||
<span class="totalCountText">本月在制任务</span>
|
||||
<div class="totalCountNum">
|
||||
<span class="totalCount">30</span>
|
||||
<span>个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cardsWrap" @click="toDetail('4')">
|
||||
<div class="svgIconWrap">
|
||||
<svg-icon
|
||||
icon-class="form"
|
||||
class="svgIcon"
|
||||
/>
|
||||
</div>
|
||||
<div class="totalCountWrap">
|
||||
<span class="totalCountText">本月交付产品</span>
|
||||
<div class="totalCountNum">
|
||||
<span class="totalCount">30</span>
|
||||
<span>个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cardsWrap" @click="toDetail('5')">
|
||||
<div class="svgIconWrap">
|
||||
<svg-icon
|
||||
icon-class="form"
|
||||
class="svgIcon"
|
||||
/>
|
||||
</div>
|
||||
<div class="totalCountWrap">
|
||||
<span class="totalCountText">本月不合格产品</span>
|
||||
<div class="totalCountNum">
|
||||
<span class="totalCount">30</span>
|
||||
<span>个</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashboardMiddle" class="dashboardMiddle">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<div class="CardTitleWrap">
|
||||
<span class="verticalLine"></span><span class="dashboardCardTitle">任务进度</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<div class="CardTitleWrap">
|
||||
<span class="verticalLine"></span><span class="dashboardCardTitle">成品率</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="padding: 5px 20px 20px 20px;">
|
||||
<el-col :span="15">
|
||||
<div style="height: 40px;line-height: 40px;"></div>
|
||||
<div>
|
||||
<gantt
|
||||
style="position: relative"
|
||||
v-if="proList.length>0"
|
||||
:proList="proList"
|
||||
:ganttHeight="cardTabelHeight"
|
||||
></gantt>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-row class="dashboardSubRow" :gutter="5">
|
||||
<el-col :span="12">
|
||||
<el-card style="border-radius: 10px;">
|
||||
</el-col>
|
||||
<el-col :span="1" style="height: 1px"></el-col>
|
||||
<el-col :span="8">
|
||||
<div class="dashboardCardHand">
|
||||
<div class="CardTitleWrap">
|
||||
<span class="verticalLine"></span><span class="dashboardCardTitle">任务排期</span>
|
||||
</div>
|
||||
<div class="dashboardCardFilter">
|
||||
<el-date-picker
|
||||
v-model="tableDate"
|
||||
type="month"
|
||||
placeholder="查询日期"
|
||||
v-model="chartDate"
|
||||
type="monthrange"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
range-separator="至"
|
||||
format="yyyy 年 MM 月"
|
||||
value-format="yyyy-MM"
|
||||
|
|
@ -60,66 +123,17 @@
|
|||
>
|
||||
</el-date-picker>
|
||||
<div class="convenientWrap">
|
||||
<div class="convenientBtn" :class="{activeIndex:tableIndex==='1'}" @click="convenientClick('1','week')">本周</div>
|
||||
<div class="convenientBtn" :class="{activeIndex:tableIndex==='2'}" @click="convenientClick('1','month')">本月</div>
|
||||
<div class="convenientBtn" :class="{activeIndex:tableIndex==='3'}" @click="convenientClick('1','quarter')">三个月</div>
|
||||
<div class="convenientBtn" :class="{activeIndex:chartIndex==='1'}" @click="convenientClick('1','week')">本周</div>
|
||||
<div class="convenientBtn" :class="{activeIndex:chartIndex==='2'}" @click="convenientClick('1','month')">本月</div>
|
||||
<div class="convenientBtn" :class="{activeIndex:chartIndex==='3'}" @click="convenientClick('1','quarter')">三个月</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="listLoadingPlan"
|
||||
:data="planList"
|
||||
border fit stripe
|
||||
:height="cardTabelHeight"
|
||||
>
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column label="任务编号" prop="number">
|
||||
</el-table-column>
|
||||
<el-table-column label="产品名称">
|
||||
<template slot-scope="scope">{{ scope.row.product_.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="产品型号">
|
||||
<template slot-scope="scope">{{ scope.row.product_.specification }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="生产数量" prop="count">
|
||||
</el-table-column>
|
||||
<el-table-column label="开始时间" prop="start_date">
|
||||
</el-table-column>
|
||||
<el-table-column label="结束时间" prop="end_date">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card style="border-radius: 10px;">
|
||||
<div class="dashboardCardHand">
|
||||
<div class="CardTitleWrap">
|
||||
<span class="verticalLine"></span><span class="dashboardCardTitle">成品率</span>
|
||||
</div>
|
||||
<!--<div class="dashboardCardTitle">成品率</div>-->
|
||||
<div class="dashboardCardFilter">
|
||||
<el-date-picker
|
||||
v-model="chartDate"
|
||||
type="month"
|
||||
placeholder="查询日期"
|
||||
range-separator="至"
|
||||
format="yyyy 年 MM 月"
|
||||
value-format="yyyy-MM"
|
||||
@change="searchTimeChange('2')"
|
||||
>
|
||||
</el-date-picker>
|
||||
<div class="convenientWrap">
|
||||
<div class="convenientBtn" :class="{activeIndex:chartIndex==='1'}" @click="convenientClick('2','week')">本周</div>
|
||||
<div class="convenientBtn" :class="{activeIndex:chartIndex==='2'}" @click="convenientClick('2','month')">本月</div>
|
||||
<div class="convenientBtn" :class="{activeIndex:chartIndex==='3'}" @click="convenientClick('2','quarter')">三个月</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chartColumn" style="width:100%;" :style="{height:cardTabelHeight+'px'}"></div>
|
||||
</el-card>
|
||||
<div id="chartColumn" style="width:100%;height: 300px;"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--<el-row class="dashboardSubRow" :gutter="5">
|
||||
</div>
|
||||
<el-row class="dashboardSubRow" :gutter="5">
|
||||
<el-col :span="12">
|
||||
<el-card style="border-radius: 10px;">
|
||||
<div class="dashboardCardHand">
|
||||
|
|
@ -127,7 +141,7 @@
|
|||
<span class="verticalLine"></span><span class="dashboardCardTitle">库存列表</span>
|
||||
<span class="stockMore" @click="stockMore">更多>></span>
|
||||
</div>
|
||||
<!–<div class="dashboardCardTitle">库存列表 </div>–>
|
||||
<!--<div class="dashboardCardTitle">库存列表 </div>-->
|
||||
<div class="block">
|
||||
<el-pagination
|
||||
:current-page.sync="stockPage"
|
||||
|
|
@ -149,7 +163,7 @@
|
|||
<el-table-column label="物料编号" prop="material_">
|
||||
<template slot-scope="scope">{{ scope.row.material_.number }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="物料名称" prop="material_">
|
||||
<el-table-column label="物料名称" prop="material_" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.material_.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="规格型号" prop="material_">
|
||||
|
|
@ -175,7 +189,7 @@
|
|||
<div class="CardTitleWrap">
|
||||
<span class="verticalLine"></span><span class="dashboardCardTitle">提醒</span>
|
||||
</div>
|
||||
<!–<div class="dashboardCardTitle">提醒</div>–>
|
||||
<!--<div class="dashboardCardTitle">提醒</div>-->
|
||||
<div class="block">
|
||||
<el-pagination
|
||||
:current-page.sync="remindPage"
|
||||
|
|
@ -201,16 +215,6 @@
|
|||
<span>{{item}}</span><span>2021-12-20</span>
|
||||
</div>
|
||||
</li>
|
||||
<!–<li class="listItem">
|
||||
<div class="itemText">
|
||||
<span>玻璃低于安全库存</span><span>2021-11-30</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="listItem">
|
||||
<div class="itemText">
|
||||
<span>某某批货临近交货日期</span><span>2021-11-20</span>
|
||||
</div>
|
||||
</li>–>
|
||||
</ul>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="临近交货" name="临近交货">
|
||||
|
|
@ -244,7 +248,7 @@
|
|||
</el-tabs>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>-->
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -252,11 +256,12 @@
|
|||
import echarts from 'echarts'
|
||||
import { mapGetters } from 'vuex';
|
||||
import {getPlanGantt} from "@/api/srm";
|
||||
import { getProcessYield } from "@/api/srm";
|
||||
import { getMaterialList } from "@/api/mtm";
|
||||
import gantt from "@/components/Gantt/index";
|
||||
import { getInventoryList } from "@/api/inm";
|
||||
import { getProductionplanList} from "@/api/pm";
|
||||
import { getmaterialbatchList } from "@/api/inm";
|
||||
import gantt from "@/components/Gantt/dashGantt";
|
||||
import { getContractList , getOrderList } from "@/api/sam";
|
||||
|
||||
export default {
|
||||
|
|
@ -279,7 +284,7 @@ export default {
|
|||
tableIndex:null,
|
||||
chartIndex:null,
|
||||
tableDate:'2021-12',
|
||||
chartDate:'2021-12',
|
||||
chartDate:[],
|
||||
proList: [],
|
||||
planList:[],
|
||||
stockList:[],
|
||||
|
|
@ -299,7 +304,10 @@ export default {
|
|||
"6":'辅助工装',
|
||||
},
|
||||
activeName:'库存警告',
|
||||
chartData:{
|
||||
xAxisData:["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
|
||||
seriesData:[80,95,96, 96, 96, 98, 99,100],
|
||||
},
|
||||
contractTotalCount:null,//合同总数
|
||||
contractTotalCurrent:null,
|
||||
orderTotalCount:null,//生产订单总数
|
||||
|
|
@ -321,9 +329,6 @@ export default {
|
|||
])
|
||||
},
|
||||
methods:{
|
||||
openWord(){
|
||||
window.open("http://47.95.0.242:2222/media/2021/09/07/004-%E8%AF%B7%E5%81%87%E5%8D%95_LL8uZdx.docx");
|
||||
},
|
||||
getStatisticsData(){
|
||||
let that = this;
|
||||
let dat = new Date();
|
||||
|
|
@ -368,13 +373,31 @@ export default {
|
|||
}
|
||||
});
|
||||
//获取交付产品
|
||||
|
||||
//获取不合格产品
|
||||
|
||||
getMaterialList({page:0,tag:'low_inm'}).then((response) => {
|
||||
//获取成品率
|
||||
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) {
|
||||
that.warningList = 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();
|
||||
}
|
||||
});
|
||||
|
||||
},
|
||||
gotoTicketPage(){
|
||||
let path = this.$route.path;
|
||||
|
|
@ -409,6 +432,7 @@ export default {
|
|||
},
|
||||
//图标渲染
|
||||
drawChart() {
|
||||
let that = this;
|
||||
this.chartColumn = echarts.init(document.getElementById('chartColumn'));
|
||||
this.chartColumn.setOption({
|
||||
// title: { text: '成品率' },
|
||||
|
|
@ -444,7 +468,7 @@ export default {
|
|||
splitLine: {
|
||||
show: false, //去掉X轴分割线
|
||||
},
|
||||
data: ["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框", "成品"]
|
||||
data: that.chartData.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{
|
||||
|
|
@ -466,8 +490,8 @@ export default {
|
|||
series: [{
|
||||
name: '成品率',
|
||||
type: 'bar',
|
||||
barWidth: 40,
|
||||
data: this.seriesData,
|
||||
barWidth: 20,
|
||||
data: that.chartData.seriesData,
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
|
|
@ -479,13 +503,13 @@ export default {
|
|||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
/*color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: '#adcff3'
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#409EFF'
|
||||
}]),*/
|
||||
}]),
|
||||
|
||||
/*color: function(params) {
|
||||
let colorList = [
|
||||
|
|
@ -507,13 +531,13 @@ export default {
|
|||
}
|
||||
]);
|
||||
},*/
|
||||
color: function(params) {
|
||||
/*color: function(params) {
|
||||
let colorList = [
|
||||
'#5fcdc2','#a378e4','#fea94c','#f27197',
|
||||
'#409eff','#5fcdc2','#a378e4','#fea94c'
|
||||
];
|
||||
return colorList[params.dataIndex]
|
||||
},
|
||||
},*/
|
||||
}
|
||||
},
|
||||
}]
|
||||
|
|
@ -528,7 +552,7 @@ export default {
|
|||
}else if(index==='2'){
|
||||
this.$router.push({name:'order',params:{page:1,page_size:20}})
|
||||
}else if(index==='3'){
|
||||
this.$router.push({name:'plan',params:{page:1,page_size:20}})
|
||||
this.$router.push({name:'management',params:{page:1,page_size:20}})
|
||||
}else if(index==='4'){
|
||||
this.$router.push({name:'product',params:{page:1,page_size:20,material__type:1}})
|
||||
}else if(index==='5'){
|
||||
|
|
@ -571,18 +595,22 @@ export default {
|
|||
startTime = yea+'-'+mon+'-01';
|
||||
}
|
||||
if(index==='1'){
|
||||
this.tableDate = null;
|
||||
this.tableIndex = activeIndex;
|
||||
this.listLoadingPlan = true;
|
||||
getProductionplanList({page:0,create_time_start:startTime,create_time_end:endTime}).then((response) => {
|
||||
if (response.data) {
|
||||
that.planList = response.data;
|
||||
}
|
||||
this.listLoadingPlan = false;
|
||||
});
|
||||
}else{
|
||||
this.chartDate = null;
|
||||
this.chartIndex = activeIndex;
|
||||
getProcessYield({datetime_start:startTime,datetime_end:endTime}).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();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
//根据时间和类型获取数据
|
||||
},
|
||||
|
|
@ -593,33 +621,34 @@ export default {
|
|||
let year = null,month = null,days = null;
|
||||
if(index==='1'){
|
||||
this.tableIndex = null;
|
||||
startDate = this.tableDate+'-01';
|
||||
year = this.tableDate.split("-")[0];
|
||||
month = this.tableDate.split("-")[1];
|
||||
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;
|
||||
this.listLoadingPlan = true;
|
||||
getProductionplanList({page:0,create_time_start:startDate,create_time_end:endDate}).then((response) => {
|
||||
getProcessYield({datetime_start:startDate,datetime_end:endDate}).then((response) => {
|
||||
if (response.data) {
|
||||
that.planList = response.data;
|
||||
}
|
||||
this.listLoadingPlan = false;
|
||||
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();
|
||||
}
|
||||
});
|
||||
}else{
|
||||
this.chartIndex = null;
|
||||
startDate = this.chartDate+'-01';
|
||||
year = this.chartDate.split("-")[0];
|
||||
month = this.chartDate.split("-")[1];
|
||||
let d = new Date(year, month, 0);
|
||||
days = d.getDate();
|
||||
endDate = this.chartDate + '-'+days;
|
||||
}
|
||||
},
|
||||
//库存
|
||||
handleStockSizeChange(val){
|
||||
this.stockPageSize = val;
|
||||
this.stockPage = 1;
|
||||
},
|
||||
//库存
|
||||
handleStockCurrentChange(val){
|
||||
let that = this;
|
||||
this.listLoading = true;
|
||||
|
|
@ -632,6 +661,7 @@ export default {
|
|||
this.listLoading = false;
|
||||
});
|
||||
},
|
||||
//提示
|
||||
activeNameClick(tab, event) {
|
||||
let that = this;
|
||||
// debugger;
|
||||
|
|
@ -748,11 +778,12 @@ export default {
|
|||
let hei = document.getElementsByClassName('app-main')[0].clientHeight;
|
||||
let heig = document.getElementsByClassName('dashboardTopCard')[0].clientHeight;
|
||||
this.cardTabelHeight = ((hei-heig-130)/2);
|
||||
document.getElementById('chartColumn').style.height = this.cardTabelHeight+'px';
|
||||
this.drawChart();
|
||||
document.getElementById('chartColumn').style.height = this.cardTabelHeight-35+'px';
|
||||
// this.drawChart();
|
||||
this.getPlanList();
|
||||
this.getStockList();
|
||||
this.getGanttData();
|
||||
// this.getYield();
|
||||
this.getStatisticsData();
|
||||
},
|
||||
updated () {
|
||||
|
|
@ -768,70 +799,109 @@ export default {
|
|||
.el-card.is-always-shadow{
|
||||
height: auto!important;
|
||||
}
|
||||
.dashboard-container {
|
||||
.dashboard-container {
|
||||
margin: 5px 6px;
|
||||
}
|
||||
.dashboard-text {
|
||||
font-size: 30px;
|
||||
line-height: 46px;
|
||||
}
|
||||
.dashboardTopCard{
|
||||
}
|
||||
.dashboardTopCard,.dashboardMiddle{
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 10px;
|
||||
.cards{
|
||||
width: 18%;
|
||||
color: #ffffff;
|
||||
background: #5fcdc2;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
line-height: 30px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
||||
}
|
||||
/**/
|
||||
.cardsWrap{
|
||||
display: flex;
|
||||
width: 20%;
|
||||
color: #777777;
|
||||
float: left;
|
||||
margin: 15px 1%;
|
||||
.cardCurrentText{
|
||||
text-align: left;
|
||||
padding-left: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cardTotalText{
|
||||
font-size: 30px;
|
||||
.svgIconWrap{
|
||||
margin-right:20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
.svgIcon{
|
||||
font-size:24px;
|
||||
margin-top: 13px
|
||||
}
|
||||
}
|
||||
.cards:nth-of-type(2){
|
||||
background:#5fcdc2;;
|
||||
.cardsWrap:nth-child(1){
|
||||
.svgIconWrap{
|
||||
background:#e9f3ff;
|
||||
.svgIcon{
|
||||
color: #409EFF;
|
||||
}
|
||||
.cards:nth-child(3){
|
||||
background:#a378e4;;
|
||||
}
|
||||
.cards:nth-of-type(4){
|
||||
background:#fea94c;;
|
||||
}
|
||||
.cards:nth-of-type(5){
|
||||
background:#f27197;;
|
||||
.cardsWrap:nth-child(2){
|
||||
.svgIconWrap{
|
||||
background:#fff1de;
|
||||
.svgIcon{
|
||||
color: #ffb23f;
|
||||
}
|
||||
.cards:nth-of-type(6){
|
||||
background:#409eff;;
|
||||
}
|
||||
.cards:hover{
|
||||
box-shadow: 0 0 12px 5px rgba(0,0,0,.1);
|
||||
}
|
||||
}
|
||||
|
||||
.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%;
|
||||
padding-top: 6px;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
/*padding-top: 6px;*/
|
||||
.verticalLine{
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
background: orangered;
|
||||
height: 15px;
|
||||
background: #409EFF;
|
||||
margin-right: 7px;
|
||||
margin-top: 6px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.dashboardCardTitle{
|
||||
height: 35px;
|
||||
line-height:35px;
|
||||
font-size: 20px;
|
||||
height: 34px;
|
||||
line-height:34px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
margin-right: 7px;
|
||||
|
|
@ -843,9 +913,7 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboardSubRow{
|
||||
margin-bottom: 5px;
|
||||
/*成品率筛选条件*/
|
||||
.dashboardCardHand{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -855,12 +923,13 @@ export default {
|
|||
display: flex;
|
||||
border: 1px solid #DCDFE6;
|
||||
border-radius: 6px;
|
||||
height: 35px;
|
||||
line-height:35px;
|
||||
height: 30px;
|
||||
line-height:30px;
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
.convenientBtn{
|
||||
cursor: pointer;
|
||||
width: 60px;
|
||||
width: 50px;
|
||||
text-align:center;
|
||||
border-right: 1px solid #DCDFE6;
|
||||
}
|
||||
|
|
@ -880,8 +949,6 @@ export default {
|
|||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.lists{
|
||||
padding-right: 40px;
|
||||
.listItem{
|
||||
|
|
@ -900,4 +967,8 @@ export default {
|
|||
height: 100%!important;
|
||||
}
|
||||
}
|
||||
#dashboardMiddle .el-range-editor--medium.el-input__inner,
|
||||
#dashboardMiddle .el-range-editor.el-input__inner{
|
||||
height: 30px!important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -64,10 +64,10 @@
|
|||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog :visible.sync="limitedPhoto">
|
||||
<el-dialog :visible.sync="limitedPhoto" @close="closeCamera">
|
||||
<div style="font-size: 28px;color: #333333;text-align: center;font-weight: bold;margin-bottom: 15px;">打卡</div>
|
||||
<div class="testTracking">
|
||||
<faceLogin name="faceLogin" @func="getMsgFormSon"></faceLogin>
|
||||
<faceLogin ref="faceTracking" name="faceLogin" @func="getMsgFormSon"></faceLogin>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
|
@ -179,9 +179,61 @@
|
|||
//人脸登录
|
||||
takePhoto(){
|
||||
this.limitedPhoto = true;
|
||||
this.openTheCamera();
|
||||
},
|
||||
/*打开相机*/
|
||||
openTheCamera () {
|
||||
this.$nextTick(function () {
|
||||
let _this = this;
|
||||
this.thisVideo = document.getElementById('videoCamera');
|
||||
// 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
|
||||
if (navigator.mediaDevices === undefined) {
|
||||
navigator.mediaDevices = {}
|
||||
}
|
||||
// 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
|
||||
// 使用getUserMedia，因为它会覆盖现有的属性。
|
||||
// 这里，如果缺少getUserMedia属性，就添加它。
|
||||
if (navigator.mediaDevices.getUserMedia === undefined) {
|
||||
navigator.mediaDevices.getUserMedia = function (constraints) {
|
||||
// 首先获取现存的getUserMedia(如果存在)
|
||||
let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;
|
||||
// 有些浏览器不支持，会返回错误信息
|
||||
// 保持接口一致
|
||||
if (!getUserMedia) {
|
||||
return Promise.reject(new Error('getUserMedia is not implemented in this browser'))
|
||||
}
|
||||
// 否则，使用Promise将调用包装到旧的navigator.getUserMedia
|
||||
return new Promise(function (resolve, reject) {
|
||||
getUserMedia.call(navigator, constraints, resolve, reject)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
let constraints = { audio: false, video: { width: this.videoWidth, height: this.videoHeight, transform: 'scaleX(-1)' } };
|
||||
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
|
||||
// 旧的浏览器可能没有srcObject
|
||||
if ('srcObject' in _this.thisVideo) {
|
||||
_this.thisVideo.srcObject = stream
|
||||
} else {
|
||||
// 避免在新的浏览器中使用它，因为它正在被弃用。
|
||||
_this.thisVideo.src = window.URL.createObjectURL(stream)
|
||||
}
|
||||
_this.thisVideo.onloadedmetadata = function (e) {
|
||||
_this.thisVideo.play();
|
||||
}
|
||||
}).catch(err => {
|
||||
console.log(err)
|
||||
})
|
||||
});
|
||||
},
|
||||
/*关闭相机*/
|
||||
closeCamera () {
|
||||
debugger;
|
||||
this.$refs.faceTracking.closeCamera();
|
||||
// this.thisVideo.srcObject.getTracks()[0].stop();
|
||||
},
|
||||
getMsgFormSon(data){
|
||||
this.limitedPhoto = data;
|
||||
// this.limitedPhoto = data;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -82,8 +82,8 @@
|
|||
<div style="text-align: right">
|
||||
<el-button type="danger" @click="dialogVisible = false">取消
|
||||
</el-button>
|
||||
<!--<el-button type="primary" @click="recordformconfirm('Forms')">确认</el-button>-->
|
||||
<el-button type="primary" @click="recordformcon">管理员授权</el-button>
|
||||
<el-button type="primary" @click="recordformconfirm('Forms')">确认</el-button>
|
||||
<!--<el-button type="primary" @click="recordformcon">管理员授权</el-button>-->
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!--表格展示-->
|
||||
|
|
|
|||
|
|
@ -102,10 +102,12 @@
|
|||
<p>创建时间 ：{{watchedCreateTime}}</p>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<svg height=800 id="mySvg" style="width: 100%;">
|
||||
<div style="width: 90%;margin: auto;">
|
||||
<svg height=1000 id="mySvg" style="width:100%!important;">
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
:visible.sync="dialogVisible"
|
||||
:title="dialogType === 'edit' ? '编辑工作流' : '新增工作流'">
|
||||
|
|
@ -481,7 +483,7 @@ export default {
|
|||
margin: 10vh auto 0;
|
||||
text-align: center;
|
||||
border-radius: 2px;
|
||||
max-height: 75vh;
|
||||
max-height: 80vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.svgItem{
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@
|
|||
</el-step>
|
||||
</el-steps>
|
||||
<div style="width: 90%;margin: auto;">
|
||||
<svg height=800 id="mySvg" style="width:100%!important;">
|
||||
<svg height=1000 id="mySvg" style="width:100%!important;">
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue