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

安全管理

Browse Source
This commit is contained in:
hh
2021-12-21 19:22:42 +08:00
parent a0bba05cc5
commit f93fc7bd9e
5 changed files with 1351 additions and 1265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

413
src/views/bigScreen/securityManage/center.vue
View File

@ -1,48 +1,74 @@
<template> <template>
<div> <div>
<container3> <container3>
<img class="img" src="./center.png" style="width: 100%; height: 100%" /> <img class="img" src="./center.png" style="width: 100%; height: 100%" />
<div class="con_right"> <section v-for="(v,index) in points" :key="index">
<div class="con_title con_title_bg1"> <div v-if="v.level == '一级'" class="con_right" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
<img src="./img/left1/icon.png" alt="" /> <div class="con_title con_title_bg1">
<span style="margin-left: 2px">一级危险点</span> <img src="./img/left1/icon.png" alt="" />
</div> <span style="margin-left: 2px">一级：{{v.pointName}}</span>
<div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div> </div>
</div> <div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div>
<div class="con_right con_two"> </div>
<div class="con_title con_title_bg2"> <div v-if="v.level == '二级'" class="con_right con_two" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
<img src="./img/left1/icon.png" alt="" /> <div class="con_title con_title_bg2">
<span style="margin-left: 2px">二级危险点</span> <img src="./img/left1/icon.png" alt="" />
</div> <span style="margin-left: 2px">二级：{{v.pointName}}</span>
<div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div> </div>
</div> <div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div>
<div class="con_right con_three"> </div>
<div class="con_title con_title_bg3"> <div v-if="v.level == '三级'" class="con_right con_three" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
<img src="./img/left1/icon.png" alt="" /> <div class="con_title con_title_bg3">
<span style="margin-left: 2px">三级危险点</span> <img src="./img/left1/icon.png" alt="" />
</div> <span style="margin-left: 2px">三级：{{v.pointName}}</span>
<div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div> </div>
</div> <div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div>
<div class="data"> </div>
<div class="data-item"> </section>
<div><span style="font-weight: bold">一级危险点/危险源数量</span></div> <!-- <div class="con_right">
<div class="box"><i>20/16</i><span class="num2">个</span></div> <div class="con_title con_title_bg1">
</div> <img src="./img/left1/icon.png" alt="" />
<div class="data-item"> <span style="margin-left: 2px">一级危险点</span>
<div><span style="font-weight: bold">二级危险点/危险源数量</span></div> </div>
<div class="box"><i>13/23</i><span class="num2">个</span></div> <div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div>
</div> </div>
<div class="data-item"> <div class="con_right con_two">
<div><span style="font-weight: bold">三级危险点/危险源数量</span></div> <div class="con_title con_title_bg2">
<div class="box"><i>10/8</i><span class="num2">个</span></div> <img src="./img/left1/icon.png" alt="" />
</div> <span style="margin-left: 2px">二级危险点</span>
<div class="data-item"> </div>
<div><span style="font-weight: bold">四级危险源数量</span></div> <div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div>
<div class="box"><i>8</i><span class="num2">个</span></div> </div>
</div> <div class="con_right con_three">
</div> <div class="con_title con_title_bg3">
</container3> <img src="./img/left1/icon.png" alt="" />
</div> <span style="margin-left: 2px">三级危险点</span>
</div>
<div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div>
</div> -->
<div class="data">
<div class="data-item">
<div><span style="font-weight: bold">一级危险点/危险源数量</span></div>
<div class="box"><i>{{getItem(pointLevelCount,'一级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'一级').COUNTNUMBER}}</i><span
class="num2">个</span></div>
</div>
<div class="data-item">
<div><span style="font-weight: bold">二级危险点/危险源数量</span></div>
<div class="box"><i>{{getItem(pointLevelCount,'二级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'二级').COUNTNUMBER}}</i><span
class="num2">个</span></div>
</div>
<div class="data-item">
<div><span style="font-weight: bold">三级危险点/危险源数量</span></div>
<div class="box"><i>{{getItem(pointLevelCount,'三级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'三级').COUNTNUMBER}}</i><span
class="num2">个</span></div>
</div>
<div class="data-item">
<div><span style="font-weight: bold">四级危险源数量</span></div>
<div class="box"><i>{{getItem(sourceLevelCount,'四级').COUNTNUMBER}}</i><span class="num2">个</span></div>
</div>
</div>
</container3>
</div>
</template> </template>
<script> <script>
@ -54,124 +80,209 @@ import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from '../../dashboard/mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: 'left1',
components: { components: {
container3, container3,
rocketTit, rocketTit,
progressBar, progressBar,
}, },
data() { data () {
return {} return {
}, pointLevelCount: [
mounted() {}, {
beforeDestroy() {}, "name": "二级",
methods: {}, "COUNTNUMBER": 0
},
{
"name": "三级",
"COUNTNUMBER": 1
},
{
"name": "一级",
"COUNTNUMBER": 1
}
],
sourceLevelCount: [
{
"name": "二级",
"COUNTNUMBER": 2
},
{
"name": "三级",
"COUNTNUMBER": 1
},
{
"name": "四级",
"COUNTNUMBER": 1
},
{
"name": "一级",
"COUNTNUMBER": 1
}
],
points: [
{
"id": 1,
"pointName": "1号大门",
"deptName": "部门七",
"level": "一级",
"status": "运行中",
"abscissa": "55%",
"ordinate": "65%",
"rtmpAddress": "baiddakdnkad",
"remark": "没有备注",
"createTime": null
},
{
"id": 2,
"pointName": "爆炸点",
"deptName": "人事部",
"level": "三级",
"status": "运作中",
"abscissa": "0.65",
"ordinate": "0.65",
"rtmpAddress": "dhuiagduadad",
"remark": "这是备注",
"createTime": "2021-12-09 14:32:55"
}
]
}
},
mounted () {
this.$nextTick(() => {
this.getData()
// this.initChart3()
})
},
beforeDestroy () { },
methods: {
getItem (list, name) {
for (let index = 0; index < list.length; index++) {
const item = list[index];
if (name == item.name) {
return item;
}
}
},
getData () {
this.request({
url: '/hx/securityManagement/dangerousMap',
method: 'get',
}).then(res => {
if (200 == res.code) {
this.pointLevelCount = res.data.pointLevelCount;
this.sourceLevelCount = res.data.sourceLevelCount;
this.points = res.data.points;
}
})
}
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tit { .tit {
padding: 16px 24px; padding: 16px 24px;
} }
.img { .img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.data { .data {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin: 20px 0 0; margin: 20px 0 0;
background: rgba(2, 18, 63, 0.33); background: rgba(2, 18, 63, 0.33);
color: #ffffff; color: #ffffff;
font-size: 18px; font-size: 18px;
.data-item { .data-item {
// flex: 1; // flex: 1;
margin-left: 15px; margin-left: 15px;
width: 22%; width: 22%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
> div { > div {
margin: 5px 0; margin: 5px 0;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
img { img {
// width: 10px; // width: 10px;
// height: 10px; // height: 10px;
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
} }
} }
.box { .box {
font-size: 26px; font-size: 26px;
font-family: Roboto-BlackItalic, Roboto; font-family: Roboto-BlackItalic, Roboto;
font-weight: 600; font-weight: 600;
color: #55c5a2; color: #55c5a2;
} }
.num { .num {
font-size: 14px; font-size: 14px;
} }
.num2 { .num2 {
font-size: 16px; font-size: 16px;
margin-left: 5px; margin-left: 5px;
color: #fff; color: #fff;
} }
} }
} }
.container3 { .container3 {
position: relative; position: relative;
.con_right { .con_right {
width: 138px; width: 138px;
position: absolute; position: absolute;
top: 41%; top: 41%;
right: 43%; right: 43%;
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.con_title { .con_title {
width: 100%; width: 100%;
height: 42px; height: 42px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img { img {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 3px; margin-right: 3px;
} }
} }
.con_title_bg1 { .con_title_bg1 {
background: url('./img/left1/1.png') no-repeat; background: url("./img/left1/1.png") no-repeat;
} }
.con_title_bg2 { .con_title_bg2 {
background: url('./img/left1/2.png') no-repeat; background: url("./img/left1/2.png") no-repeat;
} }
.con_title_bg3 { .con_title_bg3 {
background: url('./img/left1/3.png') no-repeat; background: url("./img/left1/3.png") no-repeat;
} }
.com_img { .com_img {
margin-top: 5px; margin-top: 5px;
width: 40px; width: 40px;
height: 40px; height: 40px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
} }
.con_two { .con_two {
top: 37%; top: 37%;
left: 13%; left: 13%;
} }
.con_three { .con_three {
top: 70%; top: 70%;
right: 16%; right: 16%;
} }
} }
</style> </style>

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

@ -1,63 +1,55 @@
<template> <template>
<div> <div>
<container4 title="危险作业预报/月度重点安全工作提示"> <container4 title="危险作业预报/月度重点安全工作提示">
<div style="text-align: right; margin-right: 30px; margin-bottom: 5px"> <div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
<bigScreenTabs v-model="index" :titleArr="['周危险', '月重点']"></bigScreenTabs> <bigScreenTabs v-model="index" :titleArr="['周危险', '月重点']"></bigScreenTabs>
</div> </div>
<el-row style="padding: 0 30px" v-if="index == 0"> <el-row style="padding: 0 30px" v-if="index == 0">
<el-col :span="24" style="margin-bottom: 1px"> <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-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="4">序号</el-col>
<el-col style="text-align: center" :span="8">部门</el-col> <el-col style="text-align: center" :span="8">部门</el-col>
<el-col style="text-align: center" :span="12">作业内容(周危险)</el-col> <el-col style="text-align: center" :span="12">作业内容(周危险)</el-col>
</el-row> </el-row>
</el-col> </el-col>
<vue-seamless-scroll <vue-seamless-scroll ref="seamlessScroll1" :data="listData1" class="warp-scroll" :class-option="{
:data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43, singleHeight: 43,
}" }">
> <ul class="item">
<ul class="item"> <li v-for="(item,index) in scrollList1" :key="index">
<li v-for="item in scrollList" :key="item.id"> <el-row style="font-size: 14px">
<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="4">{{ item.id }}</el-col> <el-col style="text-align: center" :span="8">{{ item.deptName }}</el-col>
<el-col style="text-align: center" :span="8">{{ item.name }}</el-col> <el-col style="text-align: center" :span="12">{{ item.workContent }}</el-col>
<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col> </el-row>
</el-row> </li>
</li> </ul>
</ul> </vue-seamless-scroll>
</vue-seamless-scroll> </el-row>
</el-row> <el-row style="padding: 0 30px" v-if="index == 1">
<el-row style="padding: 0 30px" v-if="index == 1"> <el-col :span="24" style="margin-bottom: 1px">
<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-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="4">序号</el-col> <el-col style="text-align: center" :span="8">部门</el-col>
<el-col style="text-align: center" :span="8">部门</el-col> <el-col style="text-align: center" :span="12">作业内容(月重点)</el-col>
<el-col style="text-align: center" :span="12">作业内容(月重点)</el-col> </el-row>
</el-row> </el-col>
</el-col> <vue-seamless-scroll ref="seamlessScroll2" :data="listData2" class="warp-scroll" :class-option="{
<vue-seamless-scroll
:data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43, singleHeight: 43,
}" }">
> <ul class="item">
<ul class="item"> <li v-for="(item,index) in scrollList2" :key="index">
<li v-for="item in scrollList" :key="item.id"> <el-row style="font-size: 14px">
<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="4">{{ item.id }}</el-col> <el-col style="text-align: center" :span="8">{{ item.deptName }}</el-col>
<el-col style="text-align: center" :span="8">{{ item.name }}</el-col> <el-col style="text-align: center" :span="12">{{ item.workContent }}</el-col>
<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col> </el-row>
</el-row> </li>
</li> </ul>
</ul> </vue-seamless-scroll>
</vue-seamless-scroll> </el-row>
</el-row> </container4>
</container4> </div>
</div>
</template> </template>
<script> <script>
@ -69,145 +61,169 @@ import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from '../../dashboard/mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left1', name: 'left1',
components: { components: {
container4, container4,
rocketTit, rocketTit,
vueSeamlessScroll, vueSeamlessScroll,
bigScreenTabs, bigScreenTabs,
}, },
data() { data () {
return { return {
index: 0, index: 0,
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData1: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [ listData2: [1, 2, 3, 4, 5, 6, 7, 8],
{ scrollList1: Array(8).fill({
id: 1, createTime: "",
name: '部门一', deptName: "",
txt: '高压作业', id: 0,
}, remark: "",
{ todayDate: "",
id: 2, workContent: "",
name: '部门二', },),
txt: '易燃作业', scrollList2: Array(8).fill({
}, createTime: "",
{ deptName: "",
id: 3, id: 0,
name: '部门三', remark: "",
txt: '易燃作业', todayDate: "",
}, workContent: "",
{ },),
id: 4, }
name: '部门四', },
txt: '易燃作业', watch: {
}, index(newOld, oldVal) {
{ if (newOld == 0) {
id: 5, if(this.$refs.seamlessScroll1) {
name: '部门五', this.$refs.seamlessScroll1.reset();
txt: '易燃作业', }
}, } else {
], if(this.$refs.seamlessScroll2) {
} this.$refs.seamlessScroll2.reset();
}
}
},
}, },
mounted() { mounted () {
this.$nextTick(() => { this.$nextTick(() => {
this.getData() this.getData()
}) })
}, },
beforeDestroy() {}, beforeDestroy () { },
methods: { methods: {
getData() { getData () {
this.request({ this.request({
url: '/hx/securityManagement/dangerousWork', url: '/hx/securityManagement/dangerousWork',
method: 'get', method: 'get',
params: {type :1} params: { type: 1 }
}).then(res => { }).then(res => {
if (200 == res.code) { if (200 == res.code) {
console.log(res) 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.tit { .tit {
padding: 16px 24px; padding: 16px 24px;
} }
.img { .img {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; z-index: -1;
} }
.warp-scroll { .warp-scroll {
height: 215px; height: 215px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
li, li,
a { a {
display: block; display: block;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 15px; font-size: 15px;
} }
li { li {
display: block; display: block;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
background: #2a437d; background: #2a437d;
opacity: 0.6; opacity: 0.6;
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5); // box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
margin-bottom: 1px; margin-bottom: 1px;
img { img {
vertical-align: sub; vertical-align: sub;
margin-right: 5px; margin-right: 5px;
} }
} }
} }
} }
.box { .box {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.warp { .warp {
height: 280px; height: 280px;
width: 440px; width: 440px;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
li, li,
a { a {
display: block; display: block;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 15px; font-size: 15px;
} }
li { li {
display: block; display: block;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
background: rgba(2, 18, 63, 0.33); background: rgba(2, 18, 63, 0.33);
padding-left: 20px; padding-left: 20px;
margin: 5px 0; margin: 5px 0;
img { img {
vertical-align: sub; vertical-align: sub;
margin-right: 5px; margin-right: 5px;
} }
} }
} }
} }
</style> </style>

860
src/views/bigScreen/securityManage/left1.vue
View File

@ -1,80 +1,67 @@
<template> <template>
<div> <div>
<container title="危险点危险源区域分布视频监控情况"> <container title="危险点危险源区域分布视频监控情况">
<div class="wrap"> <div class="wrap">
<el-row class="content1"> <el-row class="content1">
<el-col :span="24"> <el-col :span="24">
<!-- <div id="left1" ref="left1" class="chart1"></div> --> <!-- <div id="left1" ref="left1" class="chart1"></div> -->
<div style="height: 270px; margin: 14px 0 8px"> <div style="height: 270px; margin: 14px 0 8px">
<!-- <img style="width: 100%; height: 100%" src="./img/left1/1.jpg" alt="" /> --> <!-- <img style="width: 100%; height: 100%" src="./img/left1/1.jpg" alt="" /> -->
<video style="width: 100%; height: 100%" id="videoElement" muted autoplay> <video style="width: 100%; height: 100%" id="videoElement" muted autoplay>
Your browser is too old which doesn't support HTML5 video. Your browser is too old which doesn't support HTML5 video.
</video> </video>
</div> </div>
<div style="text-align: right; margin-bottom: 14px; font-size: 14px"> <div style="text-align: right; margin-bottom: 14px; font-size: 14px">
<span style="opacity: 0.9">视频监控 / </span> <span style="opacity: 0.9">视频监控 / </span>
<span style="opacity: 0.7">奖惩播放 / </span> <span style="opacity: 0.7">奖惩播放 / </span>
<span style="opacity: 0.7">典型案例播放</span> <span style="opacity: 0.7">典型案例播放</span>
</div> </div>
<div style="display: flex; align-items: center; margin-bottom: 28px"> <div style="display: flex; align-items: center; margin-bottom: 28px">
<span>危险点视频覆盖率</span> <span>危险点视频覆盖率</span>
<progressBar :showText="true" :strokeWidth="10" :percentage="89" style="flex: 1; margin-left: 10px" /> <progressBar :showText="true" :strokeWidth="10" :percentage="rate" style="flex: 1; margin-left: 10px" />
</div> </div>
</el-col> </el-col>
<el-col :span="24" style="margin-bottom: 1px"> <el-col :span="24" style="margin-bottom: 1px">
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)"> <el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
<el-col style="text-align: center" :span="3">序号</el-col> <el-col style="text-align: center" :span="3">序号</el-col>
<el-col style="text-align: center" :span="7">危险点</el-col> <el-col style="text-align: center" :span="7">危险点</el-col>
<el-col style="text-align: center" :span="7">危险级别</el-col> <el-col style="text-align: center" :span="7">危险级别</el-col>
<el-col style="text-align: center" :span="7">运行状态</el-col> <el-col style="text-align: center" :span="7">运行状态</el-col>
</el-row> </el-row>
</el-col> </el-col>
<vue-seamless-scroll <vue-seamless-scroll :data="listData" ref="seamlessScroll" class="warp-scroll" :class-option="{
:data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43, singleHeight: 43,
}" }">
> <ul class="item">
<ul class="item"> <li v-for="(item,index) in points" :key="index">
<li v-for="item in scrollList" :key="item.id"> <el-row>
<el-row> <el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col> <el-col style="text-align: center" :span="7">{{ item.pointName }}</el-col>
<el-col style="text-align: center" :span="7">{{ item.name }}</el-col> <el-col style="text-align: center" :span="7">
<el-col style="text-align: center" :span="7"> <el-tag v-if="item.level == '一级'" style="background-color: unset" type="danger" effect="plain">
<el-tag v-if="item.level == '一级'" style="background-color: unset" type="danger" effect="plain"> {{ item.level }}</el-tag>
{{ item.level }}</el-tag <el-tag v-else-if="item.level == '二级'" style="background-color: unset" type="warning" effect="plain">
> {{ item.level }}</el-tag>
<el-tag <el-tag v-else style="background-color: unset" effect="plain"> {{ item.level }}</el-tag>
v-else-if="item.level == '二级'" </el-col>
style="background-color: unset" <el-col style="text-align: center" :span="7">
type="warning" <section class="box">
effect="plain" <span v-if="item.status == '运行中'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
> <span v-else-if="item.status == '已损坏'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
{{ item.level }}</el-tag <span v-else style="font-size: 25px; margin-right: 3px">·</span>
> <span v-if="item.status == '运行中'">运行中</span>
<el-tag v-else style="background-color: unset" effect="plain"> {{ item.level }}</el-tag> <span v-else-if="item.status == '已损坏'">已损坏</span>
</el-col> <span v-else>未开始</span>
<el-col style="text-align: center" :span="7"> </section>
<section class="box"> </el-col>
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span> </el-row>
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px" </li>
>·</span </ul>
> </vue-seamless-scroll>
<span v-else style="font-size: 25px; margin-right: 3px">·</span> </el-row>
<span v-if="item.status == 1">运行中</span> </div>
<span v-else-if="item.status == 3">已损坏</span> </container>
<span v-else>未开始</span> </div>
</section>
</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</el-row>
</div>
</container>
</div>
</template> </template>
<script> <script>
@ -91,372 +78,405 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
import echarts from 'echarts' import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
export default { export default {
// mixins: [resize], // mixins: [resize],
name: 'left1', name: 'left1',
components: { components: {
rocketTit, rocketTit,
container, container,
bigScreenTabs, bigScreenTabs,
progressBar, progressBar,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data() { data () {
return { return {
data: [ data: [
{ value: 154, name: '类别一' }, { value: 154, name: '类别一' },
{ value: 775, name: '类别二' }, { value: 775, name: '类别二' },
{ value: 679, name: '类别三' }, { value: 679, name: '类别三' },
{ value: 679, name: '类别四' }, { value: 679, name: '类别四' },
{ value: 679, name: '类别五' }, { value: 679, name: '类别五' },
{ value: 679, name: '类别六' }, { value: 679, name: '类别六' },
{ value: 679, name: '类别七' }, { value: 679, name: '类别七' },
{ value: 679, name: '类别八' }, { value: 679, name: '类别八' },
], ],
colorList, colorList,
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4,5,6,7,8],
scrollList: [ rate: 0,
{ points: [
id: 1, {
name: '危险点一', "id": 1,
level: '一级', "pointName": "1号大门",
status: 1, "deptName": "部门七",
}, "level": "一级",
{ "status": "运行中",
id: 2, "abscissa": "55%",
name: '危险点二', "ordinate": "65%",
level: '二级', "rtmpAddress": "baiddakdnkad",
status: 2, "remark": "没有备注",
}, "createTime": null
{ },
id: 3, {
name: '危险点三', "id": 2,
level: '三级', "pointName": "1号大门",
status: 3, "deptName": "部门七",
}, "level": "一级",
{ "status": "运行中",
id: 4, "abscissa": "55%",
name: '危险点四', "ordinate": "65%",
level: '二级', "rtmpAddress": "baiddakdnkad",
status: 2, "remark": "没有备注",
}, "createTime": null
{ },
id: 5, {
name: '危险点五', "id": 3,
level: '三级', "pointName": "1号大门",
status: 3, "deptName": "部门七",
}, "level": "一级",
], "status": "运行中",
flvPlayer: null, "abscissa": "55%",
} "ordinate": "65%",
}, "rtmpAddress": "baiddakdnkad",
mounted() { "remark": "没有备注",
let videoElement = document.getElementById('videoElement') "createTime": null
this.flvPlayer.attachMediaElement(videoElement) },
this.flvPlayer.load() {
this.flvPlayer.play() "id": 4,
this.$nextTick(() => { "pointName": "1号大门",
// this.initChart() "deptName": "部门七",
// this.initLine() "level": "一级",
}) "status": "运行中",
}, "abscissa": "55%",
beforeDestroy() { "ordinate": "65%",
this.flvPlayer.player.pause() "rtmpAddress": "baiddakdnkad",
this.flvPlayer.player.unload() "remark": "没有备注",
this.flvPlayer.player.detachMediaElement() "createTime": null
this.flvPlayer.player.destroy() },
this.flvPlayer.player = null ],
}, flvPlayer: null,
methods: { }
initChart() { },
this.chart = echarts.init(this.$refs.left1, 'macarons') mounted () {
this.setOptions() let videoElement = document.getElementById('videoElement')
}, this.flvPlayer.attachMediaElement(videoElement)
setOptions() { this.flvPlayer.load()
this.chart.setOption({ this.flvPlayer.play()
tooltip: { this.$nextTick(() => {
trigger: 'item', this.getData()
formatter: '{a} <br/>{b}: {c} ({d}%)', // this.initChart()
}, // this.initLine()
color: this.colorList, })
legend: { },
data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'], beforeDestroy () {
orient: 'vertical', this.flvPlayer.player.pause()
// left: '60%', this.flvPlayer.player.unload()
right: '2%', this.flvPlayer.player.detachMediaElement()
y: 'center', this.flvPlayer.player.destroy()
textStyle: { this.flvPlayer.player = null
//图例文字的样式 },
color: '#fff', methods: {
fontSize: 16, getData () {
}, this.request({
}, url: '/hx/securityManagement/dangerousMap',
series: [ method: 'get',
{ }).then(res => {
name: '概括', if (200 == res.code) {
type: 'pie', this.points = res.data.points;
radius: [0, '85%'], this.rate = res.data.rate;
center: ['35%', '50%'], this.listData = Array(this.points.length*2).fill(0);
label: { this.$refs.seamlessScroll.reset();
formatter: '', }
position: 'inner', })
fontSize: 14, },
}, initChart () {
labelLine: { this.chart = echarts.init(this.$refs.left1, 'macarons')
show: false, this.setOptions()
}, },
data: this.data, setOptions () {
}, this.chart.setOption({
], tooltip: {
}) trigger: 'item',
}, formatter: '{a} <br/>{b}: {c} ({d}%)',
initLine() { },
this.chart = echarts.init(this.$refs.left2) color: this.colorList,
this.setOptions2() legend: {
}, data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
setOptions2() { orient: 'vertical',
this.chart.setOption({ // left: '60%',
tooltip: { right: '2%',
trigger: 'axis', y: 'center',
formatter: '{a1}<br/>{b1}：{c1}', textStyle: {
}, //图例文字的样式
legend: { color: '#fff',
data: ['收入', '实际', '目标'], fontSize: 16,
textStyle: { },
color: '#fff', //legend字体颜色 },
}, series: [
// selectedMode: false, {
}, name: '概括',
grid: { type: 'pie',
containLabel: true, radius: [0, '85%'],
left: 20, center: ['35%', '50%'],
right: 10, label: {
top: 30, formatter: '',
bottom: 50, position: 'inner',
}, fontSize: 14,
xAxis: { },
data: [ labelLine: {
'2021-01', show: false,
'2021-02', },
'2021-03', data: this.data,
'2021-04', },
'2021-05', ],
'2021-06', })
'2021-07', },
'2021-08', initLine () {
'2021-09', this.chart = echarts.init(this.$refs.left2)
'2021-10', this.setOptions2()
'2021-11', },
'2021-12', setOptions2 () {
], this.chart.setOption({
axisLine: { tooltip: {
lineStyle: { trigger: 'axis',
color: 'rgb(255, 255, 255)', formatter: '{a1}<br/>{b1}：{c1}',
}, },
}, legend: {
}, data: ['收入', '实际', '目标'],
dataZoom: { textStyle: {
type: 'slider', color: '#fff', //legend字体颜色
start: 0, },
end: 50, // selectedMode: false,
}, },
color: ['#ccc', 'red'], grid: {
yAxis: [ containLabel: true,
{ left: 20,
name: '件', right: 10,
splitLine: { top: 30,
show: true, bottom: 50,
// 改变轴线颜色 },
lineStyle: { xAxis: {
// 使用深浅的间隔色 data: [
color: ['rgba(255, 255, 255,.5)'], '2021-01',
}, '2021-02',
}, '2021-03',
axisLabel: { '2021-04',
formatter: '{value}', '2021-05',
}, '2021-06',
axisLine: { '2021-07',
lineStyle: { '2021-08',
color: 'rgb(255, 255, 255)', '2021-09',
}, '2021-10',
}, '2021-11',
}, '2021-12',
{ ],
type: 'value', axisLine: {
min: 0, lineStyle: {
max: 100, color: 'rgb(255, 255, 255)',
interval: 20, },
axisLabel: { },
formatter: '{value} %', },
}, dataZoom: {
splitLine: { type: 'slider',
show: false, //不显示网格线 start: 0,
}, end: 50,
splitArea: { },
show: false, //不显示网格区域 color: ['#ccc', 'red'],
}, yAxis: [
axisLine: { {
lineStyle: { name: '件',
color: 'rgb(255, 255, 255)', splitLine: {
}, show: true,
}, // 改变轴线颜色
}, lineStyle: {
], // 使用深浅的间隔色
series: [ color: ['rgba(255, 255, 255,.5)'],
{ },
name: '收入', },
type: 'bar', axisLabel: {
z: '-1', formatter: '{value}',
barGap: '-75%', },
barWidth: 30, axisLine: {
itemStyle: { lineStyle: {
color: 'rgba(85, 197, 162, .3)', color: 'rgb(255, 255, 255)',
}, },
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95], },
}, },
{ {
name: '实际', type: 'value',
type: 'bar', min: 0,
barWidth: 15, max: 100,
position: [0, 0], interval: 20,
itemStyle: { axisLabel: {
color: 'rgba(90, 216, 166, 0.85)', formatter: '{value} %',
}, },
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75], splitLine: {
}, show: false, //不显示网格线
{ },
name: '目标', splitArea: {
type: 'scatter', show: false, //不显示网格区域
symbol: 'rect', },
symbolSize: [30, 4], axisLine: {
symbolOffset: [3, 0], lineStyle: {
position: [0, 0], color: 'rgb(255, 255, 255)',
itemStyle: { },
color: '#F6D97E', },
}, },
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90], ],
}, series: [
], {
}) name: '收入',
}, type: 'bar',
}, z: '-1',
created() { barGap: '-75%',
if (flvjs.isSupported()) { barWidth: 30,
this.flvPlayer = flvjs.createPlayer( itemStyle: {
{ color: 'rgba(85, 197, 162, .3)',
type: 'flv', // 媒体类型 flv 或 mp4 },
isLive: true, // 是否为直播流 data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
fluid: true, },
// hasAudio: true, // 是否开启声音 {
stashInitialSize: 128, // 减少首桢显示等待时长 name: '实际',
url: 'http://192.168.0.151:81/stream/live/livestream.flv', type: 'bar',
}, barWidth: 15,
{ position: [0, 0],
enableStashBuffer: false, itemStyle: {
fixAudioTimestampGap: false, color: 'rgba(90, 216, 166, 0.85)',
isLive: true, },
} data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
) },
} {
}, name: '目标',
type: 'scatter',
symbol: 'rect',
symbolSize: [30, 4],
symbolOffset: [3, 0],
position: [0, 0],
itemStyle: {
color: '#F6D97E',
},
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
},
],
})
},
},
created () {
if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer(
{
type: 'flv', // 媒体类型 flv 或 mp4
isLive: true, // 是否为直播流
fluid: true,
// hasAudio: true, // 是否开启声音
stashInitialSize: 128, // 减少首桢显示等待时长
url: 'http://192.168.0.151:81/stream/live/livestream.flv',
},
{
enableStashBuffer: false,
fixAudioTimestampGap: false,
isLive: true,
}
)
}
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep .el-progress-bar__inner { ::v-deep .el-progress-bar__inner {
background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%) !important; background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%) !important;
} }
.warp-scroll { .warp-scroll {
height: 126px; height: 126px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
li, li,
a { a {
display: block; display: block;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 15px; font-size: 15px;
} }
li { li {
display: block; display: block;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
background: rgba(42, 67, 125, 1); background: rgba(42, 67, 125, 1);
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5); // box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
margin-bottom: 1px; margin-bottom: 1px;
img { img {
vertical-align: sub; vertical-align: sub;
margin-right: 5px; margin-right: 5px;
} }
} }
} }
} }
.wrap { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.content1 { .content1 {
// height: 200px; // height: 200px;
height: 100%; height: 100%;
.chart1 { .chart1 {
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
height: 192px; height: 192px;
background: transparent; background: transparent;
} }
} }
.box { .box {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.num { .num {
font-size: 30px; font-size: 30px;
font-family: Roboto-BlackItalic, Roboto; font-family: Roboto-BlackItalic, Roboto;
font-weight: normal; font-weight: normal;
color: #91d5fe; color: #91d5fe;
vertical-align: sub; vertical-align: sub;
// margin-right: 3px; // margin-right: 3px;
} }
.content2 { .content2 {
padding: 20px; padding: 20px;
flex: 1; flex: 1;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.chart2 { .chart2 {
height: 100%; height: 100%;
} }
.tit { .tit {
font-size: 16px; font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC; font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600; font-weight: 600;
color: #ffffff; color: #ffffff;
line-height: 22px; line-height: 22px;
position: relative; position: relative;
padding-left: 15px; padding-left: 15px;
} }
.tit::after { .tit::after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 3px; top: 3px;
left: 0px; left: 0px;
width: 4px; width: 4px;
height: 16px; height: 16px;
background: #00ffff; background: #00ffff;
} }
} }
</style> </style>

969
src/views/bigScreen/securityManage/left2.vue
View File

@ -1,65 +1,59 @@
<template> <template>
<div> <div>
<container3 title="安全隐患整改情况"> <container3 title="安全隐患整改情况">
<div class="wrap"> <div class="wrap">
<div style="text-align: right; margin-right: 30px; margin-bottom: 5px"> <div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
<bigScreenTabs v-model="index" :titleArr="['总厂', '车间']"></bigScreenTabs> <bigScreenTabs v-model="index" :titleArr="['总厂', '车间']"></bigScreenTabs>
</div> </div>
<el-row class="content1" style="height: 100%" v-if="index == 0"> <el-row class="content1" style="height: 100%" v-if="index == 0">
<el-col :span="14" style="height: 100%"> <el-col :span="14" style="height: 100%">
<div style="height: 100%; width: 100%" ref="chart"></div> <div style="height: 100%; width: 100%" ref="chart1"></div>
</el-col> </el-col>
<el-col :span="10" style="height: 100%"> <el-col :span="10" style="height: 100%">
<div style="height: 100%; width: 100%" ref="chart2"></div> <div style="height: 100%; width: 100%" ref="chart2"></div>
</el-col> </el-col>
</el-row> </el-row>
<el-row class="content1" style="height: 100%" v-if="index == 1"> <el-row class="content1" style="height: 100%" v-if="index == 1">
<el-col :span="12" style="height: 100%"> <el-col :span="12" style="height: 100%">
<div style="height: 100%; width: 100%" ref="chart3"></div> <div style="height: 100%; width: 100%" ref="chart3"></div>
</el-col> </el-col>
<el-col :span="12" style="height: 100%"> <el-col :span="12" style="height: 100%">
<el-row style="padding: 0 10px"> <el-row style="padding: 0 10px">
<el-col :span="24" style="margin-bottom: 1px"> <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-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
<el-col style="text-align: center" :span="3">序号</el-col> <el-col style="text-align: center" :span="3">序号</el-col>
<el-col style="text-align: center" :span="12">安全隐患内容</el-col> <el-col style="text-align: center" :span="12">安全隐患内容</el-col>
<el-col style="text-align: center" :span="4">措施</el-col> <el-col style="text-align: center" :span="4">措施</el-col>
<el-col style="text-align: center" :span="3">责任人</el-col> <el-col style="text-align: center" :span="3">责任人</el-col>
</el-row> </el-row>
</el-col> </el-col>
<vue-seamless-scroll <vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp-scroll" :class-option="{
:data="listData"
class="warp-scroll"
:class-option="{
singleHeight: 43, singleHeight: 43,
}" }">
> <ul class="item">
<ul class="item"> <li v-for="item in scrollList" :key="item.id">
<li v-for="item in scrollList" :key="item.id"> <el-row style="font-size: 14px">
<el-row style="font-size: 14px"> <el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col> <el-col style="text-align: center" :span="12">{{ item.dangerContent }}</el-col>
<el-col style="text-align: center" :span="12">{{ item.name }}</el-col> <el-col style="text-align: center" :span="4">
<el-col style="text-align: center" :span="4"> <section class="box">
<section class="box"> <span v-if="item.measures == '未整改'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
<span v-if="item.status == 1" style="color: #f64f58; font-size: 25px; margin-right: 3px" <span v-else style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
>·</span <span v-if="item.measures == '未整改'">未整改</span>
> <span v-else>已整改</span>
<span v-else style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span> </section>
<span v-if="item.status == 1">已整改</span> </el-col>
<span v-else>未整改</span> <el-col style="text-align: center" :span="3">{{ item.personLiable }}</el-col>
</section> </el-row>
</el-col> </li>
<el-col style="text-align: center" :span="3">{{ item.txt }}</el-col> </ul>
</el-row> </vue-seamless-scroll>
</li> </el-row>
</ul> </el-col>
</vue-seamless-scroll> </el-row>
</el-row> </div>
</el-col> </container3>
</el-row> </div>
</div>
</container3>
</div>
</template> </template>
<script> <script>
@ -75,472 +69,417 @@ import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize' import resize from '../../dashboard/mixins/resize'
export default { export default {
mixins: [resize], mixins: [resize],
name: 'left2', name: 'left2',
components: { components: {
scalseBox, scalseBox,
bigScreenHead, bigScreenHead,
bigScreenTabs, bigScreenTabs,
rocketTit, rocketTit,
container3, container3,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data() { data () {
return { return {
index: 0, index: 0,
colorList, colorList,
listData: [1, 2, 3, 4, 5, 6, 7, 8], listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [ scrollList: [
{ {
id: 1, "id": 1,
name: 'xx车间未开启安全闸门', "month": "2021-01",
txt: '能昌', "workshopName": "车间一",
status: 2, "dangerContent": "没有灭火器",
}, "category": "一类",
{ "measures": "已整改",
id: 2, "personLiable": "小明",
name: 'xx车间未开启安全闸门', "remark": "小明xxx",
txt: '葛岚福', "createTime": null
status: 2, },
}, ],
{
id: 3,
name: 'xx车间未开启安全闸门',
txt: '酆芳琼',
status: 1,
},
{
id: 4,
name: 'xx车间未开启安全闸门',
txt: '酆芳琼',
status: 1,
},
{
id: 5,
name: 'xx车间未开启安全闸门',
txt: '酆芳琼',
status: 1,
},
],
dateRange: [], dateRange: [],
chart: null, chart1: null,
chart2: null, chart2: null,
chart3: null, chart3: null,
option: { }
// legend: { },
// data: ['利润', '利润目标完成率'], watch: {
// textStyle: { index (newOld, oldVal) {
// color: '#fff', if (newOld == 0) {
// }, this.chart3.dispose()
// }, this.chart3 = null
grid: { this.$nextTick(() => {
left: '3%', this.initChart()
right: '6%', })
bottom: '3%', } else {
containLabel: true, this.chart1.dispose()
}, this.chart1 = null
xAxis: [ this.chart2.dispose()
{ this.chart2 = null
type: 'category', this.$nextTick(() => {
data: [ this.initChart3()
'2021-01', })
'2021-02', }
'2021-03', },
'2021-04', },
'2021-05', mounted () {
'2021-06', this.$nextTick(() => {
'2021-07', this.initChart()
'2021-08', // this.initChart3()
'2021-09', })
'2021-10', },
'2021-11', beforeDestroy () {
'2021-12', if (!this.chart) {
], return
axisPointer: { }
type: 'shadow', this.chart.dispose()
}, this.chart = null
axisLine: { },
lineStyle: { methods: {
color: 'rgb(255, 255, 255)', initChart () {
}, this.request({
}, url: '/hx/securityManagement/hiddenDanger/1',
}, method: 'get',
], // type=1车间/=2总厂
yAxis: [ params: { type: 2 }
{ }).then(res => {
type: 'value', if (200 == res.code) {
name: '个', let { monthList, mapList, category } = res.data;
min: 0, this.initChart2(category);
max: 250, this.chart1 = echarts.init(this.$refs.chart1)
interval: 50, this.chart1.setOption({
axisLabel: { // legend: {
formatter: '{value}', // data: ['利润', '利润目标完成率'],
}, // textStyle: {
splitLine: { // color: '#fff',
show: false, //不显示网格线 // },
}, // },
splitArea: { grid: {
show: false, //不显示网格区域 left: '3%',
}, right: '6%',
axisLine: { bottom: '3%',
lineStyle: { containLabel: true,
color: 'rgb(255, 255, 255)', },
}, xAxis: [
}, {
}, type: 'category',
{ data: monthList,
type: 'value', axisPointer: {
min: 0, type: 'shadow',
max: 25, },
interval: 5, axisLine: {
axisLabel: { lineStyle: {
formatter: '{value} %', color: 'rgb(255, 255, 255)',
}, },
splitLine: { },
show: false, //不显示网格线 },
}, ],
splitArea: { yAxis: [
show: false, //不显示网格区域 {
}, type: 'value',
axisLine: { name: '个',
lineStyle: { axisLabel: {
color: 'rgb(255, 255, 255)', formatter: '{value}',
}, },
}, splitLine: {
}, show: false, //不显示网格线
], },
grid: { splitArea: {
containLabel: true, show: false, //不显示网格区域
width: '99%', },
left: 0, axisLine: {
top: 50, lineStyle: {
bottom: 50, color: 'rgb(255, 255, 255)',
}, },
dataZoom: { },
type: 'slider', },
textStyle: { {
color: '#fff', type: 'value',
}, axisLabel: {
}, formatter: '{value} %',
series: [ },
{ splitLine: {
name: '利润', show: false, //不显示网格线
type: 'bar', },
barWidth: 20, splitArea: {
data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3], show: false, //不显示网格区域
itemStyle: { },
color: 'rgb(118,196,166)', axisLine: {
}, lineStyle: {
barGap: '0', color: 'rgb(255, 255, 255)',
}, },
{ },
name: '利润目标完成率', },
type: 'line', ],
yAxisIndex: 1, grid: {
smooth: false, containLabel: true,
data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2], width: '99%',
itemStyle: { left: 0,
color: '#55C5A2', top: 50,
}, bottom: 50,
symbol: 'none', },
}, dataZoom: {
], type: 'slider',
// yAxis: { start: 0,
// type: 'value', end: this.dataZoomEnd(mapList.length, 5),
// splitLine: { },
// show: false//不显示网格线 series: [
// }, {
// splitArea: { name: '利润',
// show: false//不显示网格区域 type: 'bar',
// }, barWidth: 20,
// axisLine: { data: mapList.map(e => e.total),
// lineStyle: { // data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
// color: 'rgb(255, 255, 255)' itemStyle: {
// }, color: 'rgb(118,196,166)',
// } },
// }, barGap: '0',
// series: [ },
// { {
// name: '利润', name: '利润目标完成率',
// type: 'bar', type: 'line',
// data: [ yAxisIndex: 1,
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 smooth: false,
// ] data: mapList.map(e => e.rate),
// }, itemStyle: {
// { color: '#55C5A2',
// name: '利润预测', },
// type: 'bar', symbol: 'none',
// data: [ },
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 ],
// ] });
// }, } else {
// { this.$message.error(res.msg);
// name: '利润目标完成率', }
// type: 'line', })
// yAxisIndex: 1, },
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] initChart2 (category) {
// } this.chart2 = echarts.init(this.$refs.chart2)
this.chart2.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
color: this.colorList,
legend: {
// data: ['型号一', '型号二', '型号三', '型号四'],
// orient: 'vertical',
// left: '60%',
// right: '2%',
bottom: 30,
// y: 'bottom',
textStyle: {
//图例文字的样式
color: '#fff',
fontSize: 16,
},
},
series: [
{
name: '型号',
type: 'pie',
radius: ['40%', '60%'],
center: ['45%', '45%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
fontWeight: 'bold',
formatter: ' {c}', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: category.map(e => {
return {
value: e.NUMBERCOUNT, name: e.category
}
})
// data: [
// { value: 154, name: '型号一' },
// { value: 775, name: '型号二' },
// { value: 679, name: '型号三' },
// { value: 679, name: '型号四' },
// ],
},
],
})
},
initChart3 () {
this.request({
url: '/hx/securityManagement/hiddenDanger/1',
method: 'get',
// type=1车间/=2总厂
params: { type: 1 }
}).then(res => {
if (200 == res.code) {
this.chart3 = echarts.init(this.$refs.chart3)
let { list, allWorkshop, mapList } = res.data;
this.scrollList = list;
this.listData2 = Array(this.scrollList.length).fill(0);
this.$refs.seamlessScroll.reset();
this.chart3.setOption({
// legend: {
// data: ['利润', '利润目标完成率'],
// textStyle: {
// color: '#fff',
// },
// },
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: allWorkshop,
// data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
axisPointer: {
type: 'shadow',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: [
{
type: 'value',
name: '个',
axisLabel: {
formatter: '{value}',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
{
type: 'value',
axisLabel: {
formatter: '{value} %',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
grid: {
containLabel: true,
width: '99%',
left: 0,
top: 50,
bottom: 50,
},
dataZoom: {
type: 'slider',
start: 0,
end: this.dataZoomEnd(mapList.length, 5),
},
series: [
{
name: '利润',
type: 'bar',
barWidth: 20,
data: mapList.map(e => e.total),
// data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
itemStyle: {
color: 'rgb(118,196,166)',
},
barGap: '0',
},
{
name: '利润目标完成率',
type: 'line',
yAxisIndex: 1,
smooth: false,
data: mapList.map(e => e.rate),
// data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
itemStyle: {
color: '#7EA7FC ',
},
symbol: 'none',
},
],
})
}
})
// ] },
},
} },
},
watch: {
index(newOld, oldVal) {
if (newOld == 0) {
this.chart3.dispose()
this.chart3 = null
this.$nextTick(() => {
this.initChart()
this.initLine()
})
} else {
this.chart.dispose()
this.chart = null
this.chart2.dispose()
this.chart2 = null
this.$nextTick(() => {
this.initChart3()
})
}
},
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.initLine()
// this.initChart3()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.chart.setOption(this.option)
},
initLine() {
this.chart2 = echarts.init(this.$refs.chart2)
this.setOptions2()
},
initChart3() {
this.chart3 = echarts.init(this.$refs.chart3)
this.setOptions3()
},
setOptions2() {
this.chart2.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
color: this.colorList,
legend: {
// data: ['型号一', '型号二', '型号三', '型号四'],
// orient: 'vertical',
// left: '60%',
// right: '2%',
bottom: 30,
// y: 'bottom',
textStyle: {
//图例文字的样式
color: '#fff',
fontSize: 16,
},
},
series: [
{
name: '概括',
type: 'pie',
radius: ['40%', '60%'],
center: ['45%', '45%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
fontWeight: 'bold',
formatter: ' {c}', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容
},
emphasis: {
label: {
show: false,
fontSize: '40',
fontWeight: 'bold',
},
},
labelLine: {
show: false,
},
data: [
{ value: 154, name: '型号一' },
{ value: 775, name: '型号二' },
{ value: 679, name: '型号三' },
{ value: 679, name: '型号四' },
],
},
],
})
},
setOptions3() {
this.chart3.setOption({
// legend: {
// data: ['利润', '利润目标完成率'],
// textStyle: {
// color: '#fff',
// },
// },
grid: {
left: '3%',
right: '6%',
bottom: '3%',
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
axisPointer: {
type: 'shadow',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: [
{
type: 'value',
name: '个',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
{
type: 'value',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} %',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
grid: {
containLabel: true,
width: '99%',
left: 0,
top: 50,
bottom: 50,
},
dataZoom: {
type: 'slider',
textStyle: {
color: '#fff',
},
},
series: [
{
name: '利润',
type: 'bar',
barWidth: 20,
data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
itemStyle: {
color: 'rgb(118,196,166)',
},
barGap: '0',
},
{
name: '利润目标完成率',
type: 'line',
yAxisIndex: 1,
smooth: false,
data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
itemStyle: {
color: '#7EA7FC ',
},
symbol: 'none',
},
],
})
},
},
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.warp-scroll { .warp-scroll {
height: 215px; height: 215px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 auto; margin: 0 auto;
li, li,
a { a {
display: block; display: block;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 15px; font-size: 15px;
} }
li { li {
display: block; display: block;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
background: #2a437d; background: #2a437d;
opacity: 0.6; opacity: 0.6;
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5); // box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
margin-bottom: 1px; margin-bottom: 1px;
img { img {
vertical-align: sub; vertical-align: sub;
margin-right: 5px; margin-right: 5px;
} }
} }
} }
} }
.box { .box {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.wrap { .wrap {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
</style> </style>

6
src/views/bigScreen/securityManage/right2.vue
View File

@ -43,9 +43,9 @@ export default {
data () { data () {
return { return {
val: [ val: [
{ "INITNUMBER": 0, "name": "三人以上", "NOWNUMBER": 0 }, { "INITNUMBER": 0, "name": "三人以上", "NOWNUMBER": 0 },
{ "INITNUMBER": 0, "name": "十人以上", "NOWNUMBER": 0 } { "INITNUMBER": 0, "name": "十人以上", "NOWNUMBER": 0 }
] ]
} }
}, },
mounted () { mounted () {