边界入侵功能地图监管段代码
parent
5eb8bd0484
commit
a78960d107
|
|
@ -14,35 +14,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="false" class="block2">
|
||||
<layout-title title="区域报警数"/>
|
||||
<div class="block2">
|
||||
<layout-title title="区域摄像头数量"/>
|
||||
<div class="options">
|
||||
<div v-for="(item,index) in block2OptionsList" :key="index" class="option">
|
||||
<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 id="main1"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="block4">
|
||||
|
|
@ -69,7 +44,9 @@
|
|||
import layoutTitle from './title.vue'
|
||||
import CountTo from 'vue-count-to'
|
||||
import { requestFN } from '@/utils/request'
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
let Echarts1
|
||||
export default {
|
||||
components: {
|
||||
CountTo,
|
||||
|
|
@ -131,6 +108,12 @@ export default {
|
|||
mounted() {
|
||||
this.initNum()
|
||||
this.initgetTable()
|
||||
window.onresize = function() {
|
||||
Echarts1 && Echarts1.resize()
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
Echarts1 = null
|
||||
},
|
||||
methods: {
|
||||
getCount() {
|
||||
|
|
@ -153,13 +136,14 @@ export default {
|
|||
})
|
||||
},
|
||||
initNum() {
|
||||
requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId }
|
||||
requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId, source: '0' }
|
||||
).then((data0) => {
|
||||
this.block1OptionsList[0].count = data0.alarmList.total
|
||||
this.block1OptionsList[0].count = data0.alarmList.page.total
|
||||
requestFN('/map/mapPlatformelectronic/listAllLocation', { corpId: this.corpInfoId, TYPE: 'bianjieruqin' }
|
||||
).then((data1) => {
|
||||
this.block4List = data0.alarmList.list
|
||||
this.block1OptionsList[0].count = data1.varList.total
|
||||
this.block1OptionsList[1].count = data1.varList.length
|
||||
this.initEcharts1(data1.iconData)
|
||||
}).catch((e) => {
|
||||
this.$message.error(e)
|
||||
})
|
||||
|
|
@ -178,6 +162,112 @@ export default {
|
|||
).then((data) => {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -263,6 +353,7 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block2 {
|
||||
width: 410px;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
|
||||
|
|
@ -273,66 +364,11 @@ export default {
|
|||
border: 1px solid;
|
||||
border-image: linear-gradient(to bottom, rgba(58, 122, 149, 0), rgba(58, 122, 149, 1)) 1;
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -432,6 +468,7 @@ export default {
|
|||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideY {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
|
|
|
|||
Loading…
Reference in New Issue