diff --git a/src/views/map/components/zhongdian.vue b/src/views/map/components/zhongdian.vue
index de04556..79afba2 100644
--- a/src/views/map/components/zhongdian.vue
+++ b/src/views/map/components/zhongdian.vue
@@ -14,38 +14,10 @@
-
-
+
+
-
-
-
-
{{ item.label }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
公司名称
-
创建数
-
检查次数
-
隐患数量
-
-
-
{{ item.CORP_NAME }}
-
{{ item.OUTSOURCED_COUNT }}
-
{{ item.CHECK_COUNT }}
-
{{ item.HIDDEN_COUNT }}
-
-
+
@@ -72,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,
@@ -96,7 +70,7 @@ export default {
return {
block1OptionsList: [
{
- title: '监控数量',
+ title: '报警数量',
img: require('../../../assets/map/zhongdian/ico1.png'),
count: '-'
},
@@ -134,6 +108,12 @@ export default {
mounted() {
this.initNum()
this.initgetTable()
+ window.onresize = function() {
+ Echarts1 && Echarts1.resize()
+ }
+ },
+ beforeDestroy() {
+ Echarts1 = null
},
methods: {
getCount() {
@@ -156,13 +136,14 @@ export default {
})
},
initNum() {
- requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId }
- ).then((data) => {
- this.block1OptionsList[0].count = data.alarmList.total
- requestFN('/map/mapPlatformelectronic/listAllLocatio', { corpId: this.corpInfoId, TYPE: 'bianjieruqin' }
- ).then((data) => {
- this.block4List = data.alarmList.list
- this.block1OptionsList[0].count = data.alarmList.total
+ requestFN('/map/getAllDwMessage', { corpId: this.corpInfoId, source: '0' }
+ ).then((data0) => {
+ 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[1].count = data1.varList.length
+ this.initEcharts1(data1.iconData)
}).catch((e) => {
this.$message.error(e)
})
@@ -181,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)
}
}
}
@@ -277,68 +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;
}
-
}
}