Skip to content

M
mes-ui
Commit 6ea776ec authored by renjintao's avatar renjintao
Browse files
Options

index bg&&scrool

parent 66b7669d
Hide whitespace changes
Inline Side-by-side
Showing with 442 additions and 416 deletions
pages/demo/02/index.vue
View file @ 6ea776ec
<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>
<div class="mainDivs">
<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">
......@@ -201,101 +202,102 @@
</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>
</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>
</Card>
<Card class="mt30" style="width:100%; box-shadow: 0 0 10px #ccc;">
<p slot="title">任务执行状态统计</p>
<div>
<Echart3 />
<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>
<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>
<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>
</div>
</template>
<script>
......@@ -489,4 +491,14 @@ export default {
.hoverImg :hover {
background: #ccc;
}
.mainDivs {
position: fixed;
width: 100%;
top: 90px;
left: 0;
right: 0;
background: #f5f6fa;
height: calc(100vh - 90px);
overflow: auto;
}
</style>
\ No newline at end of file
pages/demo/06/index.vue
View file @ 6ea776ec
<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>
<div class="mainDivs">
<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>动车组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>
<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 />
<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-->
<!--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 />
<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>
<!--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="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>
<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>
</div>
</template>
<script>
......@@ -223,6 +227,16 @@ export default {
};
</script>
<style lang="less">
.mainDivs {
position: fixed;
width: 100%;
top: 90px;
left: 0;
right: 0;
background: #f5f6fa;
height: calc(100vh - 90px);
overflow:auto;
}
.trainTitles {
line-height: 130px;
font-size: 18px;
......
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