xiaoning
/
gjerp_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.增加首页看板

Browse Source 
2.增加实际产能计算
master
董哲奇 1 year ago
parent 4a0e79d5c8
commit c9ce3d6fb1
3 changed files with 291 additions and 33 deletions
Show Stats Download Patch File Download Diff File

71
src/views/dashboard/components/Content.vue
Unescape View File

@ -0,0 +1,71 @@
<template>
<div style="width: 100%">
<div class="box" v-for="(item,index) in data[deptName]">
<input v-if="activeCheckbox" type="checkbox" style="width: 25px;height: 25px;position: relative;top:-10px;left: 115px"/>
<div style="line-height:30px;border-radius: 15px;border: 3px solid gray;margin:3% 7%;background-color: white">
{{item.name}}
</div>
<div style="text-align: center;margin-top: 12px">
<img :src="item.headImage" :style="{width: myStyle.headImgWidth||'100%'}">
</div>
<div style="line-height:30px;border-radius: 5px;border: 3px solid gray;margin:2% 5%;background-color: white;color: gray">产能:30米/小时</div>
<hr style="margin: 1%"/>
<div style="line-height:25px;border-radius: 5px;border: 3px solid gray;margin:1% 5%;background-color: white;color: blue">今日计划:240米</div>
<div style="line-height:25px;border-radius: 5px;border: 3px solid gray;margin:1% 5%;background-color: white;color: green">今日产量:170.4米</div>
<el-progress type="line" :text-inside="true" :stroke-width="25" :style="{width:'90%',margin:'3% 5%'}"
:percentage="Math.round(170.4/240*100,2)"
:color="'green'" text-color="white"/>
</div>
</div>
</template>
<script>
import XEUtils from 'xe-utils'
export default {
name:"Content",
props:{
data:Object,
deptName:String,
type:String,
myStyle:Object,
users:Number
},
data(){
return {
activeName:'1',
activeCheckbox:false,
}
},
methods:{
itemClick(item){
this.$emit('initDetail',item);
},
test(){
return XEUtils.random(1,60)
}
}
}
</script>
<style scoped>
.box{
width:20%;
height: 430px;
text-align: center;
border: 3px solid yellow;
border-radius: 25px;
float: left;
margin: 25px;
}
.deptName{
color: white;
border:1px solid blue;
border-radius:15px;
background-color: blue;
width: 80%;
height: 30px;
line-height: 30px;
font-size: 16px;
box-shadow: 2px 2px 2px 1px black;
}
</style>

4
src/views/dashboard/components/Template.vue
Unescape View File

@ -3,7 +3,9 @@
<el-collapse-item :name="deptName">
<template slot="title">
<div style="width: 100%;height:100%;margin-left: 5%;text-align: center;line-height: 50px">
<button class="deptName">{{deptName}}({{type==='ks'?'总人数:':'出勤:'}}{{users}})</button>
<button class="deptName">{{deptName}}
<span v-if="type==='ks'||type==='cq'">({{type==='ks'?'总人数:':'出勤:'}}{{users}})</span>
</button>
</div>
</template>
<div class="box" v-for="(item,index) in data[deptName]" @click="itemClick(item)">

237
src/views/dashboard/index.vue
Unescape View File

