| | |
| | | <template> |
| | | <div> |
| | | <div class="kb_dashboard"> |
| | | <!-- 星空背景--> |
| | | <div ref="starsRef" class="stars"> |
| | | <div v-for="(item, index) in starsCount" :key="index" class="star" /> |
| | | </div> |
| | | |
| | | <div class="kb_header"> |
| | | <div class="flex_c_c kb_header_text"> |
| | | <div id="topBarLeft" style="width:600px;height:100%" /> |
| | |
| | | |
| | | <el-table-column |
| | | prop="status" |
| | | width="70" |
| | | width="80" |
| | | label="状态" |
| | | > |
| | | <template slot-scope="{row}"> |
| | |
| | | <el-table-column |
| | | prop="partname" |
| | | label="产品名称" |
| | | width="100" |
| | | width="350" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div> |
| | |
| | | <el-table-column |
| | | prop="plan_qty" |
| | | label="任务数量" |
| | | width="100" |
| | | width="105" |
| | | /> |
| | | <el-table-column |
| | | prop="good_qty" |
| | | label="完工数量" |
| | | width="100" |
| | | width="105" |
| | | /> |
| | | <el-table-column |
| | | prop="ng_qty" |
| | | label="不良数量" |
| | | width="100" |
| | | width="105" |
| | | /> |
| | | <el-table-column |
| | | label="完成率" |
| | | width="100" |
| | | width="105" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div>{{ parseFloat((row.good_qty * 100 / row.plan_qty).toFixed(2)) }}%</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | <!-- <el-table-column--> |
| | | |
| | | label="预计开始" |
| | | width="140" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div>{{ row.planstartdate.substring(0, 10) }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="" |
| | | label="预计结束" |
| | | width="140" |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div>{{ row.planenddate.substring(0, 10) }}</div> |
| | | </template> |
| | | </el-table-column> |
| | | <!-- label="预计开始"--> |
| | | <!-- width="140"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div>{{ row.planstartdate.substring(0, 10) }}</div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- <el-table-column--> |
| | | <!-- prop=""--> |
| | | <!-- label="预计结束"--> |
| | | <!-- width="140"--> |
| | | <!-- >--> |
| | | <!-- <template slot-scope="{row}">--> |
| | | <!-- <div>{{ row.planenddate.substring(0, 10) }}</div>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | </el-table> |
| | | </div> |
| | | |
| | |
| | | /> |
| | | <el-table-column |
| | | prop="linename" |
| | | width="165" |
| | | width="125" |
| | | label="产线" |
| | | /> |
| | | <el-table-column |
| | | prop="partname" |
| | | width="120" |
| | | width="160" |
| | | label="产品" |
| | | /> |
| | | > |
| | | <template slot-scope="{row}"> |
| | | <div v-if="row.partname" class="ellipsis">{{ row.partname }}</div> |
| | | <div v-else>/</div> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="good_qty" |
| | | label="数量" |
| | |
| | | tableDataLeftBottom: [], |
| | | tableDataLeftBottomTemp: [], |
| | | lineContent3: [], |
| | | ShopArr: [] // 车间编码数组 |
| | | ShopArr: [], // 车间编码数组 |
| | | |
| | | starsCount: 800, // 星星数量 |
| | | distance: 900 // 间距 |
| | | |
| | | } |
| | | }, |
| | |
| | | this.getTopBar() |
| | | |
| | | this.getShopSearch() |
| | | this.setStarsRef() |
| | | }, |
| | | methods: { |
| | | setStarsRef() { |
| | | const starNodes = Array.from(this.$refs.starsRef.children) |
| | | starNodes.forEach(item => { |
| | | const speed = 0.2 + Math.random() * 1 |
| | | const thisDistance = this.distance + Math.random() * 300 |
| | | item.style.transformOrigin = `0 0 ${thisDistance}px` |
| | | item.style.transform = ` |
| | | translate3d(0,0,-${thisDistance}px) |
| | | rotateY(${Math.random() * 360}deg) |
| | | rotateX(${Math.random() * -50}deg) |
| | | scale(${speed},${speed})` |
| | | }) |
| | | }, |
| | | // 获取车间编码 |
| | | async getShopSearch() { |
| | | const res1 = await ShopSearch() |
| | |
| | | res1.data.forEach(item => { |
| | | this.ShopArr.push(item.org_code) |
| | | }) |
| | | this.getShopSearchLine() |
| | | this.getRightRightData() |
| | | this.getLeftBottomData() |
| | | this.getEcharts() |
| | | |
| | | if (this.ShopArr.length > 0) { |
| | | this.getShopSearchLine() |
| | | this.getRightRightData() |
| | | this.getLeftBottomData() |
| | | this.getEcharts() |
| | | } |
| | | } |
| | | setInterval(() => { |
| | | this.ShopSearchTask = ShopSearch().then(res1 => { |
| | | if (res1.code === '200') { |
| | | this.ShopArr = [] |
| | | res1.data.forEach(item => { |
| | | this.ShopArr.push(item.org_code) |
| | | }) |
| | | } |
| | | }) |
| | | }, 1000 * 60) |
| | | if (this.ShopArr.length > 0) { |
| | | setInterval(() => { |
| | | this.ShopSearchTask = ShopSearch().then(res1 => { |
| | | if (res1.code === '200') { |
| | | this.ShopArr = [] |
| | | res1.data.forEach(item => { |
| | | this.ShopArr.push(item.org_code) |
| | | }) |
| | | } |
| | | }) |
| | | }, 1000 * 60) |
| | | } |
| | | }, |
| | | // 产线加工中任务 |
| | | getShopSearchLine() { |
| | |
| | | |
| | | LineSearchBottomLeftData({ shopcode: this.ShopArr.join(',') }).then(res => { |
| | | this.tableDataLeftBottomTemp = res.data |
| | | |
| | | this.tableDataLeftBottom = this.tableDataLeftBottomTemp.slice(startValue, startValue + scale) |
| | | |
| | | const loop = Math.floor(this.tableDataLeftBottomTemp.length / scale)// 需要循环的次数 |
| | |
| | | } |
| | | |
| | | </style> |
| | | |
| | | <!--星空--> |
| | | <style lang="css" scoped> |
| | | @keyframes rotate { |
| | | 0% { |
| | | transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0); |
| | | } |
| | | 100% { |
| | | transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg); |
| | | } |
| | | } |
| | | |
| | | .stars { |
| | | transform: perspective(500px); |
| | | transform-style: preserve-3d; |
| | | position: absolute; |
| | | perspective-origin: 50% 100%; |
| | | left: 45%; |
| | | animation: rotate 90s infinite linear; |
| | | bottom: 0; |
| | | z-index: 102; |
| | | } |
| | | |
| | | .star { |
| | | width: 2px; |
| | | height: 2px; |
| | | /*background: #f7f7b6;*/ |
| | | background: #8edffc; |
| | | position: absolute; |
| | | left: 0; |
| | | top: 0; |
| | | backface-visibility: hidden; |
| | | z-index: 102; |
| | | } |
| | | </style> |