From a78960d1071d3a00e16597882f0fef8b0fbff2c3 Mon Sep 17 00:00:00 2001 From: liujun Date: Tue, 25 Jun 2024 17:55:04 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BE=B9=E7=95=8C=E5=85=A5=E4=BE=B5=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=9C=B0=E5=9B=BE=E7=9B=91=E7=AE=A1=E6=AE=B5=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/map/components/zhongdian.vue | 215 +++++++++++++++---------- 1 file changed, 126 insertions(+), 89 deletions(-) diff --git a/src/views/map/components/zhongdian.vue b/src/views/map/components/zhongdian.vue index 6e1fb57..79afba2 100644 --- a/src/views/map/components/zhongdian.vue +++ b/src/views/map/components/zhongdian.vue @@ -14,35 +14,10 @@ -
- +
+
-
-
-
-
{{ item.label }}
-
-
-
-
-
-
- -
-
-
-
公司名称
-
创建数
-
检查次数
-
隐患数量
-
-
-
{{ item.CORP_NAME }}
-
{{ item.OUTSOURCED_COUNT }}
-
{{ item.CHECK_COUNT }}
-
{{ item.HIDDEN_COUNT }}
-
-
+
@@ -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);