边界入侵，企业端代码
parent
01efeed0e7
commit
47e9dafc97
|
|
@ -14,38 +14,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="false" class="block2">
|
<div class="block2">
|
||||||
<layout-title title="区域报警数"/>
|
<layout-title title="区域摄像头数量"/>
|
||||||
<div class="options">
|
<div class="options">
|
||||||
<div v-for="(item,index) in block2OptionsList" :key="index" class="option">
|
<div id="main1"/>
|
||||||
<div class="circular"><img :src="item.img" alt=""></div>
|
|
||||||
<div class="info">
|
|
||||||
<div class="title">{{ item.label }}</div>
|
|
||||||
<div class="count">
|
|
||||||
<count-to :start-val="0" :end-val="+item.count" :duration="3600"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="false" class="block3">
|
|
||||||
<layout-title title="安全管理记录"/>
|
|
||||||
<div class="content">
|
|
||||||
<div class="table">
|
|
||||||
<div class="tr">
|
|
||||||
<div class="td">公司名称</div>
|
|
||||||
<div class="td">创建数</div>
|
|
||||||
<div class="td">检查次数</div>
|
|
||||||
<div class="td">隐患数量</div>
|
|
||||||
</div>
|
|
||||||
<div v-for="(item,index) in block3List" :key="index" class="tr">
|
|
||||||
<div class="td">{{ item.CORP_NAME }}</div>
|
|
||||||
<div class="td">{{ item.OUTSOURCED_COUNT }}</div>
|
|
||||||
<div class="td">{{ item.CHECK_COUNT }}</div>
|
|
||||||
<div class="td">{{ item.HIDDEN_COUNT }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="block4">
|
<div class="block4">
|
||||||
|
|
@ -72,7 +44,9 @@
|
||||||
import layoutTitle from './title.vue'
|
import layoutTitle from './title.vue'
|
||||||
import CountTo from 'vue-count-to'
|
import CountTo from 'vue-count-to'
|
||||||
import { requestFN } from '@/utils/request'
|
import { requestFN } from '@/utils/request'
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
|
||||||
|
let Echarts1
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
CountTo,
|
CountTo,
|
||||||
|
|
@ -96,7 +70,7 @@ export default {
|
||||||
return {
|
return {
|
||||||
block1OptionsList: [
|
block1OptionsList: [
|
||||||
{
|
{
|
||||||
title: '监控数量',
|
title: '报警数量',
|
||||||
img: require('../../../assets/map/zhongdian/ico1.png'),
|
img: require('../../../assets/map/zhongdian/ico1.png'),
|
||||||
count: '-'
|
count: '-'
|
||||||
},
|
},
|
||||||
|
|
@ -134,6 +108,12 @@ export default {
|
||||||
mounted() {
|
mounted() {
|
||||||
this.initNum()
|
this.initNum()
|
||||||
this.initgetTable()
|
this.initgetTable()
|
||||||
|
window.onresize = function() {
|
||||||
|
Echarts1 && Echarts1.resize()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
Echarts1 = null
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getCount() {
|
getCount() {
|
||||||
|
|
@ -156,13 +136,14 @@ export default {
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
initNum() {
|
initNum() {
|
||||||
requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId }
|
requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId, source: '0' }
|
||||||
).then((data) => {
|
).then((data0) => {
|
||||||
this.block1OptionsList[0].count = data.alarmList.total
|
this.block1OptionsList[0].count = data0.alarmList.page.total
|
||||||
requestFN('/map/mapPlatformelectronic/listAllLocatio', { corpId: this.corpInfoId, TYPE: 'bianjieruqin' }
|
requestFN('/map/mapPlatformelectronic/listAllLocation', { corpId: this.corpInfoId, TYPE: 'bianjieruqin' }
|
||||||
).then((data) => {
|
).then((data1) => {
|
||||||
this.block4List = data.alarmList.list
|
this.block4List = data0.alarmList.list
|
||||||
this.block1OptionsList[0].count = data.alarmList.total
|
this.block1OptionsList[1].count = data1.varList.length
|
||||||
|
this.initEcharts1(data1.iconData)
|
||||||
}).catch((e) => {
|
}).catch((e) => {
|
||||||
this.$message.error(e)
|
this.$message.error(e)
|
||||||
})
|
})
|
||||||
|
|
@ -181,6 +162,112 @@ export default {
|
||||||
).then((data) => {
|
).then((data) => {
|
||||||
this.block3List = data.varList
|
this.block3List = data.varList
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
initEcharts1(data) {
|
||||||
|
console.log(data)
|
||||||
|
const XaxisData = []
|
||||||
|
const seriesData1 = []
|
||||||
|
for (const optionKey in data) {
|
||||||
|
console.log(data[optionKey])
|
||||||
|
for (let i = 0; i < data[optionKey].length; i++) {
|
||||||
|
console.log(data[optionKey][i])
|
||||||
|
XaxisData.push(data[optionKey][i].NAME)
|
||||||
|
seriesData1.push(data[optionKey][i].num)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-undef
|
||||||
|
Echarts1 = echarts.init(document.querySelector('#main1'))
|
||||||
|
const option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '2%',
|
||||||
|
right: '4%',
|
||||||
|
bottom: '5%',
|
||||||
|
top: '12%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '0%',
|
||||||
|
right: '0%',
|
||||||
|
textStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 10
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: XaxisData,
|
||||||
|
axisLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
max: '50',
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#8c9493'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '摄像头',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '10%',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: new echarts.graphic.LinearGradient(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
1,
|
||||||
|
[
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#00f0ff'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#0066ff'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
false
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: seriesData1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
Echarts1.setOption(option)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -277,68 +364,11 @@ export default {
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
height: 150px;
|
|
||||||
|
|
||||||
.option {
|
|
||||||
width: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
justify-content: space-around;
|
|
||||||
|
|
||||||
.circular {
|
|
||||||
margin-top: 5px;
|
|
||||||
background-image: url("../../../assets/map/anquan/icobg.png");
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 13px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 25px;
|
|
||||||
height: 26px;
|
|
||||||
animation: slideY 2s infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.title {
|
|
||||||
background-image: url("../../../assets/map/anquan/label.png");
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
width: 120px;
|
|
||||||
height: 24px;
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 25px;
|
|
||||||
text-align: center;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count {
|
|
||||||
margin-top: 10px;
|
|
||||||
font-size: 24px;
|
|
||||||
background: linear-gradient(to top, #48bbf0, #ffffff);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
font-weight: bold;
|
|
||||||
font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
#main1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue