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

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

@ -2,7 +2,30 @@
<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 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"> <div class="con_title con_title_bg1">
<img src="./img/left1/icon.png" alt="" /> <img src="./img/left1/icon.png" alt="" />
<span style="margin-left: 2px">一级危险点</span> <span style="margin-left: 2px">一级危险点</span>
@ -22,23 +45,26 @@
<span style="margin-left: 2px">三级危险点</span> <span style="margin-left: 2px">三级危险点</span>
</div> </div>
<div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div> <div class="com_img"><img src="./img/left1/icon3.png" alt="" /></div>
</div> </div> -->
<div class="data"> <div class="data">
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">一级危险点/危险源数量</span></div> <div><span style="font-weight: bold">一级危险点/危险源数量</span></div>
<div class="box"><i>20/16</i><span class="num2">个</span></div> <div class="box"><i>{{getItem(pointLevelCount,'一级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'一级').COUNTNUMBER}}</i><span
class="num2">个</span></div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">二级危险点/危险源数量</span></div> <div><span style="font-weight: bold">二级危险点/危险源数量</span></div>
<div class="box"><i>13/23</i><span class="num2">个</span></div> <div class="box"><i>{{getItem(pointLevelCount,'二级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'二级').COUNTNUMBER}}</i><span
class="num2">个</span></div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">三级危险点/危险源数量</span></div> <div><span style="font-weight: bold">三级危险点/危险源数量</span></div>
<div class="box"><i>10/8</i><span class="num2">个</span></div> <div class="box"><i>{{getItem(pointLevelCount,'三级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'三级').COUNTNUMBER}}</i><span
class="num2">个</span></div>
</div> </div>
<div class="data-item"> <div class="data-item">
<div><span style="font-weight: bold">四级危险源数量</span></div> <div><span style="font-weight: bold">四级危险源数量</span></div>
<div class="box"><i>8</i><span class="num2">个</span></div> <div class="box"><i>{{getItem(sourceLevelCount,'四级').COUNTNUMBER}}</i><span class="num2">个</span></div>
</div> </div>
</div> </div>
</container3> </container3>
@ -61,12 +87,97 @@ export default {
rocketTit, rocketTit,
progressBar, progressBar,
}, },
data() { data () {
return {} 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;
}
})
}
}, },
mounted() {},
beforeDestroy() {},
methods: {},
} }
</script> </script>
@ -147,13 +258,13 @@ export default {
} }
} }
.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;

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

@ -12,19 +12,15 @@
<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 in scrollList" :key="item.id"> <li v-for="(item,index) in scrollList1" :key="index">
<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.name }}</el-col> <el-col style="text-align: center" :span="8">{{ item.deptName }}</el-col>
<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col> <el-col style="text-align: center" :span="12">{{ item.workContent }}</el-col>
</el-row> </el-row>
</li> </li>
</ul> </ul>
@ -38,19 +34,15 @@
<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="seamlessScroll2" :data="listData2" 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,index) in scrollList2" :key="index">
<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.name }}</el-col> <el-col style="text-align: center" :span="8">{{ item.deptName }}</el-col>
<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col> <el-col style="text-align: center" :span="12">{{ item.workContent }}</el-col>
</el-row> </el-row>
</li> </li>
</ul> </ul>
@ -77,55 +69,79 @@ export default {
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: '易燃作业',
},
{
id: 5,
name: '部门五',
txt: '易燃作业',
},
],
} }
}, },
mounted() { 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(() => { 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);
} }
}) })
} }

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

