Skip to content

M
mes-ui
Commit 16a2a067 authored by 周远喜's avatar 周远喜
Browse files
Options

Merge branch 'product' of http://git.mes123.com/zhouyx/mes-ui into product

parents a517d915 66b7669d
Show whitespace changes
Inline Side-by-side
Showing with 1431 additions and 2 deletions
assets/css/base.less
View file @ 16a2a067
...@@ -124,6 +124,9 @@ div::-webkit-scrollbar-corner { ...@@ -124,6 +124,9 @@ div::-webkit-scrollbar-corner {
.f24 { .f24 {
font-size: 24px; font-size: 24px;
} }
.f30 {
font-size: 30px;
}
// 字体加粗 // 字体加粗
.fw5 { .fw5 {
...@@ -224,6 +227,13 @@ div::-webkit-scrollbar-corner { ...@@ -224,6 +227,13 @@ div::-webkit-scrollbar-corner {
margin-bottom: 20px; margin-bottom: 20px;
} }
.mb30 {
margin-bottom: 30px;
}
.mb50 {
margin-bottom: 50px;
}
.ml0 { .ml0 {
margin-left: 0; margin-left: 0;
} }
...@@ -247,6 +257,12 @@ div::-webkit-scrollbar-corner { ...@@ -247,6 +257,12 @@ div::-webkit-scrollbar-corner {
.ml30 { .ml30 {
margin-left: 30px; margin-left: 30px;
} }
.ml40 {
margin-left: 40px;
}
.ml50 {
margin-left: 50px;
}
.ml110 { .ml110 {
margin-left: 110px; margin-left: 110px;
...@@ -335,6 +351,9 @@ div::-webkit-scrollbar-corner { ...@@ -335,6 +351,9 @@ div::-webkit-scrollbar-corner {
.pt15 { .pt15 {
padding-top: 15px padding-top: 15px
} }
.pr30{
padding-right: 30px;
}
.bnone { .bnone {
border: none; border: none;
......
pages/demo/02/echart1.vue 0 → 100644
View file @ 16a2a067
<template>
<div id="myChart" class="echarts_box"></div>
</template>
<script>
export default {
name: "echart1",
data() {
return {
};
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart"));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color: ["#d63834", "#e06717", "#d18f23", "#006ed2"],
series: [
{
name: "实时故障",
type: "pie",
radius: [20, 50],
center: ["50%", "50%"],
roseType: "radius",
data: [
{ value: 12, name: "一级故障" },
{ value: 10, name: "二级故障" },
{ value: 20, name: "三级故障" },
{ value: 8, name: "其他故障" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {
this.loadEchart();
}
};
</script>
<style scoped>
.echarts_box {
width: 260px;
height: 280px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart2.vue 0 → 100644
View file @ 16a2a067
<template>
<div class="tc" >
<span class="tc fwBold">{{chartData.title}}</span>
<div id="myChart5" class="echarts_box2"></div>
</div>
</template>
<script>
export default {
name: "echart2",
data() {
return {
chartData: {}
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart5"));
var option = {
title: {
text: this.chartData.num1,
left: "center",
top: "center",
textStyle: {
color: "#0091ed",
fontSize: 20,
fontStyle: "normal",
fontWeight: "bold"
}
},
color: ["#0091ed", "#becad8"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "60%"],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: this.chartData.num1, name: "" },
{ value: this.chartData.num2, name: "" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {},
watch: {
row(v) {
if (v != null) {
this.chartData = this.$u.clone(this.row);
this.loadEchart();
}
}
}
};
</script>
<style scoped>
.echarts_box2 {
width: 110px;
height: 110px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart2a.vue 0 → 100644
View file @ 16a2a067
<template>
<div class="tc">
<span class="tc fwBold">{{chartData.title}}</span>
<div id="myChart6" class="echarts_box2"></div>
</div>
</template>
<script>
export default {
name: "echart2",
data() {
return {
chartData: {}
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart6"));
var option = {
title: {
text: this.chartData.num1,
left: "center",
top: "center",
textStyle: {
color: "#0091ed",
fontSize: 20,
fontStyle: "normal",
fontWeight: "bold"
}
},
color: ["#0091ed", "#becad8"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "60%"],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: this.chartData.num1, name: "" },
{ value: this.chartData.num2, name: "" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {},
watch: {
row(v) {
if (v != null) {
this.chartData = this.$u.clone(this.row);
this.loadEchart();
}
}
}
};
</script>
<style scoped>
.echarts_box2 {
width: 110px;
height: 110px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart2b.vue 0 → 100644
View file @ 16a2a067
<template>
<div class="tc">
<span class="tc fwBold">{{chartData.title}}</span>
<div id="myChart7" class="echarts_box2"></div>
</div>
</template>
<script>
export default {
name: "echart2b",
data() {
return {
chartData: {}
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart7"));
var option = {
title: {
text: this.chartData.num1,
left: "center",
top: "center",
textStyle: {
color: "#0091ed",
fontSize: 20,
fontStyle: "normal",
fontWeight: "bold"
}
},
color: ["#0091ed", "#becad8"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "60%"],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: this.chartData.num1, name: "" },
{ value: this.chartData.num2, name: "" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {},
watch: {
row(v) {
if (v != null) {
this.chartData = this.$u.clone(this.row);
this.loadEchart();
}
}
}
};
</script>
<style scoped>
.echarts_box2 {
width: 110px;
height: 110px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart2c.vue 0 → 100644
View file @ 16a2a067
<template>
<div class="tc">
<span class="tc fwBold">{{chartData.title}}</span>
<div id="myChart8" class="echarts_box2"></div>
</div>
</template>
<script>
export default {
name: "echart2",
data() {
return {
chartData: {}
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart8"));
var option = {
title: {
text: this.chartData.num1,
left: "center",
top: "center",
textStyle: {
color: "#0091ed",
fontSize: 20,
fontStyle: "normal",
fontWeight: "bold"
}
},
color: ["#0091ed", "#becad8"],
series: [
{
name: "访问来源",
type: "pie",
radius: ["50%", "60%"],
avoidLabelOverlap: false,
label: {
show: false
},
emphasis: {
label: {
show: false,
fontSize: "30",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [
{ value: this.chartData.num1, name: "" },
{ value: this.chartData.num2, name: "" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {},
watch: {
row(v) {
if (v != null) {
this.chartData = this.$u.clone(this.row);
this.loadEchart();
}
}
}
};
</script>
<style scoped>
.echarts_box2 {
width: 110px;
height: 110px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/echart3.vue 0 → 100644
View file @ 16a2a067
<template>
<div id="myChart3" class="echarts_box3"></div>
</template>
<script>
export default {
name: "echart3",
data() {
return {};
},
methods: {
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById("myChart3"));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color: ["#006fd6", "#cf8d22", "#009c96"],
series: [
{
name: "任务执行状态",
type: "pie",
radius: [10, 50],
center: ["50%", "50%"],
roseType: "radius",
data: [
{ value: 65, name: "完工" },
{ value: 45, name: "未开工" },
{ value: 100, name: "进行中" }
]
}
]
};
// 绘制图表
myChart.setOption(option);
}
},
mounted() {
this.loadEchart();
}
};
</script>
<style scoped>
.echarts_box3 {
width: 260px;
height: 280px;
margin: 0 auto;
}
</style>
\ No newline at end of file
pages/demo/02/index.vue 0 → 100644
View file @ 16a2a067
<template>
<div style="width:1860px;margin:0 auto;" class="divmain">
<Row :gutter="24" index>
<!--left-->
<Col span="5">
<Card class="mt10" style="width:100%; box-shadow: 0 0 10px #ccc">
<p slot="title">实时行车异常列车</p>
<a href="#" slot="extra">
<Icon type="ios-more" size="28" color="#888" />
</a>
<List :split="false">
<ListItem class="listBg">
<ListItemMeta title="坐便器不可用">
<template slot="description">
<li class="fl">XX列08车</li>
<li class="fr">07-22 14:26:36</li>
</template>
</ListItemMeta>
</ListItem>
<ListItem class="listBg">
<ListItemMeta title="换弓">
<template slot="description">
<li class="fl">XX列08车</li>
<li class="fr">07-22 14:26:36</li>
</template>
</ListItemMeta>
</ListItem>
<ListItem class="listBg">
<ListItemMeta title="牵引">
<template slot="description">
<li class="fl">XX列08车</li>
<li class="fr">07-22 14:26:36</li>
</template>
</ListItemMeta>
</ListItem>
<ListItem class="listBg">
<ListItemMeta title="牵引有效率丢失">
<template slot="description">
<li class="fl">XX列08车</li>
<li class="fr">07-22 14:26:36</li>
</template>
</ListItemMeta>
</ListItem>
</List>
</Card>
<Card class="mt30" style="width:100%; box-shadow: 0 0 10px #ccc;">
<p slot="title">实时故障</p>
<a href="#" slot="extra">
<Icon type="ios-more" size="28" color="#888" />
</a>
<div style="background:#d2e6fa;border:#1c80e6 solid 1px;padding:4px;text-align:center;">
涉及列车：
<span class="f18 fwBold">2</span>个路局
<span class="f18 fwBold">4</span>个车型的
<span class="f18 fwBold">9</span>列车
</div>
<List>
<ListItem>
<ListItemMeta>
<template slot="title">
<Icon type="ios-square" size="18" color="#ff7976" />
<span style="color:#ff7976" class="f18">10</span>列：XX局
<span class="f18 fwBold">5</span>个，XX局
<span class="f18 fwBold">5</span>个
</template>
</ListItemMeta>
</ListItem>
<ListItem>
<ListItemMeta>
<template slot="title">
<Icon type="ios-square" size="18" color="#ff7976" />
<span style="color:#ff7976" class="f18">10</span>列：XX局
<span class="f18 fwBold">5</span>个，XX局
<span class="f18 fwBold">5</span>个
</template>
</ListItemMeta>
</ListItem>
<ListItem>
<ListItemMeta>
<template slot="title">
<Icon type="ios-square" size="18" color="#ffa126" />
<span style="color:#ffa126" class="f18">10</span>列：XX局
<span class="f18 fwBold">5</span>个，XX局
<span class="f18 fwBold">5</span>个
</template>
</ListItemMeta>
</ListItem>
<ListItem>
<ListItemMeta>
<template slot="title">
<Icon type="ios-square" size="18" color="#1c80e6" />
<span style="color:#1c80e6" class="f18">10</span>列：XX局
<span class="f18 fwBold">5</span>个，XX局
<span class="f18 fwBold">5</span>个
</template>
</ListItemMeta>
</ListItem>
</List>
<div>
<Echart1 />
</div>
</Card>
</Col>
<Col span="15">
<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="24" style="height:150px;" class="pl30">
<Train :row="dataGreen1" @on-ok="drawerRight = true" class="fl"></Train>
<Train :row="dataGreen2" @on-ok="drawerRight = true" class="fl"></Train>
</Col>
</Row>
<!--2/3-->
<Row class="pl30">
<Col span="24" style="height:150px">
<Train :row="dataGreen1"></Train>
</Col>
</Row>
<Row class="pl30">
<Col span="24" style="height:150px">
<Train :row="dataGreen1"></Train>
</Col>
</Row>
<!--4/5-->
<Row class="pl30">
<Col span="24" style="height:150px">
<Train :row="dataGray1" class="fl"></Train>
<Train :row="dataGray2" class="fl"></Train>
</Col>
</Row>
<Row class="pl30">
<Col span="24" style="height:150px">
<Train :row="dataGray1"></Train>
</Col>
</Row>
<Row class="pl30 pr30">
<Col span="24">
<Card style="width:100%" shadow class="mt30">
<p slot="title">轨侧设备数据监测</p>
<Row :gutter="24" index>
<Col span="2" class="tr">运行</Col>
<Col span="7">
<Progress :percent="100" :stroke-width="5" stroke-color="#2d8cf0">
<span style="color:#666">40台</span>
</Progress>
</Col>
<Col span="2" class="tr">未开机</Col>
<Col span="6">
<Progress :percent="100" :stroke-width="5" stroke-color="#ccc">
<span style="color:#666">32台</span>
</Progress>
</Col>
<Col span="2" class="tr">报警</Col>
<Col span="4">
<Progress :percent="100" :stroke-width="5" stroke-color="#ff0000">
<span style="color:#666">7台</span>
</Progress>
</Col>
</Row>
</Card>
</Col>
</Row>
</Col>
<Col span="4" class="colmain">
<Card class="mt30" style="width:100%; box-shadow: 0 0 10px #ccc;">
<p slot="title">优秀员工</p>
<Row class="mb30">
<Col span="8" class="tc">
<div @mouseover="showInfo1" @mouseout="hideInfo1" class="hoverImg">
<Avatar src="/images/userIco.png" size="60" :shape="shaps1" />
<p class="tc mt10">工时之星</p>
</div>
</Col>
<Col span="8" class="tc">
<div @mouseover="showInfo2" @mouseout="hideInfo2" class="hoverImg">
<Avatar src="/images/user1.jpg" size="60" :shape="shaps2" />
<p class="tc mt10">质量之星</p>
</div>
</Col>
<Col span="8" class="tc">
<div @mouseover="showInfo3" @mouseout="hideInfo3" class="hoverImg">
<Avatar src="/images/user2.jpg" size="60" :shape="shaps3" />
<p class="tc mt10">效率之星</p>
</div>
</Col>
</Row>
</Card>
<div v-show="avatarInfo1" class="divInfo">
<p>姓名：李志锋</p>
<p>班组：机务</p>
<p>上榜理由：</p>
<p>
&nbsp;&nbsp;&nbsp;&nbsp;上月工时排名第一。李志锋同志在上月工作中，不辞辛劳，任劳任怨，共完成工时298个工时，大大提高了班组的整体工作进度。
为表彰先进，特评李志锋同志为2020年度第6期的“工时之星”光荣称号，以兹鼓励。
</p>
<p class="tc">
<img src="/images/honor1.png" />
</p>
</div>
<div v-show="avatarInfo2" class="divInfo">
<p>姓名：刘菲菲</p>
<p>班组：乘务</p>
<p>上榜理由：</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;上月质量评比排名第一。刘菲菲同志在上月工作中，精益求精，认真细致，好评率100%，大大提高了乘务组的整体工作形象。</p>
<p class="tc">
<img src="/images/honor2.png" />
</p>
</div>
<div v-show="avatarInfo3" class="divInfo">
<p>姓名：黄飞</p>
<p>班组：维修</p>
<p>上榜理由：</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;上月任务完成排名第一。黄飞同志在上月工作中，敏捷高效，勇猛精进，多项任务用时全组最少，大大提高了班组的整体工作效率，为优化工艺提供了可靠的参考。</p>
<p class="tc">
<img src="/images/honor3.png" />
</p>
</div>
<Card class="mt30" style="width:100%; box-shadow: 0 0 10px #ccc;">
<p slot="title">物料库房相关统计</p>
<div>
<Row>
<Col span="12">
<Echart2 :row="echart2data1" />
</Col>
<Col span="12">
<Echart2a :row="echart2data2" />
</Col>
<Col span="12">
<Echart2b :row="echart2data3" />
</Col>
<Col span="12">
<Echart2c :row="echart2data4" />
</Col>
</Row>
</div>
</Card>
<Card class="mt30" style="width:100%; box-shadow: 0 0 10px #ccc;">
<p slot="title">任务执行状态统计</p>
<div>
<Echart3 />
</div>
</Card>
<Drawer title="机车信息" v-model="drawerRight" width="330" :mask="false">
<List :split="false">
<ListItem>车号：CR200J3004-3002</ListItem>
<ListItem>接车时间：20200714</ListItem>
<ListItem>计划出库时间：20200715</ListItem>
<ListItem>任务类型：D1修</ListItem>
<ListItem>作业进度：</ListItem>
<ListItem></ListItem>
<ListItem>接触网供电作业</ListItem>
<ListItem>
<Progress :percent="100" :stroke-width="5" stroke-color="#2d8cf0" />
</ListItem>
<ListItem>设施设备检查、试风实验、塞拉门实验</ListItem>
<ListItem>
<Progress :percent="80" :stroke-width="5" stroke-color="#2d8cf0" />
</ListItem>
<ListItem>动车组D1修有电作业</ListItem>
<ListItem>
<Progress :percent="75" :stroke-width="5" stroke-color="#2d8cf0" />
</ListItem>
<ListItem>电务通讯设备状态有电检查</ListItem>
<ListItem>
<Progress :percent="40" :stroke-width="5" stroke-color="#2d8cf0" />
</ListItem>
<ListItem>车厢内部保洁整备</ListItem>
<ListItem>
<Progress :percent="50" :stroke-width="5" stroke-color="#2d8cf0" />
</ListItem>
<ListItem>出库联检、机务调车出库</ListItem>
<ListItem>
<Progress :percent="0" :stroke-width="5" stroke-color="#2d8cf0" />
</ListItem>
</List>
</Drawer>
</Col>
</Row>
<Row>
<Col span="24" class="mb50">&nbsp;</Col>
</Row>
</div>
</template>
<script>
import Train from "./train";
import Echart1 from "./echart1";
import Echart2 from "./echart2";
import Echart2a from "./echart2a";
import Echart2b from "./echart2b";
import Echart2c from "./echart2c";
import Echart3 from "./echart3";
export default {
components: {
Train,
Echart1,
Echart2,
Echart2a,
Echart2b,
Echart2c,
Echart3
},
data() {
return {
dataGreen1: {},
dataGreen2: {},
dataBlue: {},
dataGray: {},
echart2data1: {},
echart2data2: {},
echart2data3: {},
echart2data4: {},
drawerRight: false,
avatarInfo1: false,
avatarInfo2: false,
avatarInfo3: false,
shaps1: "circle",
shaps2: "circle",
shaps3: "circle"
};
},
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.dataGray1 = {
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: "黄飞" }
]
}),
(this.dataGray2 = {
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: "黄飞" }
]
}),
(this.echart2data1 = {
id: 5,
title: "库存预警",
num1: 60,
num2: 200
}),
(this.echart2data2 = {
id: 6,
title: "来料复验",
num1: 100,
num2: 200
}),
(this.echart2data3 = {
id: 7,
title: "缺料呼叫",
num1: 148,
num2: 200
}),
(this.echart2data4 = {
id: 8,
title: "待配套数量",
num1: 10,
num2: 200
});
},
methods: {
showInfo1() {
this.shaps1 = "square";
this.shaps2 = "circle";
this.shaps3 = "circle";
this.avatarInfo1 = true;
this.avatarInfo2 = false;
this.avatarInfo3 = false;
},
hideInfo1() {
this.shaps1 = "circle";
this.avatarInfo1 = false;
},
showInfo2() {
this.shaps2 = "square";
this.shaps1 = "circle";
this.shaps3 = "circle";
this.avatarInfo2 = true;
this.avatarInfo1 = false;
this.avatarInfo3 = false;
},
hideInfo2() {
this.shaps2 = "circle";
this.avatarInfo2 = false;
},
showInfo3() {
this.shaps3 = "square";
this.shaps2 = "circle";
this.shaps1 = "circle";
this.avatarInfo3 = true;
this.avatarInfo2 = false;
this.avatarInfo1 = false;
},
hideInfo3() {
this.shaps3 = "circle";
this.avatarInfo3 = false;
},
hideInfo() {
this.avatarInfo1 = false;
this.avatarInfo2 = false;
this.avatarInfo3 = false;
}
}
};
</script>
<style lang="less" scope>
.ivu-drawer-right {
margin-top: 118px;
}
.ivu-drawer-header {
background: #f5f6fa;
}
.divInfo {
background: #fff;
width: 290px;
height: 375px;
position: absolute;
right: 12px;
z-index: 999;
box-shadow: 0 0 10px #ccc;
padding: 0 20px;
}
.divInfo p {
line-height: 26px;
}
.listBg {
background: url(/images/bgRight.png) right top no-repeat;
padding: 5px 10px;
margin-bottom: 10px;
}
.hoverImg :hover {
background: #ccc;
}
</style>
\ No newline at end of file
pages/demo/02/train.vue 0 → 100644
View file @ 16a2a067
<template>
<div style="width:540px">
<Row>
<Col span="24">
<div class="trainTitle">
<ul>
<li style="width:auto;line-height:45px;font-size:18px;">
<span :style="'color:'+this.trainData.colorTitle">{{trainData.title}}</span>
</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" @click="clickTrain">
<ul>
<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: 10
};
},
props: {
row: {
type: Object,
default: () => {
return null;
}
}
},
mounted() {
},
methods:{
clickTrain()
{
this.$emit("on-ok");
}
},
watch: {
row(v) {
if (v != null) {
this.trainData=this.$u.clone(this.row)
this.liWidth =
(this.trainData.num.length * 55) / 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{
margin-right: 0px;
}
.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 @ 16a2a067
<template>
<div style="width:1740px;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="24" style="height:150px;">
<span class="fl trainTitles" style="color: #19be6b;">有电</span>
<Train :row="dataGreen1" class="fl"></Train>
<Train :row="dataGreen2" class="fl"></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="24" style="height:150px">
<span class="fl trainTitles" style="color: #2d8cf0;">作业前准备</span> <Train :row="dataBlue" class="fl"></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>
</Row>
<Divider />
<!--3-->
<Row>
<Col span="24" style="height:150px">
<span class="fl trainTitles" style="color: #888;">无电</span><Train :row="dataGray" class="fl"></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">动车组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: "黄飞" }
]
});
}
};
</script>
<style lang="less">
.trainTitles {
line-height: 130px;
font-size: 18px;
}
</style>
\ No newline at end of file
pages/demo/06/train.vue 0 → 100644
View file @ 16a2a067
<template>
<div style="width:847px">
<Row>
<Col :span="24">
<div class="trainTitle">
<ul>
<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>
<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 @ 16a2a067
...@@ -75,6 +75,15 @@ div::-webkit-scrollbar-corner { ...@@ -75,6 +75,15 @@ div::-webkit-scrollbar-corner {
.ib { .ib {
display: inline; display: inline;
} }
.pa {
position: absolute;
}
.pr {
position: relative;
}
.pf {
position: fixed;
}
.f14 { .f14 {
font-size: 14px; font-size: 14px;
} }
...@@ -90,6 +99,9 @@ div::-webkit-scrollbar-corner { ...@@ -90,6 +99,9 @@ div::-webkit-scrollbar-corner {
.f24 { .f24 {
font-size: 24px; font-size: 24px;
} }
.f30 {
font-size: 30px;
}
.fw5 { .fw5 {
font-weight: 500; font-weight: 500;
} }
...@@ -163,6 +175,12 @@ div::-webkit-scrollbar-corner { ...@@ -163,6 +175,12 @@ div::-webkit-scrollbar-corner {
.mb20 { .mb20 {
margin-bottom: 20px; margin-bottom: 20px;
} }
.mb30 {
margin-bottom: 30px;
}
.mb50 {
margin-bottom: 50px;
}
.ml0 { .ml0 {
margin-left: 0; margin-left: 0;
} }
...@@ -181,6 +199,12 @@ div::-webkit-scrollbar-corner { ...@@ -181,6 +199,12 @@ div::-webkit-scrollbar-corner {
.ml30 { .ml30 {
margin-left: 30px; margin-left: 30px;
} }
.ml40 {
margin-left: 40px;
}
.ml50 {
margin-left: 50px;
}
.ml110 { .ml110 {
margin-left: 110px; margin-left: 110px;
} }
...@@ -246,6 +270,9 @@ div::-webkit-scrollbar-corner { ...@@ -246,6 +270,9 @@ div::-webkit-scrollbar-corner {
.pt15 { .pt15 {
padding-top: 15px; padding-top: 15px;
} }
.pr30 {
padding-right: 30px;
}
.bnone { .bnone {
border: none; border: none;
} }
...@@ -913,12 +940,12 @@ html [type=button] { ...@@ -913,12 +940,12 @@ html [type=button] {
left: 0; left: 0;
text-align: center; text-align: center;
padding: 20px 0; padding: 20px 0;
background: #d0d2d9; background: #08080894;
} }
.footers div { .footers div {
height: 25px; height: 25px;
font-size: 14px; font-size: 14px;
color: #333; color: #ffffff;
line-height: 28px; line-height: 28px;
} }
.outPdf table, .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