@ -1,37 +1,135 @@
<template>
<el-container style="width: 100%;height:90.9vh;background-color: gray">
<!-- 总览-->
<el-container style="width: 100%;height:90.9vh;background-color: rgba(138,43,226,0.68)">
<el-row style="width: 100%">
<el-col :span="3">
<div style="padding: 15px;margin-top: 80px">
<div class="group-btn">
资 料
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
上 料
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
1 跨
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
2 跨
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
3 跨
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
4 跨
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
5 跨
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
6 跨
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
<div class="group-btn">
7 跨
<!--向右的三角-->
<div class="arrow-right"></div>
</div>
</div>
</el-col>
<el-col :span="21">
<el-header style="width: 100%; height: 35px;font-size: 12px;">
<el-form :inline="true" style="margin-top: 25px">
<el-row>
<el-col :span="4">
<el-form-item>
<el-input v-model="queryParam.dcCh" placeholder="船号"/>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item>
<el-date-picker v-model="queryParam.beginTime" value-format="yyyy/MM" format="yyyy/MM/dd" type="date" placeholder="日期"/>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item>
<el-date-picker v-model="queryParam.endTime" value-format="yyyy/MM/dd" format="yyyy/MM/dd" type="date" placeholder="结束时间"/>
</el-form-item>
</el-col>-->
<!-- <el-col :span="12" style="text-align: left">
<el-button type="success">对比</el-button>
<el-button type="success">全选</el-button>
<el-button type="success">确定</el-button>
</el-col>-->
</el-row>
</el-form>
</el-header>
<div class="rg-table-box" style="width:100%;height:88vh;overflow-y: auto;">
<div v-for="(item,index) in ks">
<Content :data="data" :deptName="item" :type="'mp'" :myStyle="{headImgWidth:'70%'}" :users="cqUsers[item]||0"/>
</div>
</div>
</el-col>
</el-row>
<!-- <div style="width: 100%">
<div style="width: 100%;height: 60vh;background-color: yellow"></div>
<div style="width: 100%;height: 30.9vh;background-color: blue"></div>
</div>-->
</el-container>
<!-- <div class="dashboard-editor-container" style="background-color: blueviolet;">-->
<!-- <div class=" clearfix">-->
<!-- <pan-thumb :image="avatar" style="float: left">-->
<!-- &lt;!&ndash; Your roles:-->
<!-- <span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>&ndash;&gt;-->
<!-- </pan-thumb>-->
<!-- <div class="info-container">-->
<!-- <span class="display_name">{{ name }}</span>-->
<!-- &lt;!&ndash;<span style="font-size:20px;padding-top:20px;display:inline-block;">大连船舶重工集团舾装有限公司</span>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <img :src="emptyGif" class="emptyGif">-->
<!-- </div>-->
<!-- <div class="dashboard-editor-container" style="background-color: blueviolet;">
<div class=" clearfix" style="width: 100%;height: 60vh;background-color: yellow">
<pan-thumb :image="avatar" style="float: left">
&lt;!&ndash; Your roles:
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>&ndash;&gt;
</pan-thumb>
<div class="info-container">
<span class="display_name">{{ name }}</span>
&lt;!&ndash;<span style="font-size:20px;padding-top:20px;display:inline-block;">大连船舶重工集团舾装有限公司</span>&ndash;&gt;
</div>
</div>
<div>
<img :src="emptyGif" class="emptyGif">
</div>
</div>-->
</template>
<script>
import { mapGetters } from 'vuex'
import {mapGetters} from 'vuex'
import PanThumb from '@/components/PanThumb'
import { dictALL} from '@/api/user'
import XEUtils from 'xe-utils'
import {dictALL} from '@/api/user'
import Template from "@/views/dashboard/components/Template.vue";
import Content from "@/views/dashboard/components/Content.vue";
export default {
name: 'Dashboard',
components: { PanThumb },
components: {Content, Template, PanThumb },
data() {
return {
ks: ['资料', '上料', '1跨', '2跨', '3跨', '4跨', '5跨', '6跨', '7跨'],
data: {},
cqData:{},
cqUsers: {},
totalUsers:{},
queryParam:{
dcCh:'',
beginTime:'',
endTime:'',
}
}
},
computed: {
@ -44,9 +142,47 @@ export default {
},
created(){
// this.initDict();
this.initData()
},
methods:{
initData(){
let i =0
for (const item of this.ks) {
if (!this.data[item]){
this.data[item]=[]
}
if (!this.cqData[item]){
this.cqData[item]=[]
}
if (!this.cqUsers[item]){
this.cqUsers[item]=0
}
let totalUser=XEUtils.random(1,10)
this.totalUsers[item]=totalUser
if ('准备室'===item){
totalUser=1
this.totalUsers[item]=totalUser
}
for (let j = 0; j < totalUser; j++) {
++i
const cq=XEUtils.random(0, 1);
const data={
ks:item,
yhdm:'设备'+j,
name:'设备'+j,
headImage:'static/img/btn_em.35e6aa07.jpg',
gzl:XEUtils.random(0, 100),
cq:cq
}
if (cq){
this.cqUsers[item]+=1
this.cqData[item].push(data)
}else {
this.data[item].push(data)
}
}
}
},
//挂载字典数据
initDict(){
dictALL().then(res=>{
@ -63,13 +199,35 @@ export default {
</script>
<style lang="scss" scoped>
.emptyGif {
.arrow-right {
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left:16px solid yellowgreen;
position: relative;
top: -3.45vh;
left: 7.555vw;
}
.group-btn {
width: 80%;
height:32px;
color: white;
line-height:32px;
font-size:16px;
margin-top:15px;
text-align:center;
background-color: yellowgreen
}
.emptyGif {
display: block;
width: 45%;
margin: 0 auto;
}
}
.dashboard-editor-container {
.dashboard-editor-container {
background-color: #e3e3e3;
min-height: 100vh;
padding: 50px 60px 0px;
@ -93,4 +251,31 @@ export default {
}
}
}
.rg-table-box::-webkit-scrollbar {
/*整体样式*/
width: 0;
}
.rg-table-box::-webkit-scrollbar-track {
/*轨道*/
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #ededed;
border-radius: 10px;
}
.rg-table-box::-webkit-scrollbar-thumb {
/*滚动条小方块*/
border-radius: 10px;
background-color: #2e75d3;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
</style>

Write Preview
Loading…
Cancel
Save