Skip to content

M
mes-ui
Commit 73b77d8a authored by renjintao's avatar renjintao
Browse files
Options

demo/train06/02

parent cbb14ca1
Hide whitespace changes
Inline Side-by-side
Showing with 613 additions and 2 deletions
assets/css/base.less
View file @ 73b77d8a
......@@ -124,6 +124,9 @@ div::-webkit-scrollbar-corner {
.f24 {
font-size: 24px;
}
.f30 {
font-size: 30px;
}
// 字体加粗
.fw5 {
......@@ -224,6 +227,13 @@ div::-webkit-scrollbar-corner {
margin-bottom: 20px;
}
.mb30 {
margin-bottom: 30px;
}
.mb50 {
margin-bottom: 50px;
}
.ml0 {
margin-left: 0;
}
......@@ -247,6 +257,12 @@ div::-webkit-scrollbar-corner {
.ml30 {
margin-left: 30px;
}
.ml40 {
margin-left: 40px;
}
.ml50 {
margin-left: 50px;
}
.ml110 {
margin-left: 110px;
......
pages/demo/02/index.vue 0 → 100644
View file @ 73b77d8a
<template>
<div style="width:1850px;margin:0 auto;">
<Row :gutter="24" index>
<Col span="4">111</Col>
<Col span="16">
<Row class="mt20">
<Col span="12" class="tc">
今日在修：
<span class="f30 fwBold mr20">21</span>
今日出库：
<span class="f30 fwBold mr20">2</span>
<span class="ml20">温度：20°c</span>
<span class="ml20">湿度：50%</span>
</Col>
<Col span="12" class="tc">
<Icon type="md-alert" color="#ed4014" size="24" />
<span class="ml5 mr15">有故障</span>
<Icon type="md-checkmark-circle" color="#19be6b" size="24" />
<span class="ml5 mr15">无故障</span>
<Icon type="md-checkmark-circle" color="#2d8cf0" size="24" />
<span class="ml5 mr15">故障已处理</span>
</Col>
</Row>
<!--1-->
<Row class="mt50">
<Col span="12" style="height:150px;">
<Train :row="dataGreen1"></Train>
</Col>
<Col span="12">
<Train :row="dataGreen2"></Train>
</Col>
</Row>
<!--2/3-->
<Row>
<Col span="12" style="height:150px">
<Train :row="dataGreen2"></Train>
</Col>
<Col span="12">&nbsp;</Col>
</Row>
<Row>
<Col span="12" style="height:150px">
<Train :row="dataGreen2"></Train>
</Col>
<Col span="12">&nbsp;</Col>
</Row>
<!--4/5-->
<Row>
<Col span="12" style="height:150px">
<Train :row="dataGray"></Train>
</Col>
<Col span="12">
<Train :row="dataGray"></Train>
</Col>
</Row>
<Row>
<Col span="12" style="height:150px">
<Train :row="dataGray"></Train>
</Col>
</Row>
</Col>
<Col span="4">3333</Col>
</Row>
<Row>
<Col span="24" class="mb50">&nbsp;</Col>
</Row>
</div>
</template>
<script>
import Train from "./train";
export default {
components: {
Train
},
data() {
return {
dataGreen1: {},
dataGreen2: {},
dataBlue: {},
dataGray: {}
};
},
mounted() {
(this.dataGreen1 = {
title: "有电",
color: "green",
colorTitle: "#19be6b",
num: [1, 2, 3, 1, 2, 3, 1],
numFront: 2,
numEnd: 3,
users: [
{ position: "机务", name: "李志峰" },
{ position: "客运", name: "张伟" },
{ position: "电务通讯", name: "张伟" },
{ position: "车辆", name: "黄飞" }
]
}),
(this.dataGreen2 = {
title: "",
color: "green",
colorTitle: "#19be6b",
num: [1, 2, 3, 1, 2, 3, 1],
numFront: 2,
numEnd: 3,
users: [
{ position: "机务", name: "李志峰" },
{ position: "主机厂", name: "李志峰" },
{ position: "车内保洁组", name: "张伟" }
]
}),
(this.dataGray = {
title: "无电",
color: "gray",
colorTitle: "#888",
num: [2, 2, 3, 2, 2, 3, 3],
numFront: 1,
numEnd: 3,
users: [
{ position: "机务", name: "李志峰" },
{ position: "整备队", name: "张伟" },
{ position: "主机厂", name: "张伟" },
{ position: "车辆", name: "黄飞" }
]
});
}
};
</script>
<style lang="less">
</style>
\ No newline at end of file
pages/demo/02/train.vue 0 → 100644
View file @ 73b77d8a
<template>
<div>
<Row>
<Col :span="24">
<div class="trainTitle">
<ul>
<li v-width="60">
&nbsp;
</li>
<li class="tc" v-for="(item1,index1) in this.trainData.users" :key="index1" v-width="liWidth">
{{item1.position}}
<br />
{{item1.name}}
</li>
</ul>
</div>
</Col>
<Col :span="24">
<div class="train">
<ul>
<li style="width:auto;line-height:45px;font-size:18px;">
<span :style="'color:'+this.trainData.colorTitle">{{trainData.title}}</span>
</li>
<li>
<img :src="'/imgshow/s-l-'+this.trainData.color+'.png'" />
<p class="tc">
<Icon
:type="this.trainData.numFront==1?'md-alert':'md-checkmark-circle'"
:color="this.trainData.numFront==1?'#ed4014':this.trainData.numFront==2?'#19be6b':'#2d8cf0'"
size="18"
/>
</p>
</li>
<li v-for="(item,index) in this.trainData.num" :key="index">
<img :src="'/imgshow/s-c-'+trainData.color+'.png'" />
<p class="tc">
<Icon
:type="item==1?'md-alert':'md-checkmark-circle'"
:color="item==1?'#ed4014':item==2?'#19be6b':'#2d8cf0'"
size="18"
/>
</p>
</li>
<li>
<img :src="'/imgshow/s-r-'+this.trainData.color+'.png'" />
<p class="tc">
<Icon
:type="this.trainData.numEnd==1?'md-alert':'md-checkmark-circle'"
:color="this.trainData.numEnd==1?'#ed4014':this.trainData.numEnd==2?'#19be6b':'#2d8cf0'"
size="18"
/>
</p>
</li>
</ul>
</div>
</Col>
</Row>
</div>
</template>
<script>
export default {
data() {
return {
trainData: null,
liWidth: 120
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
mounted() {
},
watch: {
row(v) {
if (v != null) {
this.trainData=this.$u.clone(this.row)
this.liWidth =
(this.trainData.num.length * 60) / this.trainData.users.length;
}
}
}
};
</script>
<style lang="less" scoped>
.trainTitle ul li {
list-style-type: none;
float: left;
height: 45px;
margin: 0 10px;
text-align: center;
}
.train ul li {
width: 60px;
height: 30px;
list-style-type: none;
float: left;
}
</style>
\ No newline at end of file
pages/demo/06/index.vue 0 → 100644
View file @ 73b77d8a
<template>
<div style="width:1850px;margin:0 auto;">
<Row class="mt20">
<Col span="12" class="tc">
今日在修：
<span class="f30 fwBold mr20">21</span>
今日出库：
<span class="f30 fwBold mr20">2</span>
<span class="ml20">温度：20°c</span>
<span class="ml20">湿度：50%</span>
</Col>
<Col span="12" class="tc">
<Icon type="md-alert" color="#ed4014" size="24" />
<span class="ml5 mr15">有故障</span>
<Icon type="md-checkmark-circle" color="#19be6b" size="24" />
<span class="ml5 mr15">无故障</span>
<Icon type="md-checkmark-circle" color="#2d8cf0" size="24" />
<span class="ml5 mr15">故障已处理</span>
</Col>
</Row>
<!--1-->
<Row class="mt50">
<Col span="12" style="height:150px;">
<Train :row="dataGreen1"></Train>
</Col>
<Col span="12">
<Train :row="dataGreen2"></Train>
</Col>
</Row>
<Row class="lh30">
<Col span="4">
<span>接触网供电作业</span>
</Col>
<Col span="5">
<Progress :percent="30.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">设施设备检查、试风实验、塞拉门实验</Col>
<Col span="5">
<Progress :percent="30.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">
<span>动车组D1修有电作业</span>
</Col>
<Col span="5">
<Progress :percent="52.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">电务通讯设备状态有电检查</Col>
<Col span="5">
<Progress :percent="52.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">
<span>车厢内部保洁整备</span>
</Col>
<Col span="5">
<Progress :percent="40.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">故障处理和加装改造</Col>
<Col span="5">
<Progress :percent="40.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">
<span>出库联检、机务调车出库</span>
</Col>
<Col span="5">
<Progress :percent="40.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
</Row>
<Divider />
<!--2-->
<Row>
<Col span="14" style="height:150px">
<Train :row="dataBlue"></Train>
</Col>
<Col span="10">&nbsp;</Col>
</Row>
<Row class="lh30">
<Col span="4">
<span>接触网断电作业</span>
</Col>
<Col span="5">
<Progress :percent="30.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">升弓验电</Col>
<Col span="5">
<Progress :percent="30.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
</Row>
<Divider />
<!--3-->
<Row>
<Col span="14" style="height:100px">
<Train :row="dataGray"></Train>
</Col>
<Col span="10">&nbsp;</Col>
</Row>
<Row class="lh30">
<Col span="4">
<span>静态检查及功能确认</span>
</Col>
<Col span="5">
<Progress :percent="30.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">动车组D1修无电作业</Col>
<Col span="5">
<Progress :percent="30.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">
<span>电务通讯设备状态静态检查及数据下载</span>
</Col>
<Col span="5">
<Progress :percent="52.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">车厢外皮及车内保洁</Col>
<Col span="5">
<Progress :percent="52.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">
<span>故障处理和加装改造</span>
</Col>
<Col span="5">
<Progress :percent="40.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
<Col span="4">吸污上水、上沙</Col>
<Col span="5">
<Progress :percent="40.8" :stroke-width="5" />
</Col>
<Col span="3">&nbsp;</Col>
</Row>
<Row>
<Col span="24" class="mb50">&nbsp;</Col>
</Row>
</div>
</template>
<script>
import Train from "./train";
export default {
components: {
Train
},
data() {
return {
dataGreen1: {},
dataGreen2: {},
dataBlue: {},
dataGray: {}
};
},
mounted() {
(this.dataGreen1 = {
title: "有电",
color: "green",
colorTitle: "#19be6b",
num: [1, 2, 3, 1, 2, 3, 1],
numFront: 2,
numEnd: 3,
users: [
{ position: "机务", name: "李志峰" },
{ position: "客运", name: "张伟" },
{ position: "电务通讯", name: "张伟" },
{ position: "车辆", name: "黄飞" }
]
}),
(this.dataGreen2 = {
title: "",
color: "green",
colorTitle: "#19be6b",
num: [1, 2, 3, 1, 2, 3, 1],
numFront: 2,
numEnd: 3,
users: [
{ position: "机务", name: "李志峰" },
{ position: "主机厂", name: "李志峰" },
{ position: "车内保洁组", name: "张伟" }
]
}),
(this.dataBlue = {
title: "作业前准备",
color: "blue",
colorTitle: "#2d8cf0",
num: [1, 2, 3, 1, 2, 3, 1],
numFront: 2,
numEnd: 3,
users: [
{ position: "机务", name: "李志峰" },
{ position: "车辆", name: "张伟" },
{ position: "车辆", name: "黄飞" }
]
}),
(this.dataGray = {
title: "无电",
color: "gray",
colorTitle: "#888",
num: [2, 2, 3, 2, 2, 3, 3],
numFront: 1,
numEnd: 3,
users: [
{ position: "机务", name: "李志峰" },
{ position: "整备队", name: "张伟" },
{ position: "宝洁组", name: "张伟" },
{ position: "电务通讯", name: "张伟" },
{ position: "主机厂", name: "张伟" },
{ position: "车辆", name: "黄飞" }
]
});
}
};
</script>
<style lang="less">
</style>
\ No newline at end of file
pages/demo/06/train.vue 0 → 100644
View file @ 73b77d8a
<template>
<div>
<Row>
<Col :span="24">
<div class="trainTitle">
<ul>
<li v-width="60">
&nbsp;
</li>
<li class="tc" v-for="(item1,index1) in this.trainData.users" :key="index1" v-width="liWidth">
{{item1.position}}
<br />
{{item1.name}}
</li>
</ul>
</div>
</Col>
<Col :span="24">
<div class="train">
<ul>
<li style="width:auto;line-height:45px;font-size:18px;">
<span :style="'color:'+this.trainData.colorTitle">{{trainData.title}}</span>
</li>
<li>
<img :src="'/imgshow/b-l-'+this.trainData.color+'.png'" />
<p class="tc">
<Icon
:type="this.trainData.numFront==1?'md-alert':'md-checkmark-circle'"
:color="this.trainData.numFront==1?'#ed4014':this.trainData.numFront==2?'#19be6b':'#2d8cf0'"
size="18"
/>
</p>
</li>
<li v-for="(item,index) in this.trainData.num" :key="index">
<img :src="'/imgshow/b-c-'+trainData.color+'.png'" />
<p class="tc">
<Icon
:type="item==1?'md-alert':'md-checkmark-circle'"
:color="item==1?'#ed4014':item==2?'#19be6b':'#2d8cf0'"
size="18"
/>
</p>
</li>
<li>
<img :src="'/imgshow/b-r-'+this.trainData.color+'.png'" />
<p class="tc">
<Icon
:type="this.trainData.numEnd==1?'md-alert':'md-checkmark-circle'"
:color="this.trainData.numEnd==1?'#ed4014':this.trainData.numEnd==2?'#19be6b':'#2d8cf0'"
size="18"
/>
</p>
</li>
</ul>
</div>
</Col>
</Row>
</div>
</template>
<script>
export default {
data() {
return {
trainData: null,
liWidth: 120
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
mounted() {
},
watch: {
row(v) {
if (v != null) {
this.trainData=this.$u.clone(this.row)
this.liWidth =
(this.trainData.num.length * 100) / this.trainData.users.length;
}
}
}
};
</script>
<style lang="less" scoped>
.trainTitle ul li {
list-style-type: none;
float: left;
height: 45px;
margin: 0 10px;
text-align: center;
}
.train ul li {
width: 94px;
height: 31px;
list-style-type: none;
float: left;
}
</style>
\ No newline at end of file
src/assets/css/base.css
View file @ 73b77d8a
......@@ -75,6 +75,15 @@ div::-webkit-scrollbar-corner {
.ib {
display: inline;
}
.pa {
position: absolute;
}
.pr {
position: relative;
}
.pf {
position: fixed;
}
.f14 {
font-size: 14px;
}
......@@ -90,6 +99,9 @@ div::-webkit-scrollbar-corner {
.f24 {
font-size: 24px;
}
.f30 {
font-size: 30px;
}
.fw5 {
font-weight: 500;
}
......@@ -163,6 +175,12 @@ div::-webkit-scrollbar-corner {
.mb20 {
margin-bottom: 20px;
}
.mb30 {
margin-bottom: 30px;
}
.mb50 {
margin-bottom: 50px;
}
.ml0 {
margin-left: 0;
}
......@@ -181,6 +199,12 @@ div::-webkit-scrollbar-corner {
.ml30 {
margin-left: 30px;
}
.ml40 {
margin-left: 40px;
}
.ml50 {
margin-left: 50px;
}
.ml110 {
margin-left: 110px;
}
......@@ -913,12 +937,12 @@ html [type=button] {
left: 0;
text-align: center;
padding: 20px 0;
background: #d0d2d9;
background: #08080894;
}
.footers div {
height: 25px;
font-size: 14px;
color: #333;
color: #ffffff;
line-height: 28px;
}
.outPdf table,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment