williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

安全管理提交

Browse Source
This commit is contained in:
熊丽君
2021-12-09 19:36:02 +08:00
parent 59078bbcfd
commit 76a8b9fcb9
4 changed files with 527 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/views/bigScreen/securityManage/center2.vue
View File

@ -1,72 +1,35 @@
<template>
<div>
<container4 title="今日动态">
<vue-seamless-scroll
:data="listData"
class="warp"
:class-option="{
singleHeight: 42,
}"
>
<ul class="item">
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/1.png" />今日收入</el-col>
<el-col :span="5">1234万</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/2.png" />今日支出</el-col>
<el-col :span="5">1234万</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/3.png" />今日新签合同</el-col>
<el-col :span="5">1234份</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/4.png" />今日安全问题</el-col>
<el-col :span="5">1234个</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/5.png" />今日质量问题</el-col>
<el-col :span="5">1234个</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/6.png" />今日设备数</el-col>
<el-col :span="5">123台</el-col>
<el-col :span="7">运行率：88%</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/7.png" />今日职工数</el-col>
<el-col :span="5">890人</el-col>
<el-col :span="7">出勤率：73%</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/8.png" />今日生产任务</el-col>
<el-col :span="5">890个</el-col>
<el-col :span="7">完成率：66%</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
<container4 title="危险作业预报/月度重点安全工作提示">
<el-row style="padding: 0 30px">
<el-col style="text-align: right; margin-bottom: 5px">
<bigScreenTabs v-model="index" :titleArr="['周危险', '月重点']"></bigScreenTabs>
</el-col>
<el-col :span="24" style="margin-bottom: 1px">
<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
<el-col style="text-align: center" :span="4">序号</el-col>
<el-col style="text-align: center" :span="8">部门</el-col>
<el-col style="text-align: center" :span="12">作业内容</el-col>
</el-row>
</el-col>
<vue-seamless-scroll
:data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43,
}"
>
<ul class="item">
<li v-for="item in scrollList" :key="item.id">
<el-row style="font-size: 14px">
<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
<el-col style="text-align: center" :span="8">{{ item.name }}</el-col>
<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</el-row>
</container4>
</div>
</template>
@ -75,6 +38,7 @@
import container4 from './components/container4/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
@ -85,10 +49,40 @@ export default {
container4,
rocketTit,
vueSeamlessScroll,
bigScreenTabs,
},
data() {
return {
index: 0,
listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [
{
id: 1,
name: '部门一',
txt: '高压作业',
},
{
id: 2,
name: '部门二',
txt: '易燃作业',
},
{
id: 3,
name: '部门三',
txt: '易燃作业',
},
{
id: 4,
name: '部门四',
txt: '易燃作业',
},
{
id: 5,
name: '部门五',
txt: '易燃作业',
},
],
}
},
mounted() {},
@ -107,28 +101,42 @@ export default {
left: 0;
z-index: -1;
}
.data {
display: flex;
margin: 0 15px;
background: rgba(2, 18, 63, 0.4);
color: #ffffff;
font-size: 18px;
.data-item {
flex: 1;
> div {
margin: 5px 0;
text-align: center;
.warp-scroll {
height: 215px;
width: 100%;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
display: flex;
justify-content: space-between;
font-size: 15px;
}
.num {
font-size: 28px;
font-family: Roboto-BlackItalic, Roboto;
font-weight: 600;
color: #55c5a2;
vertical-align: sub;
padding-right: 3px;
li {
display: block;
height: 42px;
line-height: 42px;
background: #2a437d;
opacity: 0.6;
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
margin-bottom: 1px;
img {
vertical-align: sub;
margin-right: 5px;
}
}
}
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
.warp {
height: 280px;