Merge branch 'master' of http://101.43.70.124:3000/williamet/vis389
This commit is contained in:
熊丽君
@ -1,48 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3>
|
||||
<img class="img" src="./center.png" style="width: 100%; height: 100%" />
|
||||
<div class="con_right">
|
||||
<div class="con_title con_title_bg1">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">一级危险点</span>
|
||||
</div>
|
||||
<div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="con_right con_two">
|
||||
<div class="con_title con_title_bg2">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">二级危险点</span>
|
||||
</div>
|
||||
<div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="con_right con_three">
|
||||
<div class="con_title con_title_bg3">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<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>20/16</i><span class="num2">个</span></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">二级危险点/危险源数量</span></div>
|
||||
<div class="box"><i>13/23</i><span class="num2">个</span></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">三级危险点/危险源数量</span></div>
|
||||
<div class="box"><i>10/8</i><span class="num2">个</span></div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><span style="font-weight: bold">四级危险源数量</span></div>
|
||||
<div class="box"><i>8</i><span class="num2">个</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
</div>
|
||||
<div>
|
||||
<container3>
|
||||
<img class="img" src="./center.png" style="width: 100%; height: 100%" />
|
||||
<section v-for="(v,index) in points" :key="index">
|
||||
<div v-if="v.level == '一级'" class="con_right" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
|
||||
<div class="con_title con_title_bg1">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">一级：{{v.pointName}}</span>
|
||||
</div>
|
||||
<div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div>
|
||||
</div>
|
||||
<div v-if="v.level == '二级'" class="con_right con_two" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
|
||||
<div class="con_title con_title_bg2">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">二级：{{v.pointName}}</span>
|
||||
</div>
|
||||
<div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div>
|
||||
</div>
|
||||
<div v-if="v.level == '三级'" class="con_right con_three" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
|
||||
<div class="con_title con_title_bg3">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">三级：{{v.pointName}}</span>
|
||||
</div>
|
||||
<div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <div class="con_right">
|
||||
<div class="con_title con_title_bg1">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">一级危险点</span>
|
||||
</div>
|
||||
<div class="com_img"><img src="./img/left1/icon1.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="con_right con_two">
|
||||
<div class="con_title con_title_bg2">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<span style="margin-left: 2px">二级危险点</span>
|
||||
</div>
|
||||
<div class="com_img"><img src="./img/left1/icon2.png" alt="" /></div>
|
||||
</div>
|
||||
<div class="con_right con_three">
|
||||
<div class="con_title con_title_bg3">
|
||||
<img src="./img/left1/icon.png" alt="" />
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@ -54,124 +80,209 @@ import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {},
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
pointLevelCount: [
|
||||
{
|
||||
"name": "二级",
|
||||
"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>
|
||||
|
||||
<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;
|
||||
}
|
||||
.data {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 20px 0 0;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
// flex: 1;
|
||||
margin-left: 15px;
|
||||
width: 22%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #55c5a2;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin: 20px 0 0;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
// flex: 1;
|
||||
margin-left: 15px;
|
||||
width: 22%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #55c5a2;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container3 {
|
||||
position: relative;
|
||||
.con_right {
|
||||
width: 138px;
|
||||
position: absolute;
|
||||
top: 41%;
|
||||
right: 43%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.con_title {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
.con_title_bg1 {
|
||||
background: url('./img/left1/1.png') no-repeat;
|
||||
}
|
||||
.con_title_bg2 {
|
||||
background: url('./img/left1/2.png') no-repeat;
|
||||
}
|
||||
.con_title_bg3 {
|
||||
background: url('./img/left1/3.png') no-repeat;
|
||||
}
|
||||
.com_img {
|
||||
margin-top: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_two {
|
||||
top: 37%;
|
||||
left: 13%;
|
||||
}
|
||||
.con_three {
|
||||
top: 70%;
|
||||
right: 16%;
|
||||
}
|
||||
position: relative;
|
||||
.con_right {
|
||||
width: 138px;
|
||||
position: absolute;
|
||||
top: 41%;
|
||||
right: 43%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.con_title {
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
.con_title_bg1 {
|
||||
background: url("./img/left1/1.png") no-repeat;
|
||||
}
|
||||
.con_title_bg2 {
|
||||
background: url("./img/left1/2.png") no-repeat;
|
||||
}
|
||||
.con_title_bg3 {
|
||||
background: url("./img/left1/3.png") no-repeat;
|
||||
}
|
||||
.com_img {
|
||||
margin-top: 5px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_two {
|
||||
top: 37%;
|
||||
left: 13%;
|
||||
}
|
||||
.con_three {
|
||||
top: 70%;
|
||||
right: 16%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,80 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<container title="危险点危险源区域分布视频监控情况">
|
||||
<div class="wrap">
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
<!-- <div id="left1" ref="left1" class="chart1"></div> -->
|
||||
<div style="height: 270px; margin: 14px 0 8px">
|
||||
<!-- <img style="width: 100%; height: 100%" src="./img/left1/1.jpg" alt="" /> -->
|
||||
<video style="width: 100%; height: 100%" id="videoElement" muted autoplay>
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
</div>
|
||||
<div style="text-align: right; margin-bottom: 14px; font-size: 14px">
|
||||
<span style="opacity: 0.9">视频监控 / </span>
|
||||
<span style="opacity: 0.7">奖惩播放 / </span>
|
||||
<span style="opacity: 0.7">典型案例播放</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 28px">
|
||||
<span>危险点视频覆盖率</span>
|
||||
<progressBar :showText="true" :strokeWidth="10" :percentage="89" style="flex: 1; margin-left: 10px" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<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="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-col>
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
<div>
|
||||
<container title="危险点危险源区域分布视频监控情况">
|
||||
<div class="wrap">
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
<!-- <div id="left1" ref="left1" class="chart1"></div> -->
|
||||
<div style="height: 270px; margin: 14px 0 8px">
|
||||
<!-- <img style="width: 100%; height: 100%" src="./img/left1/1.jpg" alt="" /> -->
|
||||
<video style="width: 100%; height: 100%" id="videoElement" muted autoplay>
|
||||
Your browser is too old which doesn't support HTML5 video.
|
||||
</video>
|
||||
</div>
|
||||
<div style="text-align: right; margin-bottom: 14px; font-size: 14px">
|
||||
<span style="opacity: 0.9">视频监控 / </span>
|
||||
<span style="opacity: 0.7">奖惩播放 / </span>
|
||||
<span style="opacity: 0.7">典型案例播放</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; margin-bottom: 28px">
|
||||
<span>危险点视频覆盖率</span>
|
||||
<progressBar :showText="true" :strokeWidth="10" :percentage="rate" style="flex: 1; margin-left: 10px" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<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="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-col>
|
||||
<vue-seamless-scroll :data="listData" ref="seamlessScroll" class="warp-scroll" :class-option="{
|
||||
singleHeight: 43,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||
<el-col style="text-align: center" :span="7">{{ item.name }}</el-col>
|
||||
<el-col style="text-align: center" :span="7">
|
||||
<el-tag v-if="item.level == '一级'" style="background-color: unset" type="danger" effect="plain">
|
||||
{{ 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 v-else style="background-color: unset" effect="plain"> {{ item.level }}</el-tag>
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="7">
|
||||
<section class="box">
|
||||
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-else-if="item.status == 3" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||
>·</span
|
||||
>
|
||||
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-if="item.status == 1">运行中</span>
|
||||
<span v-else-if="item.status == 3">已损坏</span>
|
||||
<span v-else>未开始</span>
|
||||
</section>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
}">
|
||||
<ul class="item">
|
||||
<li v-for="(item,index) in points" :key="index">
|
||||
<el-row>
|
||||
<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">
|
||||
<el-tag v-if="item.level == '一级'" style="background-color: unset" type="danger" effect="plain">
|
||||
{{ 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 v-else style="background-color: unset" effect="plain"> {{ item.level }}</el-tag>
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="7">
|
||||
<section class="box">
|
||||
<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>
|
||||
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-if="item.status == '运行中'">运行中</span>
|
||||
<span v-else-if="item.status == '已损坏'">已损坏</span>
|
||||
<span v-else>未开始</span>
|
||||
</section>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
</div>
|
||||
</container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -91,372 +78,405 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{ value: 154, name: '类别一' },
|
||||
{ value: 775, name: '类别二' },
|
||||
{ value: 679, name: '类别三' },
|
||||
{ value: 679, name: '类别四' },
|
||||
{ value: 679, name: '类别五' },
|
||||
{ value: 679, name: '类别六' },
|
||||
{ value: 679, name: '类别七' },
|
||||
{ value: 679, name: '类别八' },
|
||||
],
|
||||
colorList,
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '危险点一',
|
||||
level: '一级',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '危险点二',
|
||||
level: '二级',
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '危险点三',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '危险点四',
|
||||
level: '二级',
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '危险点五',
|
||||
level: '三级',
|
||||
status: 3,
|
||||
},
|
||||
],
|
||||
flvPlayer: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
let videoElement = document.getElementById('videoElement')
|
||||
this.flvPlayer.attachMediaElement(videoElement)
|
||||
this.flvPlayer.load()
|
||||
this.flvPlayer.play()
|
||||
this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
// this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.flvPlayer.player.pause()
|
||||
this.flvPlayer.player.unload()
|
||||
this.flvPlayer.player.detachMediaElement()
|
||||
this.flvPlayer.player.destroy()
|
||||
this.flvPlayer.player = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
|
||||
orient: 'vertical',
|
||||
// left: '60%',
|
||||
right: '2%',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '概括',
|
||||
type: 'pie',
|
||||
radius: [0, '85%'],
|
||||
center: ['35%', '50%'],
|
||||
label: {
|
||||
formatter: '',
|
||||
position: 'inner',
|
||||
fontSize: 14,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: this.data,
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
initLine() {
|
||||
this.chart = echarts.init(this.$refs.left2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ['收入', '实际', '目标'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 20,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
'2021-01',
|
||||
'2021-02',
|
||||
'2021-03',
|
||||
'2021-04',
|
||||
'2021-05',
|
||||
'2021-06',
|
||||
'2021-07',
|
||||
'2021-08',
|
||||
'2021-09',
|
||||
'2021-10',
|
||||
'2021-11',
|
||||
'2021-12',
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 50,
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
yAxis: [
|
||||
{
|
||||
name: '件',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
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,
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
data: [
|
||||
{ value: 154, name: '类别一' },
|
||||
{ value: 775, name: '类别二' },
|
||||
{ value: 679, name: '类别三' },
|
||||
{ value: 679, name: '类别四' },
|
||||
{ value: 679, name: '类别五' },
|
||||
{ value: 679, name: '类别六' },
|
||||
{ value: 679, name: '类别七' },
|
||||
{ value: 679, name: '类别八' },
|
||||
],
|
||||
colorList,
|
||||
listData: [1, 2, 3, 4,5,6,7,8],
|
||||
rate: 0,
|
||||
points: [
|
||||
{
|
||||
"id": 1,
|
||||
"pointName": "1号大门",
|
||||
"deptName": "部门七",
|
||||
"level": "一级",
|
||||
"status": "运行中",
|
||||
"abscissa": "55%",
|
||||
"ordinate": "65%",
|
||||
"rtmpAddress": "baiddakdnkad",
|
||||
"remark": "没有备注",
|
||||
"createTime": null
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"pointName": "1号大门",
|
||||
"deptName": "部门七",
|
||||
"level": "一级",
|
||||
"status": "运行中",
|
||||
"abscissa": "55%",
|
||||
"ordinate": "65%",
|
||||
"rtmpAddress": "baiddakdnkad",
|
||||
"remark": "没有备注",
|
||||
"createTime": null
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"pointName": "1号大门",
|
||||
"deptName": "部门七",
|
||||
"level": "一级",
|
||||
"status": "运行中",
|
||||
"abscissa": "55%",
|
||||
"ordinate": "65%",
|
||||
"rtmpAddress": "baiddakdnkad",
|
||||
"remark": "没有备注",
|
||||
"createTime": null
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"pointName": "1号大门",
|
||||
"deptName": "部门七",
|
||||
"level": "一级",
|
||||
"status": "运行中",
|
||||
"abscissa": "55%",
|
||||
"ordinate": "65%",
|
||||
"rtmpAddress": "baiddakdnkad",
|
||||
"remark": "没有备注",
|
||||
"createTime": null
|
||||
},
|
||||
],
|
||||
flvPlayer: null,
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
let videoElement = document.getElementById('videoElement')
|
||||
this.flvPlayer.attachMediaElement(videoElement)
|
||||
this.flvPlayer.load()
|
||||
this.flvPlayer.play()
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
// this.initChart()
|
||||
// this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.flvPlayer.player.pause()
|
||||
this.flvPlayer.player.unload()
|
||||
this.flvPlayer.player.detachMediaElement()
|
||||
this.flvPlayer.player.destroy()
|
||||
this.flvPlayer.player = null
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/dangerousMap',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.points = res.data.points;
|
||||
this.rate = res.data.rate;
|
||||
this.listData = Array(this.points.length*2).fill(0);
|
||||
this.$refs.seamlessScroll.reset();
|
||||
}
|
||||
})
|
||||
},
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions () {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
|
||||
orient: 'vertical',
|
||||
// left: '60%',
|
||||
right: '2%',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '概括',
|
||||
type: 'pie',
|
||||
radius: [0, '85%'],
|
||||
center: ['35%', '50%'],
|
||||
label: {
|
||||
formatter: '',
|
||||
position: 'inner',
|
||||
fontSize: 14,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: this.data,
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
initLine () {
|
||||
this.chart = echarts.init(this.$refs.left2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2 () {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ['收入', '实际', '目标'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 20,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
'2021-01',
|
||||
'2021-02',
|
||||
'2021-03',
|
||||
'2021-04',
|
||||
'2021-05',
|
||||
'2021-06',
|
||||
'2021-07',
|
||||
'2021-08',
|
||||
'2021-09',
|
||||
'2021-10',
|
||||
'2021-11',
|
||||
'2021-12',
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 50,
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
yAxis: [
|
||||
{
|
||||
name: '件',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::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 {
|
||||
height: 126px;
|
||||
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: rgba(42, 67, 125, 1);
|
||||
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
margin-bottom: 1px;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 126px;
|
||||
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: rgba(42, 67, 125, 1);
|
||||
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
margin-bottom: 1px;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content1 {
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: normal;
|
||||
color: #91d5fe;
|
||||
vertical-align: sub;
|
||||
// margin-right: 3px;
|
||||
font-size: 30px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: normal;
|
||||
color: #91d5fe;
|
||||
vertical-align: sub;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
|
||||
.content2 {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chart2 {
|
||||
height: 100%;
|
||||
}
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chart2 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.tit::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #00ffff;
|
||||
}
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.tit::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #00ffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,65 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3 title="安全隐患整改情况">
|
||||
<div class="wrap">
|
||||
<div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
|
||||
<bigScreenTabs v-model="index" :titleArr="['总厂', '车间']"></bigScreenTabs>
|
||||
</div>
|
||||
<el-row class="content1" style="height: 100%" v-if="index == 0">
|
||||
<el-col :span="14" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</el-col>
|
||||
<el-col :span="10" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="content1" style="height: 100%" v-if="index == 1">
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart3"></div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<el-row style="padding: 0 10px">
|
||||
<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="3">序号</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="3">责任人</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
<div>
|
||||
<container3 title="安全隐患整改情况">
|
||||
<div class="wrap">
|
||||
<div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
|
||||
<bigScreenTabs v-model="index" :titleArr="['总厂', '车间']"></bigScreenTabs>
|
||||
</div>
|
||||
<el-row class="content1" style="height: 100%" v-if="index == 0">
|
||||
<el-col :span="14" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart1"></div>
|
||||
</el-col>
|
||||
<el-col :span="10" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="content1" style="height: 100%" v-if="index == 1">
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart3"></div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<el-row style="padding: 0 10px">
|
||||
<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="3">序号</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="3">责任人</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll ref="seamlessScroll" :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="3">{{ item.id }}</el-col>
|
||||
<el-col style="text-align: center" :span="12">{{ item.name }}</el-col>
|
||||
<el-col style="text-align: center" :span="4">
|
||||
<section class="box">
|
||||
<span v-if="item.status == 1" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||
>·</span
|
||||
>
|
||||
<span v-else style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-if="item.status == 1">已整改</span>
|
||||
<span v-else>未整改</span>
|
||||
</section>
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{ item.txt }}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</container3>
|
||||
</div>
|
||||
}">
|
||||
<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="3">{{ item.id }}</el-col>
|
||||
<el-col style="text-align: center" :span="12">{{ item.dangerContent }}</el-col>
|
||||
<el-col style="text-align: center" :span="4">
|
||||
<section class="box">
|
||||
<span v-if="item.measures == '未整改'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-else style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-if="item.measures == '未整改'">未整改</span>
|
||||
<span v-else>已整改</span>
|
||||
</section>
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{ item.personLiable }}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</container3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -75,472 +69,417 @@ import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
bigScreenTabs,
|
||||
rocketTit,
|
||||
container3,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
colorList,
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
bigScreenTabs,
|
||||
rocketTit,
|
||||
container3,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
index: 0,
|
||||
colorList,
|
||||
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '能昌',
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '葛岚福',
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '酆芳琼',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '酆芳琼',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '酆芳琼',
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
"id": 1,
|
||||
"month": "2021-01",
|
||||
"workshopName": "车间一",
|
||||
"dangerContent": "没有灭火器",
|
||||
"category": "一类",
|
||||
"measures": "已整改",
|
||||
"personLiable": "小明",
|
||||
"remark": "小明xxx",
|
||||
"createTime": null
|
||||
},
|
||||
],
|
||||
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
chart2: null,
|
||||
chart3: null,
|
||||
option: {
|
||||
// legend: {
|
||||
// data: ['利润', '利润目标完成率'],
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: [
|
||||
'2021-01',
|
||||
'2021-02',
|
||||
'2021-03',
|
||||
'2021-04',
|
||||
'2021-05',
|
||||
'2021-06',
|
||||
'2021-07',
|
||||
'2021-08',
|
||||
'2021-09',
|
||||
'2021-10',
|
||||
'2021-11',
|
||||
'2021-12',
|
||||
],
|
||||
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: '#55C5A2',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
// yAxis: {
|
||||
// type: 'value',
|
||||
// splitLine: {
|
||||
// show: false//不显示网格线
|
||||
// },
|
||||
// splitArea: {
|
||||
// show: false//不显示网格区域
|
||||
// },
|
||||
// axisLine: {
|
||||
// lineStyle: {
|
||||
// color: 'rgb(255, 255, 255)'
|
||||
// },
|
||||
// }
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: '利润',
|
||||
// type: 'bar',
|
||||
// data: [
|
||||
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: '利润预测',
|
||||
// type: 'bar',
|
||||
// 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
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// 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]
|
||||
// }
|
||||
dateRange: [],
|
||||
chart1: null,
|
||||
chart2: null,
|
||||
chart3: null,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
index (newOld, oldVal) {
|
||||
if (newOld == 0) {
|
||||
this.chart3.dispose()
|
||||
this.chart3 = null
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
} else {
|
||||
this.chart1.dispose()
|
||||
this.chart1 = null
|
||||
this.chart2.dispose()
|
||||
this.chart2 = null
|
||||
this.$nextTick(() => {
|
||||
this.initChart3()
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
// this.initChart3()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.request({
|
||||
url: '/hx/securityManagement/hiddenDanger/1',
|
||||
method: 'get',
|
||||
// type=1车间/=2总厂
|
||||
params: { type: 2 }
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
let { monthList, mapList, category } = res.data;
|
||||
this.initChart2(category);
|
||||
this.chart1 = echarts.init(this.$refs.chart1)
|
||||
this.chart1.setOption({
|
||||
// legend: {
|
||||
// data: ['利润', '利润目标完成率'],
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: monthList,
|
||||
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),
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
});
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
},
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -43,9 +43,9 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
val: [
|
||||
{ "INITNUMBER": 0, "name": "三人以上", "NOWNUMBER": 0 },
|
||||
{ "INITNUMBER": 0, "name": "十人以上", "NOWNUMBER": 0 }
|
||||
]
|
||||
{ "INITNUMBER": 0, "name": "三人以上", "NOWNUMBER": 0 },
|
||||
{ "INITNUMBER": 0, "name": "十人以上", "NOWNUMBER": 0 }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
Reference in New Issue
Block a user