@ -18,7 +18,7 @@
</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">
@ -29,41 +29,28 @@
<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 in scrollList" :key="item.id"> <li v-for="(item,index) in points" :key="index">
<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.name }}</el-col> <el-col style="text-align: center" :span="7">{{ item.pointName }}</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">
<el-tag {{ item.level }}</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-tag v-else style="background-color: unset" effect="plain"> {{ item.level }}</el-tag>
</el-col> </el-col>
<el-col style="text-align: center" :span="7"> <el-col style="text-align: center" :span="7">
<section class="box"> <section class="box">
<span v-if="item.status == 1" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span> <span v-if="item.status == '运行中'" 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 v-else-if="item.status == '已损坏'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
>·</span
>
<span v-else style="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-if="item.status == '运行中'">运行中</span>
<span v-else-if="item.status == 3">已损坏</span> <span v-else-if="item.status == '已损坏'">已损坏</span>
<span v-else>未开始</span> <span v-else>未开始</span>
</section> </section>
</el-col> </el-col>
@ -100,7 +87,7 @@ export default {
progressBar, progressBar,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data() { data () {
return { return {
data: [ data: [
{ value: 154, name: '类别一' }, { value: 154, name: '类别一' },
@ -113,53 +100,73 @@ export default {
{ 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, "id": 1,
name: '危险点一', "pointName": "1号大门",
level: '一级', "deptName": "部门七",
status: 1, "level": "一级",
"status": "运行中",
"abscissa": "55%",
"ordinate": "65%",
"rtmpAddress": "baiddakdnkad",
"remark": "没有备注",
"createTime": null
}, },
{ {
id: 2, "id": 2,
name: '危险点二', "pointName": "1号大门",
level: '二级', "deptName": "部门七",
status: 2, "level": "一级",
"status": "运行中",
"abscissa": "55%",
"ordinate": "65%",
"rtmpAddress": "baiddakdnkad",
"remark": "没有备注",
"createTime": null
}, },
{ {
id: 3, "id": 3,
name: '危险点三', "pointName": "1号大门",
level: '三级', "deptName": "部门七",
status: 3, "level": "一级",
"status": "运行中",
"abscissa": "55%",
"ordinate": "65%",
"rtmpAddress": "baiddakdnkad",
"remark": "没有备注",
"createTime": null
}, },
{ {
id: 4, "id": 4,
name: '危险点四', "pointName": "1号大门",
level: '二级', "deptName": "部门七",
status: 2, "level": "一级",
}, "status": "运行中",
{ "abscissa": "55%",
id: 5, "ordinate": "65%",
name: '危险点五', "rtmpAddress": "baiddakdnkad",
level: '三级', "remark": "没有备注",
status: 3, "createTime": null
}, },
], ],
flvPlayer: null, flvPlayer: null,
} }
}, },
mounted() { mounted () {
let videoElement = document.getElementById('videoElement') let videoElement = document.getElementById('videoElement')
this.flvPlayer.attachMediaElement(videoElement) this.flvPlayer.attachMediaElement(videoElement)
this.flvPlayer.load() this.flvPlayer.load()
this.flvPlayer.play() this.flvPlayer.play()
this.$nextTick(() => { this.$nextTick(() => {
this.getData()
// this.initChart() // this.initChart()
// this.initLine() // this.initLine()
}) })
}, },
beforeDestroy() { beforeDestroy () {
this.flvPlayer.player.pause() this.flvPlayer.player.pause()
this.flvPlayer.player.unload() this.flvPlayer.player.unload()
this.flvPlayer.player.detachMediaElement() this.flvPlayer.player.detachMediaElement()
@ -167,11 +174,24 @@ export default {
this.flvPlayer.player = null this.flvPlayer.player = null
}, },
methods: { methods: {
initChart() { 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.chart = echarts.init(this.$refs.left1, 'macarons')
this.setOptions() this.setOptions()
}, },
setOptions() { setOptions () {
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -209,11 +229,11 @@ export default {
], ],
}) })
}, },
initLine() { initLine () {
this.chart = echarts.init(this.$refs.left2) this.chart = echarts.init(this.$refs.left2)
this.setOptions2() this.setOptions2()
}, },
setOptions2() { setOptions2 () {
this.chart.setOption({ this.chart.setOption({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -339,7 +359,7 @@ export default {
}) })
}, },
}, },
created() { created () {
if (flvjs.isSupported()) { if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer( this.flvPlayer = flvjs.createPlayer(
{ {
@ -449,7 +469,7 @@ export default {
padding-left: 15px; padding-left: 15px;
} }
.tit::after { .tit::after {
content: ''; content: "";
display: block; display: block;
position: absolute; position: absolute;
top: 3px; top: 3px;

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

@ -7,7 +7,7 @@
</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>
@ -27,29 +27,23 @@
<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.name }}</el-col> <el-col style="text-align: center" :span="12">{{ item.dangerContent }}</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.status == 1" style="color: #f64f58; font-size: 25px; margin-right: 3px" <span v-if="item.measures == '未整改'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
>·</span
>
<span v-else style="color: #6fd1b4; 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-if="item.measures == '未整改'">未整改</span>
<span v-else>未整改</span> <span v-else>已整改</span>
</section> </section>
</el-col> </el-col>
<el-col style="text-align: center" :span="3">{{ item.txt }}</el-col> <el-col style="text-align: center" :span="3">{{ item.personLiable }}</el-col>
</el-row> </el-row>
</li> </li>
</ul> </ul>
@ -85,7 +79,7 @@ export default {
container3, container3,
vueSeamlessScroll, vueSeamlessScroll,
}, },
data() { data () {
return { return {
index: 0, index: 0,
colorList, colorList,
@ -93,42 +87,69 @@ export default {
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: { }
},
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: { // legend: {
// data: ['利润', '利润目标完成率'], // data: ['利润', '利润目标完成率'],
// textStyle: { // textStyle: {
@ -144,20 +165,7 @@ export default {
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: [ data: monthList,
'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: { axisPointer: {
type: 'shadow', type: 'shadow',
}, },
@ -172,9 +180,6 @@ export default {
{ {
type: 'value', type: 'value',
name: '个', name: '个',
min: 0,
max: 250,
interval: 50,
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
}, },
@ -192,9 +197,6 @@ export default {
}, },
{ {
type: 'value', type: 'value',
min: 0,
max: 25,
interval: 5,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: '{value} %',
}, },
@ -220,16 +222,16 @@ export default {
}, },
dataZoom: { dataZoom: {
type: 'slider', type: 'slider',
textStyle: { start: 0,
color: '#fff', end: this.dataZoomEnd(mapList.length, 5),
},
}, },
series: [ series: [
{ {
name: '利润', name: '利润',
type: 'bar', type: 'bar',
barWidth: 20, 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], 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: { itemStyle: {
color: 'rgb(118,196,166)', color: 'rgb(118,196,166)',
}, },
@ -240,101 +242,21 @@ export default {
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
smooth: false, 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], data: mapList.map(e => e.rate),
itemStyle: { itemStyle: {
color: '#55C5A2', color: '#55C5A2',
}, },
symbol: 'none', 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]
// }
// ]
},
}
},
watch: {
index(newOld, oldVal) {
if (newOld == 0) {
this.chart3.dispose()
this.chart3 = null
this.$nextTick(() => {
this.initChart()
this.initLine()
})
} else { } else {
this.chart.dispose() this.$message.error(res.msg);
this.chart = null
this.chart2.dispose()
this.chart2 = null
this.$nextTick(() => {
this.initChart3()
})
} }
},
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.initLine()
// this.initChart3()
}) })
}, },
beforeDestroy() { initChart2 (category) {
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.chart2 = echarts.init(this.$refs.chart2)
this.setOptions2()
},
initChart3() {
this.chart3 = echarts.init(this.$refs.chart3)
this.setOptions3()
},
setOptions2() {
this.chart2.setOption({ this.chart2.setOption({
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
@ -356,7 +278,7 @@ export default {
}, },
series: [ series: [
{ {
name: '概括', name: '型号',
type: 'pie', type: 'pie',
radius: ['40%', '60%'], radius: ['40%', '60%'],
center: ['45%', '45%'], center: ['45%', '45%'],
@ -377,17 +299,34 @@ export default {
labelLine: { labelLine: {
show: false, show: false,
}, },
data: [ data: category.map(e => {
{ value: 154, name: '型号一' }, return {
{ value: 775, name: '型号二' }, value: e.NUMBERCOUNT, name: e.category
{ value: 679, name: '型号三' }, }
{ value: 679, name: '型号四' }, })
], // data: [
// { value: 154, name: '型号一' },
// { value: 775, name: '型号二' },
// { value: 679, name: '型号三' },
// { value: 679, name: '型号四' },
// ],
}, },
], ],
}) })
}, },
setOptions3() { 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({ this.chart3.setOption({
// legend: { // legend: {
// data: ['利润', '利润目标完成率'], // data: ['利润', '利润目标完成率'],
@ -404,7 +343,8 @@ export default {
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'], data: allWorkshop,
// data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
axisPointer: { axisPointer: {
type: 'shadow', type: 'shadow',
}, },
@ -419,9 +359,6 @@ export default {
{ {
type: 'value', type: 'value',
name: '个', name: '个',
min: 0,
max: 250,
interval: 50,
axisLabel: { axisLabel: {
formatter: '{value}', formatter: '{value}',
}, },
@ -439,9 +376,6 @@ export default {
}, },
{ {
type: 'value', type: 'value',
min: 0,
max: 25,
interval: 5,
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: '{value} %',
}, },
@ -467,16 +401,16 @@ export default {
}, },
dataZoom: { dataZoom: {
type: 'slider', type: 'slider',
textStyle: { start: 0,
color: '#fff', end: this.dataZoomEnd(mapList.length, 5),
},
}, },
series: [ series: [
{ {
name: '利润', name: '利润',
type: 'bar', type: 'bar',
barWidth: 20, 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], 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: { itemStyle: {
color: 'rgb(118,196,166)', color: 'rgb(118,196,166)',
}, },
@ -487,7 +421,8 @@ export default {
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
smooth: false, 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], 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: { itemStyle: {
color: '#7EA7FC ', color: '#7EA7FC ',
}, },
@ -495,7 +430,11 @@ export default {
}, },
], ],
}) })
}
})
}, },
}, },
} }
</script> </script>