388 lines
12 KiB
Vue
388 lines
12 KiB
Vue
<template>
|
||
<div class="widgets-home" ref="main">
|
||
<div class="widgets-content">
|
||
<div class="retangleWrap retangleWrapTop">
|
||
<div class="retangle retangleImg">
|
||
<div class="companyName">中建材光子科技有限公司</div>
|
||
<div class="companyDesc">公司秉承“善用资源，服务建设”的核心理念，践行“材料创造美</div>
|
||
<div class="companyDesc">好世界”的企业使命，坚持“创新、绩效、和谐、责任”的核心价</div>
|
||
<div class="companyDesc">值观，努力成长为具有创新精神和全球视野的光子材料领先企业。</div>
|
||
<img class="topCardImg" src="img/topCard.png">
|
||
</div>
|
||
</div>
|
||
<div class="retangleWrap">
|
||
<div class="retangle countRetangle">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">本周核心指标</div>
|
||
<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">时间</div>
|
||
</div>
|
||
<div style="padding-top: 20px;display: flex;">
|
||
<div class="countItem">
|
||
<div class="countname">预制棒总产量</div>
|
||
<p class="countnum">6700</p>
|
||
<p class="countrate">同比上周<span class="redColor"> 8.63%▲</span></p>
|
||
</div>
|
||
<div class="countItem">
|
||
<div class="countname">管料产量</div>
|
||
<p class="countnum">6700</p>
|
||
<p class="countrate">同比上周<span class="redColor"> 8.63%▲</span></p>
|
||
</div>
|
||
<div class="countItem">
|
||
<div class="countname">芯料产量</div>
|
||
<p class="countnum">6700</p>
|
||
<p class="countrate">同比上周<span class="greenColor"> 8.63%▼</span></p>
|
||
</div>
|
||
<div class="countItem">
|
||
<div class="countname">在制任务</div>
|
||
<p class="countnum">6700</p>
|
||
<p class="countrate"></p>
|
||
</div>
|
||
<div class="countItem">
|
||
<div class="countname">交付产品</div>
|
||
<p class="countnum">6700</p>
|
||
<p class="countrate"></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="retangleWrap retangleWrapmiddle">
|
||
<div class="retangle middleRetangle">
|
||
<div style="padding: 20px 0;display: flex;">
|
||
<div class="middleItem">
|
||
<div class="countname">在制任务</div>
|
||
<p class="countnum">189762670</p>
|
||
</div>
|
||
<div class="middleItem" style="display: flex;">
|
||
<el-progress type="circle" :stroke-width="15" :show-text="false" :percentage="25" />
|
||
<div style="margin-left: 20px;">
|
||
<div class="countname">预制棒总产量</div>
|
||
<p class="countnum">80%</p>
|
||
</div>
|
||
</div>
|
||
<div class="middleItem" style="display: flex;">
|
||
<el-progress type="circle" :stroke-width="15" :show-text="false" :percentage="25" />
|
||
<div style="margin-left: 20px;">
|
||
<div class="countname">管料产量</div>
|
||
<p class="countnum">80%</p>
|
||
<p class="countrate">同比上周 8.63%</p>
|
||
</div>
|
||
</div>
|
||
<div class="middleItem" style="display: flex;">
|
||
<el-progress type="circle" :stroke-width="15" :show-text="false" :percentage="25" />
|
||
<div style="margin-left: 20px;">
|
||
<div class="countname">芯料产量</div>
|
||
<p class="countnum">70%</p>
|
||
<p class="countrate">同比上周 8.63%</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-row>
|
||
<el-col :span="7">
|
||
<div class="retangleWrap">
|
||
<div class="retangle bottomRetangle">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">月度趋势</div>
|
||
<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 0 24px;background: #ffffff;">
|
||
<div class="bottomItem">
|
||
<div class="countname">本月完成情况</div>
|
||
<p class="countnum">45.82%</p>
|
||
<p class="countrate">同比上周<span class="redColor"> 8.63%▲</span> 月同比6.47%</p>
|
||
<div id="barCharts" style="width: 100%;height: 200px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<div class="retangleWrap">
|
||
<div class="retangle bottomRetangle">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">月度趋势</div>
|
||
<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 24px 24px;">
|
||
<div style="display: flex;">
|
||
<el-icon style="color: #409EFF;font-size: 35px;"><WarningFilled/></el-icon>
|
||
<div>
|
||
<p>设备检验</p>
|
||
<p>提醒日期</p>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex;margin-top: 20px;">
|
||
<el-icon style="color: #409EFF;font-size: 35px;"><WarningFilled/></el-icon>
|
||
<div>
|
||
<p>设备检验</p>
|
||
<p>提醒日期</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="retangle bottomRetangle" style="background: rgb(20,141,255);color:#ffffff;margin-top: 20px;">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="font-size: 16px;font-weight: 400;line-height: 24px;">预警提示</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 24px 24px;">
|
||
<div>
|
||
<p>延期任务数量上月同比增加 <span style="font-size: 24px;">10.23%</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<div class="retangleWrap retangleWrapTable">
|
||
<div class="retangle tableRetangle">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 24px 24px;">
|
||
<el-table :data="tableData" style="width: 100%;height: 285px;">
|
||
<el-table-column prop="index" label="序号"/>
|
||
<el-table-column prop="number" label="设备编号"/>
|
||
<el-table-column prop="name" label="设备名称"/>
|
||
<el-table-column prop="state" label="设备状态"/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="14">
|
||
<div class="retangleWrap retangleWrapTable">
|
||
<div class="retangle tableRetangle">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 24px 24px;">
|
||
<el-table :data="tableData" style="width: 100%;height: 285px;">
|
||
<el-table-column prop="index" label="序号"/>
|
||
<el-table-column prop="number" label="设备编号"/>
|
||
<el-table-column prop="name" label="设备名称"/>
|
||
<el-table-column prop="state" label="设备状态"/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="10">
|
||
<div class="retangleWrap retangleWrapTable">
|
||
<div class="retangle tableRetangle">
|
||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||
<div style="color: rgb(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备</div>
|
||
</div>
|
||
<div style="padding: 20px 24px 24px 24px;">
|
||
<el-table :data="tableData" style="width: 100%;height: 285px;">
|
||
<el-table-column prop="index" label="序号"/>
|
||
<el-table-column prop="number" label="设备编号"/>
|
||
<el-table-column prop="name" label="设备名称"/>
|
||
<el-table-column prop="state" label="设备状态"/>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import * as echarts from 'echarts';
|
||
export default {
|
||
data() {
|
||
return {
|
||
time: '',
|
||
day: '',
|
||
year_s:'',
|
||
month_s:'',
|
||
yearData:[],
|
||
monthData:[],
|
||
warningNum:0,
|
||
warningNum2:0,
|
||
tableData : [
|
||
{index:1,number: 'GZKJ-01',name: '1号单坩埚熔化炉',state: '完好'},
|
||
{index:2,number: 'GZKJ-02',name: '2号单坩埚熔化炉',state: '完好'},
|
||
{index:3,number: 'GZKJ-03',name: '3号单坩埚熔化炉',state: '禁用'},
|
||
{index:4,number: 'GZKJ-04',name: '4号单坩埚熔化炉',state: '检修'},
|
||
]
|
||
}
|
||
},
|
||
mounted() {
|
||
this.$emit('on-mounted');
|
||
let that = this;
|
||
var myDate = new Date();
|
||
let year = myDate.getFullYear();
|
||
let month = myDate.getMonth()+1;
|
||
that.year_s = year;
|
||
that.month_s = month;
|
||
that.initChart();
|
||
},
|
||
methods: {
|
||
// 动态绑定Class
|
||
bindClass(type){
|
||
let classInfo = { socketDom: true, redColor: false,
|
||
orangeColor:false, yellowColor:false, blueColor:true }
|
||
if(type==''){
|
||
classInfo.redColor = true
|
||
}
|
||
return classInfo
|
||
},
|
||
getMessage(msg) {
|
||
console.log(msg);
|
||
},
|
||
close() {
|
||
if (this.ws) {
|
||
this.ws.close();
|
||
this.ws = null;
|
||
console.log("socket已经关闭");
|
||
}
|
||
},
|
||
showTime(){
|
||
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||
},
|
||
interEvent(){
|
||
this.$router.replace({path:'/events'})
|
||
},
|
||
interEquipment(){
|
||
this.$router.replace({path:'/em/equipmentc'})
|
||
},
|
||
initChart(){
|
||
//柱状图
|
||
var dom = document.getElementById("barCharts");
|
||
var myChart = echarts.init(dom);
|
||
let option = {
|
||
grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
|
||
top: '10%',
|
||
left: '3%',
|
||
right: '5%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisLabel: {
|
||
show: false, // X 轴标签文字旋转角度
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
show: false, // X 轴标签文字旋转角度
|
||
},
|
||
},
|
||
series: [{
|
||
data: [10,9,8,11,12,10,9,10],
|
||
type: 'bar'
|
||
}]
|
||
};
|
||
myChart.setOption(option, true);
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.retangleWrap{
|
||
width: 100%;
|
||
padding: 20px 20px 0 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
.retangle{
|
||
width: 100%;
|
||
border-radius: 15px;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
background: #ffffff;
|
||
}
|
||
.retangleImg{
|
||
height:188px;
|
||
color: #ffffff;
|
||
padding-left: 43px;
|
||
background: linear-gradient(180.00deg, rgb(58, 149, 255),rgb(27, 92, 255) 100%);
|
||
}
|
||
.companyName{
|
||
padding-top: 28px;
|
||
font-size: 24px;
|
||
line-height: 28px;
|
||
padding-bottom: 23px;
|
||
}
|
||
.companyDesc{
|
||
padding-left: 4px;
|
||
font-size: 14px;
|
||
line-height: 20px;
|
||
}
|
||
.topCardImg{
|
||
height: 188px;
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 0;
|
||
}
|
||
.countRetangle{
|
||
height: 180px;
|
||
padding-top: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
.countItem{
|
||
width: 20%;
|
||
padding-left: 24px;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
border-right: 1px solid #eeeeee;
|
||
}
|
||
.countItem:last-child{
|
||
border-right: 0;
|
||
}
|
||
.countname{
|
||
font-size: 14px;
|
||
line-height: 22px;
|
||
color: rgba(94,94,94);
|
||
}
|
||
.countnum{
|
||
font-size: 30px;
|
||
padding-bottom: 11px;
|
||
line-height: 38px;
|
||
}
|
||
.countrate{
|
||
line-height: 20px;
|
||
color: rgba(0,0,0,.45);
|
||
}
|
||
.redColor{
|
||
color: rgb(255, 73, 87);
|
||
}
|
||
.greenColor{
|
||
color: rgb(71, 201, 58);
|
||
}
|
||
.middleRetangle{
|
||
border-radius: 2px;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
}
|
||
.middleItem{
|
||
width: 25%;
|
||
padding-left: 34px;
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
}
|
||
.middleItem:first-child{
|
||
border-right: 1px solid #eeeeee;
|
||
}
|
||
.tableRetangle{
|
||
height: auto;
|
||
padding-top: 20px;
|
||
}
|
||
.bottomRetangle{
|
||
padding: 20px 0;
|
||
box-sizing: border-box;
|
||
background: #ffffff;
|
||
}
|
||
.bottomItem{
|
||
|
||
}
|
||
</style>
|