安全管理
This commit is contained in:
hh
@ -1,63 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="危险作业预报/月度重点安全工作提示">
|
||||
<div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
|
||||
<bigScreenTabs v-model="index" :titleArr="['周危险', '月重点']"></bigScreenTabs>
|
||||
</div>
|
||||
<el-row style="padding: 0 30px" v-if="index == 0">
|
||||
<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="{
|
||||
<div>
|
||||
<container4 title="危险作业预报/月度重点安全工作提示">
|
||||
<div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
|
||||
<bigScreenTabs v-model="index" :titleArr="['周危险', '月重点']"></bigScreenTabs>
|
||||
</div>
|
||||
<el-row style="padding: 0 30px" v-if="index == 0">
|
||||
<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 ref="seamlessScroll1" :data="listData1" 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>
|
||||
<el-row style="padding: 0 30px" v-if="index == 1">
|
||||
<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="{
|
||||
}">
|
||||
<ul class="item">
|
||||
<li v-for="(item,index) in scrollList1" :key="index">
|
||||
<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.deptName }}</el-col>
|
||||
<el-col style="text-align: center" :span="12">{{ item.workContent }}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
<el-row style="padding: 0 30px" v-if="index == 1">
|
||||
<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 ref="seamlessScroll2" :data="listData2" 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>
|
||||
}">
|
||||
<ul class="item">
|
||||
<li v-for="(item,index) in scrollList2" :key="index">
|
||||
<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.deptName }}</el-col>
|
||||
<el-col style="text-align: center" :span="12">{{ item.workContent }}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
</container4>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -69,145 +61,169 @@ import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
container4,
|
||||
rocketTit,
|
||||
vueSeamlessScroll,
|
||||
bigScreenTabs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
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: '易燃作业',
|
||||
},
|
||||
],
|
||||
}
|
||||
listData1: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
listData2: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList1: Array(8).fill({
|
||||
createTime: "",
|
||||
deptName: "",
|
||||
id: 0,
|
||||
remark: "",
|
||||
todayDate: "",
|
||||
workContent: "",
|
||||
},),
|
||||
scrollList2: Array(8).fill({
|
||||
createTime: "",
|
||||
deptName: "",
|
||||
id: 0,
|
||||
remark: "",
|
||||
todayDate: "",
|
||||
workContent: "",
|
||||
},),
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
index(newOld, oldVal) {
|
||||
if (newOld == 0) {
|
||||
if(this.$refs.seamlessScroll1) {
|
||||
this.$refs.seamlessScroll1.reset();
|
||||
}
|
||||
} else {
|
||||
if(this.$refs.seamlessScroll2) {
|
||||
this.$refs.seamlessScroll2.reset();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
getData() {
|
||||
this.request({
|
||||
},
|
||||
beforeDestroy () { },
|
||||
methods: {
|
||||
getData () {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/dangerousWork',
|
||||
method: 'get',
|
||||
params: {type :1}
|
||||
params: { type: 1 }
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
console.log(res)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
if (200 == res.code) {
|
||||
this.scrollList1 = res.data;
|
||||
this.listData1 = Array(this.scrollList1.length).fill(0);
|
||||
if(this.$refs.seamlessScroll1) {
|
||||
this.$refs.seamlessScroll1.reset();
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
this.request({
|
||||
url: '/hx/securityManagement/dangerousWork',
|
||||
method: 'get',
|
||||
params: { type: 2 }
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.scrollList2 = res.data;
|
||||
this.listData2 = Array(this.scrollList2.length).fill(0);
|
||||
if(this.$refs.seamlessScroll2) {
|
||||
this.$refs.seamlessScroll2.reset();
|
||||
}
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tit {
|
||||
padding: 16px 24px;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.warp {
|
||||
height: 280px;
|
||||
width: 440px;
|
||||
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;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
padding-left: 20px;
|
||||
margin: 5px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 280px;
|
||||
width: 440px;
|
||||
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;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
padding-left: 20px;
|
||||
margin: 5px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user