From 47e9dafc97c25b272d8bc9fa6f541d8331c5cce1 Mon Sep 17 00:00:00 2001 From: liujun Date: Thu, 27 Jun 2024 13:21:15 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BE=B9=E7=95=8C=E5=85=A5=E4=BE=B5=EF=BC=8C?= =?UTF-8?q?=E4=BC=81=E4=B8=9A=E7=AB=AF=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/map/components/zhongdian.vue | 228 ++++++++++++++----------- 1 file changed, 129 insertions(+), 99 deletions(-) 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; } - } }