feat: 大屏样式的修改
This commit is contained in:
parent
98d2b3d20f
commit
831d75bb4d
File diff suppressed because it is too large
Load Diff
|
|
@ -12,7 +12,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="retangleWrap">
|
<div class="retangleWrap">
|
||||||
<div class="retangle countRetangle">
|
<div class="retangle countRetangle">
|
||||||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
<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(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 style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">时间</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -91,9 +91,11 @@
|
||||||
<el-col :span="14">
|
<el-col :span="14">
|
||||||
<div class="retangleWrap" style="padding-right: 0;">
|
<div class="retangleWrap" style="padding-right: 0;">
|
||||||
<div class="retangle bottomRetangle">
|
<div class="retangle bottomRetangle">
|
||||||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
<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(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">
|
||||||
<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...</div>
|
本月生产合格趋势</div>
|
||||||
|
<div style="color: rgb(122, 121, 121);size: 12px;font-weight: 290;line-height: 22px;">...
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 20px 24px 0 24px;background: #ffffff;">
|
<div style="padding: 20px 24px 0 24px;background: #ffffff;">
|
||||||
<div class="bottomItem">
|
<div class="bottomItem">
|
||||||
|
|
@ -109,17 +111,18 @@
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<div class="retangleWrap retangleWrapTable">
|
<div class="retangleWrap retangleWrapTable">
|
||||||
<div class="retangle tableRetangle">
|
<div class="retangle tableRetangle">
|
||||||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
<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(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">库存情况
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 20px 24px 24px 24px;">
|
<div style="padding: 20px 24px 24px 24px;">
|
||||||
<el-table :data="tableData" style="width: 100%;height: 285px;">
|
<el-table :data="tableData" style="width: 100%;height: 285px;">
|
||||||
<el-table-column prop="index" label="序号" width="40"/>
|
<el-table-column prop="index" label="序号" width="60" />
|
||||||
<el-table-column prop="number" label="名称"/>
|
<el-table-column prop="name" label="名称" />
|
||||||
<el-table-column prop="name" label="规格"/>
|
<el-table-column prop="specification" label="规格" />
|
||||||
<el-table-column prop="state" label="型号"/>
|
<el-table-column prop="specification" label="型号" />
|
||||||
<el-table-column prop="state" label="单位"/>
|
<el-table-column prop="unit" label="单位" />
|
||||||
<el-table-column prop="state" label="库存"/>
|
<el-table-column prop="count" label="库存" />
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -152,7 +155,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div> -->
|
||||||
<div class="retangle bottomRetangle" style="background: rgb(20,141,255);color:#ffffff;">
|
<div class="retangle bottomRetangle" style="background: rgb(20,141,255);color:#ffffff;">
|
||||||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
||||||
<div style="font-size: 16px;font-weight: 400;line-height: 24px;">预警提示</div>
|
<div style="font-size: 16px;font-weight: 400;line-height: 24px;">预警提示</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 20px 24px 24px 24px;height: 311px;">
|
<div style="padding: 20px 24px 24px 24px;height: 311px;">
|
||||||
|
|
@ -166,15 +169,20 @@
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<div class="retangleWrap retangleWrapTable" style="padding-right: 0;">
|
<div class="retangleWrap retangleWrapTable" style="padding-right: 0;">
|
||||||
<div class="retangle tableRetangle">
|
<div class="retangle tableRetangle">
|
||||||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
<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(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">生产设备
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding: 20px 24px 24px 24px;">
|
<div style="padding: 20px 24px 24px 24px;">
|
||||||
<el-table :data="tableData" style="width: 100%;height: 285px;">
|
<el-table :data="equipList" style="width: 100%;height: 285px;">
|
||||||
<el-table-column prop="index" label="序号"/>
|
<el-table-column prop="number" label="设备编号" />
|
||||||
<el-table-column prop="number" label="设备编号"/>
|
<el-table-column prop="name" label="设备名称" />
|
||||||
<el-table-column prop="name" label="设备名称"/>
|
<el-table-column prop="belong_dept_name" label="所在车间" />
|
||||||
<el-table-column prop="state" label="设备状态"/>
|
<el-table-column prop="state" label="设备状态">
|
||||||
|
<template #default="scope">
|
||||||
|
{{ eqState_[scope.row.state] }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -183,8 +191,9 @@
|
||||||
<el-col :span="7">
|
<el-col :span="7">
|
||||||
<div class="retangleWrap retangleWrapTable">
|
<div class="retangleWrap retangleWrapTable">
|
||||||
<div class="retangle tableRetangle">
|
<div class="retangle tableRetangle">
|
||||||
<div style="display: flex;justify-content: space-between;padding: 0 24px;">
|
<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(30, 30, 30);font-size: 16px;font-weight: 400;line-height: 24px;">日历
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="">
|
<div style="">
|
||||||
<el-calendar v-model="calendarValue" />
|
<el-calendar v-model="calendarValue" />
|
||||||
|
|
@ -204,200 +213,233 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
time: '',
|
time: '',
|
||||||
day: '',
|
day: '',
|
||||||
year_s:'',
|
year_s: '',
|
||||||
month_s:'',
|
month_s: '',
|
||||||
yearData:[],
|
yearData: [],
|
||||||
monthData:[],
|
monthData: [],
|
||||||
warningNum:0,
|
warningNum: 0,
|
||||||
warningNum2:0,
|
warningNum2: 0,
|
||||||
tableData : [
|
tableData: [
|
||||||
{index:1,number: 'GZKJ-01',name: '1号单坩埚熔化炉',state: '完好'},
|
{ index: 1, name: 'GZKJ-01', specification: '500*30', unit: '个', count: 100 },
|
||||||
{index:2,number: 'GZKJ-02',name: '2号单坩埚熔化炉',state: '完好'},
|
{ index: 2, name: 'GZKJ-02', specification: '500*30', unit: '个', count: 100 },
|
||||||
{index:3,number: 'GZKJ-03',name: '3号单坩埚熔化炉',state: '禁用'},
|
{ index: 3, name: 'GZKJ-03', specification: '500*30', unit: '个', count: 100 },
|
||||||
{index:4,number: 'GZKJ-04',name: '4号单坩埚熔化炉',state: '检修'},
|
{ index: 4, name: 'GZKJ-04', specification: '500*30', unit: '个', count: 100 },
|
||||||
],
|
],
|
||||||
calendarValue:''
|
equipList: [],
|
||||||
|
calendarValue: '',
|
||||||
|
eqState_: {
|
||||||
|
10: '完好',
|
||||||
|
20: '限用',
|
||||||
|
30: '在修',
|
||||||
|
40: '禁用',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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();
|
||||||
|
this.calendarValue = new Date();
|
||||||
|
this.getEquipList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getEquipList() {
|
||||||
|
this.$API.em.equipment.list.req({ page: 0, type: 10 }).then(res => {
|
||||||
|
this.equipList = res
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 动态绑定Class
|
||||||
|
bindClass(type) {
|
||||||
|
let classInfo = {
|
||||||
|
socketDom: true, redColor: false,
|
||||||
|
orangeColor: false, yellowColor: false, blueColor: true
|
||||||
}
|
}
|
||||||
|
if (type == '') {
|
||||||
|
classInfo.redColor = true
|
||||||
|
}
|
||||||
|
return classInfo
|
||||||
},
|
},
|
||||||
mounted() {
|
getMessage(msg) {
|
||||||
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();
|
|
||||||
this.calendarValue = new Date();
|
|
||||||
},
|
|
||||||
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);
|
console.log(msg);
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
if (this.ws) {
|
if (this.ws) {
|
||||||
this.ws.close();
|
this.ws.close();
|
||||||
this.ws = null;
|
this.ws = null;
|
||||||
console.log("socket已经关闭");
|
console.log("socket已经关闭");
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
showTime(){
|
showTime() {
|
||||||
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
this.time = this.$TOOL.dateFormat(new Date(), 'hh:mm:ss')
|
||||||
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
this.day = this.$TOOL.dateFormat(new Date(), 'yyyy年MM月dd日')
|
||||||
},
|
},
|
||||||
interEvent(){
|
interEvent() {
|
||||||
this.$router.replace({path:'/events'})
|
this.$router.replace({ path: '/events' })
|
||||||
},
|
},
|
||||||
interEquipment(){
|
interEquipment() {
|
||||||
this.$router.replace({path:'/em/equipmentc'})
|
this.$router.replace({ path: '/em/equipmentc' })
|
||||||
},
|
},
|
||||||
initChart(){
|
initChart() {
|
||||||
//柱状图
|
//柱状图
|
||||||
var dom = document.getElementById("barCharts");
|
var dom = document.getElementById("barCharts");
|
||||||
var myChart = echarts.init(dom);
|
var myChart = echarts.init(dom);
|
||||||
let option = {
|
let option = {
|
||||||
grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
|
grid: { // 图表距离边框的距离，可用百分比和数字（px）配置
|
||||||
top: '5%',
|
top: '5%',
|
||||||
left: '1%',
|
left: '1%',
|
||||||
right: '1%',
|
right: '1%',
|
||||||
bottom: '5%',
|
bottom: '5%',
|
||||||
containLabel: true
|
containLabel: true
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
// show: false, // X 轴标签文字旋转角度
|
// show: false, // X 轴标签文字旋转角度
|
||||||
},
|
|
||||||
data:['1号','2号','3号','4号','5号','6号','7号','8号','9号','10号']
|
|
||||||
},
|
},
|
||||||
yAxis: {
|
data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号']
|
||||||
type: 'value',
|
},
|
||||||
axisLabel: {
|
yAxis: {
|
||||||
show: false, // X 轴标签文字旋转角度
|
type: 'value',
|
||||||
},
|
axisLabel: {
|
||||||
|
show: false, // X 轴标签文字旋转角度
|
||||||
},
|
},
|
||||||
series: [{
|
},
|
||||||
data: [10,9,8,11,12,10,9,10,8,9,10],
|
series: [{
|
||||||
type: 'bar',
|
data: [10, 9, 8, 11, 12, 10, 9, 10, 8, 9, 10],
|
||||||
barMaxWidth:50,
|
type: 'bar',
|
||||||
itemStyle:{
|
barMaxWidth: 50,
|
||||||
normal:{color:'rgb(20, 141, 255)'}
|
itemStyle: {
|
||||||
}
|
normal: { color: 'rgb(20, 141, 255)' }
|
||||||
}]
|
}
|
||||||
};
|
}]
|
||||||
myChart.setOption(option, true);
|
};
|
||||||
},
|
myChart.setOption(option, true);
|
||||||
|
},
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.retangleWrap{
|
.retangleWrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 20px 20px 0 20px;
|
padding: 20px 20px 0 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.retangle{
|
|
||||||
width: 100%;
|
.retangle {
|
||||||
border-radius: 15px;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
border-radius: 15px;
|
||||||
position: relative;
|
box-sizing: border-box;
|
||||||
background: #ffffff;
|
position: relative;
|
||||||
}
|
background: #ffffff;
|
||||||
.retangleImg{
|
}
|
||||||
height:188px;
|
|
||||||
color: #ffffff;
|
.retangleImg {
|
||||||
padding-left: 43px;
|
height: 188px;
|
||||||
background: linear-gradient(180.00deg, rgb(58, 149, 255),rgb(27, 92, 255) 100%);
|
color: #ffffff;
|
||||||
}
|
padding-left: 43px;
|
||||||
.companyName{
|
background: linear-gradient(180.00deg, rgb(58, 149, 255), rgb(27, 92, 255) 100%);
|
||||||
padding-top: 28px;
|
}
|
||||||
font-size: 24px;
|
|
||||||
line-height: 28px;
|
.companyName {
|
||||||
padding-bottom: 23px;
|
padding-top: 28px;
|
||||||
}
|
font-size: 24px;
|
||||||
.companyDesc{
|
line-height: 28px;
|
||||||
padding-left: 4px;
|
padding-bottom: 23px;
|
||||||
font-size: 14px;
|
}
|
||||||
line-height: 20px;
|
|
||||||
}
|
.companyDesc {
|
||||||
.topCardImg{
|
padding-left: 4px;
|
||||||
height: 188px;
|
font-size: 14px;
|
||||||
position: absolute;
|
line-height: 20px;
|
||||||
right: 10px;
|
}
|
||||||
top: 0;
|
|
||||||
}
|
.topCardImg {
|
||||||
.countRetangle{
|
height: 188px;
|
||||||
height: 180px;
|
position: absolute;
|
||||||
padding-top: 20px;
|
right: 10px;
|
||||||
box-sizing: border-box;
|
top: 0;
|
||||||
}
|
}
|
||||||
.countItem{
|
|
||||||
width: 20%;
|
.countRetangle {
|
||||||
padding-left: 24px;
|
height: 180px;
|
||||||
display: inline-block;
|
padding-top: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-right: 1px solid #eeeeee;
|
}
|
||||||
}
|
|
||||||
.countItem:last-child{
|
.countItem {
|
||||||
border-right: 0;
|
width: 20%;
|
||||||
}
|
padding-left: 24px;
|
||||||
.countname{
|
display: inline-block;
|
||||||
font-size: 14px;
|
box-sizing: border-box;
|
||||||
line-height: 22px;
|
border-right: 1px solid #eeeeee;
|
||||||
color: rgba(94,94,94);
|
}
|
||||||
}
|
|
||||||
.countnum{
|
.countItem:last-child {
|
||||||
font-size: 30px;
|
border-right: 0;
|
||||||
padding-bottom: 11px;
|
}
|
||||||
line-height: 38px;
|
|
||||||
}
|
.countname {
|
||||||
.countrate{
|
font-size: 14px;
|
||||||
line-height: 20px;
|
line-height: 22px;
|
||||||
color: rgba(0,0,0,.45);
|
color: rgba(94, 94, 94);
|
||||||
}
|
}
|
||||||
.redColor{
|
|
||||||
color: rgb(255, 73, 87);
|
.countnum {
|
||||||
}
|
font-size: 30px;
|
||||||
.greenColor{
|
padding-bottom: 11px;
|
||||||
color: rgb(71, 201, 58);
|
line-height: 38px;
|
||||||
}
|
}
|
||||||
.middleRetangle{
|
|
||||||
border-radius: 2px;
|
.countrate {
|
||||||
position: relative;
|
line-height: 20px;
|
||||||
box-sizing: border-box;
|
color: rgba(0, 0, 0, .45);
|
||||||
}
|
}
|
||||||
.middleItem{
|
|
||||||
width: 25%;
|
.redColor {
|
||||||
padding-left: 34px;
|
color: rgb(255, 73, 87);
|
||||||
display: inline-block;
|
}
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
.greenColor {
|
||||||
.middleItem:first-child{
|
color: rgb(71, 201, 58);
|
||||||
border-right: 1px solid #eeeeee;
|
}
|
||||||
}
|
|
||||||
.tableRetangle{
|
.middleRetangle {
|
||||||
height: auto;
|
border-radius: 2px;
|
||||||
padding-top: 20px;
|
position: relative;
|
||||||
}
|
box-sizing: border-box;
|
||||||
.bottomRetangle{
|
}
|
||||||
padding: 20px 0;
|
|
||||||
box-sizing: border-box;
|
.middleItem {
|
||||||
background: #ffffff;
|
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;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue