diff --git a/src/supermap/image/waterPoint4.png b/src/supermap/image/waterPoint4.png new file mode 100644 index 0000000..bc69fe1 Binary files /dev/null and b/src/supermap/image/waterPoint4.png differ diff --git a/src/supermap/map-showResource.js b/src/supermap/map-showResource.js index 868e4fd..16069ef 100644 --- a/src/supermap/map-showResource.js +++ b/src/supermap/map-showResource.js @@ -19,18 +19,18 @@ const restoreIconObj = { restoreIcon: null, currentLayer: null } -const progress = document.getElementById('progress'); -const progressBar = document.getElementById('progress-bar'); +const progress = document.getElementById('progress') +const progressBar = document.getElementById('progress-bar') function updateProgressBar(processed, total, elapsed, layersArray) { if (elapsed > 1000) { // if it takes more than a second to load, display the progress bar: - progress.style.display = 'block'; - progressBar.style.width = Math.round(processed/total*100) + '%'; + progress.style.display = 'block' + progressBar.style.width = Math.round(processed / total * 100) + '%' } if (processed === total) { // all markers processed - hide the progress bar: - progress.style.display = 'none'; + progress.style.display = 'none' } } /** @@ -38,11 +38,11 @@ function updateProgressBar(processed, total, elapsed, layersArray) { * @param layerClassName 据此判断是否需要自定义聚合图层的样式 * @returns {*} */ -function createMarkerClusterLayer (layerClassName) { +function createMarkerClusterLayer(layerClassName) { let markerClusterLayer = null if (layerClassName) { // 如果存在类名，表示需要自定义图标 markerClusterLayer = L.markerClusterGroup({ - iconCreateFunction (cluster) { + iconCreateFunction(cluster) { const markers = cluster.getAllChildMarkers() let n = 0 for (let i = 0; i < markers.length; i++) { @@ -80,7 +80,7 @@ function createMarkerClusterLayer (layerClassName) { * @param doChunk 处理数据的函数 * @param chunkCompleted 数据处理完以后执行的函数 */ -function chunkData (data, doChunk, chunkCompleted) { +function chunkData(data, doChunk, chunkCompleted) { const chunk = data.splice(0, 1000) doChunk(chunk) if (data.length > 0) { @@ -107,7 +107,7 @@ function chunkData (data, doChunk, chunkCompleted) { * @param layerGroup * @return {*|void} layer对象，可以直接用map的removeLayer删除 */ -function addPointOnMap ({ +function addPointOnMap({ feature, iconSize = [48, 48], iconUrl = 'poi.png', @@ -168,7 +168,7 @@ function addPointOnMap ({ * @returns {Promise} * @private */ -function createPromiseByQueryService (idArray = [], layerConfigInfo, type = '') { +function createPromiseByQueryService(idArray = [], layerConfigInfo, type = '') { const queryUrl = _mapConfig.config.QUERY_URL // 构造查询条件authorityFilter let authorityFilter = '' @@ -223,7 +223,7 @@ function createPromiseByQueryService (idArray = [], layerConfigInfo, type = '') * @param {*} * @return {*} */ -function addResourceOnMapNew (features, layerConfig, getLayerPopupInfo, createPopupFun, +function addResourceOnMapNew(features, layerConfig, getLayerPopupInfo, createPopupFun, mapObj, featureGroup, layerGroup) { // 如果资源要素数量为0，则说明该种资源没有记录 if (features.length < 1) { @@ -298,7 +298,7 @@ function addResourceOnMapNew (features, layerConfig, getLayerPopupInfo, createPo * @return {*} * @private */ -function addResourceOnMap ({ +function addResourceOnMap({ features, layerName, layerConfigInfo, @@ -312,7 +312,7 @@ function addResourceOnMap ({ replaceIconUrl = '/src/supermap/image/poi.png', replaceIconSize = [44, 44] } = {}, mapObj, featureGroup, layerGroup) { -// debugger; + // debugger; console.log('上图数据', layerClassName) // 如果资源要素数量为0，则说明该种资源没有记录 if (features.length < 1) { @@ -369,11 +369,11 @@ function addResourceOnMap ({ console.log('图标点击e', e) // 判断是否需要选中之后更换marker的图标 if (clickReplaceIcon) { - // 先把之前选中的图标切换回来 - // const previousLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId); - // if (previousLayer) { - // previousLayer.setIcon(icon); - // } + // 先把之前选中的图标切换回来 + // const previousLayer = layerGroup.get(layerName).getLayer(restoreIconObj.layerId); + // if (previousLayer) { + // previousLayer.setIcon(icon); + // } const layers = layerGroup.get(layerName).getLayers() layers.forEach(layer => { layer.setIcon(icon) @@ -390,11 +390,11 @@ function addResourceOnMap ({ let type = null // 根据layerName1 传递不同的 resourceType switch (e.sourceTarget.layerConfigInfo.layerName1) { - // 直升机起降点 + // 直升机起降点 case 'f_helicopter': type = 'resourceHelicopter' break - // 物资储备库 + // 物资储备库 case 'f_repository': type = 'resourceStorage' break @@ -417,7 +417,7 @@ function addResourceOnMap ({ case 'f_check_station': type = 'resourceProtection' break - // 墓地 + // 墓地 case 'f_cemetery': type = 'resourceProtection' break @@ -458,7 +458,7 @@ function addResourceOnMap ({ }) } // 根据类型返回具体用聚合图层的样式。 -function typeToStyle (layerName) { +function typeToStyle(layerName) { let returnStyle = null const typeToImg = { fireForest: 'multi-marker-cluster-resource-protection', @@ -495,7 +495,7 @@ function typeToStyle (layerName) { return returnStyle } // 无聚合上图 =》阳性人员路径 -function addResourceOnMapWithoutSuperMap ( +function addResourceOnMapWithoutSuperMap( features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) { // 如果资源要素数量为0，则说明该种资源没有记录 // if (features.length < 1) { @@ -519,10 +519,10 @@ function addResourceOnMapWithoutSuperMap ( const marker = L.marker(feature.latLng, { icon }) // marker.zjmc = feature.zjmc marker.bindTooltip('

' + numArr[index] + '' + - feature.traveladdress + '(' + feature.count + '次)

' - , { - permanent: true - }) + feature.traveladdress + '(' + feature.count + '次)

' + , { + permanent: true + }) L.tooltipLayout.resetMarker(marker) if (createPopupFun !== null) { marker.on('click', async e => { @@ -551,7 +551,7 @@ function addResourceOnMapWithoutSuperMap ( // L.layerGroup.addLayer(layers) } // 道路污染治理专题-点位上图 -function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) { +function addPointsToMap(features, url, lastOne, createPopupFun, DS, featureGroup, layerGroup, map) { // 如果资源要素数量为0，则说明该种资源没有记录 // if (features.length < 1) { // return Promise.resolve(0); @@ -564,7 +564,7 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou // layers = createMarkerClusterLayer(defaultStyle) const icon = createDefaultFeatureStyle({ img: url || 'the-head.png', - iconSize: url == ('construction.png'||url == 'waterPoint2.png'||url == 'waterPoint1.png'||url == 'waterPoint3.png')?[37,49]:[36, 36], + iconSize: url == ('construction.png' || url == 'waterPoint2.png' || url == 'waterPoint1.png' || url == 'waterPoint3.png' || url == 'waterPoint4.png') ? [37, 49] : [36, 36] }) const arr = [] features.map((feature, index) => { @@ -582,15 +582,15 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou marker.on('click', async e => { const elementHtml = createPopupFun(feature) if (elementHtml) { - if(feature.type=='road'){ - L.popup({ className: 'roadGovernance-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } else if(feature.type=='site'){ - L.popup({ className: 'site-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } else if(feature.type=='siteRoad'){ - L.popup({ className: 'site-road-popup', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } else if(feature.type=='waterPoint'){ - L.popup({ className: 'water-point-pop', keepInView: false,}).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) - } else{ + if (feature.type == 'road') { + L.popup({ className: 'roadGovernance-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else if (feature.type == 'site') { + L.popup({ className: 'site-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else if (feature.type == 'siteRoad') { + L.popup({ className: 'site-road-popup', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else if (feature.type == 'waterPoint') { + L.popup({ className: 'water-point-pop', keepInView: false }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) + } else { L.popup({ className: 'epidemic-address', keepInView: false, maxHeight: 300 }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map) } } @@ -635,7 +635,7 @@ function addPointsToMap (features, url, lastOne, createPopupFun, DS, featureGrou * @return {*} * @private */ -function addResourceOnMapWithoutSuper ({ +function addResourceOnMapWithoutSuper({ features, layerName, layerConfigInfo, @@ -727,11 +727,11 @@ function addResourceOnMapWithoutSuper ({ case 'wf_storage': resourceType = 'resourceStorage' break - // 应急队伍 + // 应急队伍 case 'wf_team': resourceType = 'resourceTeam' break - // 危险源 + // 危险源 case 'wf_danger': resourceType = 'resourceDanger' break @@ -774,7 +774,7 @@ function addResourceOnMapWithoutSuper ({ chunkData(features, doChunk, chunkCompleted) }) } -async function myGetLayerPopupInfo (resId, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName) { +async function myGetLayerPopupInfo(resId, layerConfigInfo, type, mapObj, latLng, createPopupFun, getLayerPopupInfo, popupClassName) { const response = await getLayerPopupInfo(resId, layerConfigInfo, type) // debugger; console.log(response) diff --git a/src/views/pages/waterPoints/components/ComplaintEvent.vue b/src/views/pages/waterPoints/components/ComplaintEvent.vue index d09a821..eec3bd6 100644 --- a/src/views/pages/waterPoints/components/ComplaintEvent.vue +++ b/src/views/pages/waterPoints/components/ComplaintEvent.vue @@ -23,7 +23,14 @@ -
总数：{{allNum}}个
+
总数：{{allNum}}个
+
+ + + + +
+
30cm)', '影响行人(<30cm)', '无积水(<10cm)'], + type: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'], processStateSelect: ['全部', '未派发', '未处置', '已处置'], processStateSelectActive: '全部', - typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'] + typeActive: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'] }, eventListData: [], preTime: '', @@ -130,7 +137,8 @@ export default { listAll: [], policeList: [], // 单项总数 - allNum: 0 + allNum: 0, + reportType: '随手拍' } }, components: { @@ -161,10 +169,18 @@ export default { selectWaterPoliceList().then((policeRes) => { this.policeList = policeRes.data.data || [] const dataAll = [...res.data.data, ...policeRes.data.data] - this.list = dataAll + // this.list = dataAll this.listAll = dataAll + this.allNum = this.listAll.length + // bus.$emit('waterPoint', dataAll) + this.list = [] + this.listAll.forEach(tempItem => { + if (tempItem.reportOrigin === 'auditorReport') { + this.list.push(tempItem) + } + }) this.allNum = this.list.length - bus.$emit('waterPoint', dataAll) + bus.$emit('waterPoint', this.list) }) // this.list = res.data.data // this.listAll = res.data.data @@ -187,7 +203,7 @@ export default { return `影响行人(${deepth}cm)` break default: - return `无积水(${deepth}cm)` + return `无积水或少量积水(${deepth}cm)` break } }, @@ -204,7 +220,7 @@ export default { case '影响行人(<30cm)': this.list = this.list.filter(v => v.pointLevel != 'pedestrian') break - case '无积水(<10cm)': + case '无积水或少量积水(<10cm)': this.list = this.list.filter(v => v.pointLevel != 'non') break } @@ -221,7 +237,7 @@ export default { case '影响行人(<30cm)': this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'pedestrian')) break - case '无积水(<10cm)': + case '无积水或少量积水(<10cm)': this.list = this.list.concat(this.listAll.filter(v => v.pointLevel == 'non')) break } @@ -234,7 +250,7 @@ export default { tabHandleClick (item) { this.allNum = 0 this.tabsActiveName = item.title - this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'] + this.filterButton.typeActive = ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'] if (item.title == '全部') { selectWaterPoint().then((res) => { @@ -259,6 +275,20 @@ export default { }) this.allNum = this.list.length bus.$emit('waterPoint', this.list) + } else if (item.id == 'commonReport') { + if (this.reportType == '随手拍') { + selectReportOrigin({ reportOrigin: 'case' }).then((res) => { + this.list = res.data.data + this.allNum = this.list.length + bus.$emit('waterPoint', res.data.data) + }) + } else if (this.reportType == '爱山东') { + selectReportOrigin({ reportOrigin: 'commonReport' }).then((res) => { + this.list = res.data.data + this.allNum = this.list.length + bus.$emit('waterPoint', res.data.data) + }) + } } else { selectReportOrigin({ reportOrigin: item.id }).then((res) => { this.list = res.data.data @@ -356,6 +386,14 @@ export default { openDialog (item) { bus.$emit('openWaterPointDialog', item) + }, + // 爱山东、随手拍 + reportTypeChange (item) { + this.reportType = item + this.tabHandleClick({ + title: '群众上报', + id: 'commonReport' + }) } } } @@ -504,6 +542,21 @@ export default { .allNum { color: #ffffff; margin: 12px 0px 0 12px; + display: flex; + justify-content: space-between; + ::v-deep .el-radio-button__inner { + background: rgba(24, 51, 76, 0.95); + color: #ffffff; + border: none; + width: 70px; + padding: 6px; + border-radius: 2px; + } + ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner { + background: #279ff5; + border: none; + margin-right: 2px; + } } .filter-btn-box { margin-top: 16px; @@ -701,13 +754,13 @@ export default { .box3 { color: #fff; margin-top: 10px; - height: 600px; + height: 565px; overflow-y: scroll; cursor: pointer; .item { - margin-top: 10px; + margin-top: 8px; background: rgba(5, 33, 59, 0.35); - padding: 10px; + padding: 6px 10px; .top { display: flex; justify-content: space-between; @@ -716,7 +769,7 @@ export default { } .name { font-weight: 600; - font-size: 14px; + font-size: 16px; } .topType { margin-left: 5px; @@ -743,6 +796,9 @@ export default { .green { background: #31d779; } + .type { + font-size: 14px; + } } .bottom { margin-top: 10px; diff --git a/src/views/pages/waterPoints/components/SiteList.vue b/src/views/pages/waterPoints/components/SiteList.vue index ae6bd4a..52a448e 100644 --- a/src/views/pages/waterPoints/components/SiteList.vue +++ b/src/views/pages/waterPoints/components/SiteList.vue @@ -1,9 +1,11 @@ @@ -334,7 +430,7 @@ export default { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; - font-family: 'Tensentype-ZhiHeiJ-W5'; + font-family: "Tensentype-ZhiHeiJ-W5"; } .time { text-align: left; @@ -414,13 +510,19 @@ export default { } & > div:last-child { width: 40%; - height: 165px; + // height: 165px; } } - #analysis-of-water-source,#analysis-of-water-level { + #analysis-of-water-source, + #analysis-of-water-level { width: 100%; height: 165px; margin: 22px; } + #event-type-chart { + width: 100%; + height: 207px; + margin: 22px 0; + } } diff --git a/src/views/pages/waterPoints/components/WaterHistory.vue b/src/views/pages/waterPoints/components/WaterHistory.vue index 8346b3e..e0b0a39 100644 --- a/src/views/pages/waterPoints/components/WaterHistory.vue +++ b/src/views/pages/waterPoints/components/WaterHistory.vue @@ -90,7 +90,7 @@ export default { selectWaterPondingInDay({ water_point_id: this.feature.data.waterPointId, year: String(this.dateYearData[0]), month: String(this.dateYearData[1]), day: String(this.dateYearData[2]) }).then((res) => { console.log(res.data.data, 'res') res.data.data.map(val => { - this.depthDayX.push(val.hour + ':' + val.minute) + this.depthDayX.push((val.hour > 9 ? val.hour : '0' + val.hour) + ':' + (val.minute > 9 ? val.minute : '0' + val.minute)) this.depthDayY.push(Number(val.depth) * 100) }) console.log(this.depthDayX, this.depthDayY, ' this.depthDayX') diff --git a/src/views/pages/waterPoints/components/WaterPointPop.vue b/src/views/pages/waterPoints/components/WaterPointPop.vue index 4566ddf..3748c2b 100644 --- a/src/views/pages/waterPoints/components/WaterPointPop.vue +++ b/src/views/pages/waterPoints/components/WaterPointPop.vue @@ -69,7 +69,7 @@ 更新时间: {{ feature.data.updatedDate || "" }}
- +
@@ -141,7 +141,7 @@ export default { } else if (data.pointLevel == 'pedestrian') { return '影响行人(<30cm)' } else { - return '无积水(<10cm)' + return '无积水或少量积水(<10cm)' } }, typeSelect (item) { diff --git a/src/views/pages/waterPoints/index.vue b/src/views/pages/waterPoints/index.vue index 8b7e854..7a4692d 100644 --- a/src/views/pages/waterPoints/index.vue +++ b/src/views/pages/waterPoints/index.vue @@ -46,20 +46,17 @@
- -
- +
-
@@ -71,18 +68,18 @@
-
+
@@ -99,7 +96,7 @@ import complaintEvent from './components/ComplaintEvent' import VideoList from './components/VideoList' import SiteList from './components/SiteList' import { selectByJdWd } from '@/api/construction/index' -import { createSiteListPop, createCameraDetailsPop,createWaterPointPop } from '@/supermap/createMarkerPopup' +import { createSiteListPop, createCameraDetailsPop, createWaterPointPop } from '@/supermap/createMarkerPopup' import VideoPlay from './components/VideoPlay' export default { @@ -113,9 +110,9 @@ export default { // changeLayerBtnList: ['视频监控', '易积水点'], changeLayerBtnList: ['易积水点'], changeLayerBtnGroup: [], - eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水(<10cm)'], + eventCheckList: ['影响车辆(>30cm)', '影响行人(<30cm)', '无积水或少量积水(<10cm)'], openVideo: false, - channelCode:[] + channelCode: [] } }, @@ -180,7 +177,7 @@ export default { bus.$off('openWaterPointDialog') bus.$on('openWaterPointDialog', (item) => { - this.hiMap.mapObj.map.flyTo({ lat: item.latitude, lng: item.longitude },16) + this.hiMap.mapObj.map.flyTo({ lat: item.latitude, lng: item.longitude }, 16) // this.WithinRadiusSite(latLng); // const dataEvent = [{ // latLng: { lat: item.latitude, lng: item.longitude }, @@ -196,11 +193,10 @@ export default { }) bus.$off('openCurrentVideoWaterPoint') - bus.$on('openCurrentVideoWaterPoint',channelCode => { - this.openVideo = true; + bus.$on('openCurrentVideoWaterPoint', channelCode => { + this.openVideo = true this.channelCode.unshift(channelCode) }) - }, methods: { querySearchAsync (queryString, cb) { @@ -372,51 +368,54 @@ export default { this.hiMapFun.removeLayerByLayerName('waterPoint1') this.hiMapFun.removeLayerByLayerName('waterPoint2') this.hiMapFun.removeLayerByLayerName('waterPoint3') + this.hiMapFun.removeLayerByLayerName('waterPoint4') const dataEvent1 = [] const dataEvent2 = [] const dataEvent3 = [] + const dataEvent4 = [] data.forEach((item) => { const arr = [0, 0.0, '', '0', '0.0'] if (arr.indexOf(item.longitude) == -1) { - switch(item.pointLevel){ + switch (item.pointLevel) { case 'non': dataEvent1.push({ latLng: { lat: Number(item.latitude), lng: Number(item.longitude) }, data: item, type: 'waterPoint' }) - break; + break case 'pedestrian': dataEvent2.push({ latLng: { lat: Number(item.latitude), lng: Number(item.longitude) }, data: item, type: 'waterPoint' }) - break; + break case 'traffic': - dataEvent3.push({ + dataEvent3.push({ latLng: { lat: Number(item.latitude), lng: Number(item.longitude) }, data: item, type: 'waterPoint' }) - break; + break default: - dataEvent1.push({ + dataEvent4.push({ latLng: { lat: Number(item.latitude), lng: Number(item.longitude) }, data: item, type: 'waterPoint' }) - break; + break } } }) this.hiMapFun.addPointsToMap(dataEvent1, 'waterPoint1.png', 'waterPoint1', createWaterPointPop) this.hiMapFun.addPointsToMap(dataEvent2, 'waterPoint2.png', 'waterPoint2', createWaterPointPop) this.hiMapFun.addPointsToMap(dataEvent3, 'waterPoint3.png', 'waterPoint3', createWaterPointPop) + this.hiMapFun.addPointsToMap(dataEvent4, 'waterPoint4.png', 'waterPoint4', createWaterPointPop) }, - selectType(item){ + selectType (item) { this.$refs.complaintEventRef.selectType(item) } }, @@ -427,7 +426,7 @@ export default { @import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css); @font-face { - font-family: 'Tensentype-ZhiHeiJ-W5'; + font-family: "Tensentype-ZhiHeiJ-W5"; src: url("../../../assets/construction/TTZhiHeiJ-W5.ttf"); } .map-box { @@ -456,11 +455,11 @@ export default { background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; - font-family: 'Tensentype-ZhiHeiJ-W5'; + font-family: "Tensentype-ZhiHeiJ-W5"; } .title::before { - content: '青岛市易积水点地图'; - text-shadow: 0px 3px 10px rgba(0,0,0,.9); + content: "青岛市易积水点地图"; + text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.9); position: absolute; z-index: -1; } @@ -471,20 +470,20 @@ export default { z-index: 1000; left: 496px; top: 90px; - border: 1px solid rgba(31,254,253,.9); + border: 1px solid rgba(31, 254, 253, 0.9); ::v-deep .el-input__inner { color: #fff; - background: rgba($color: #203b5d, $alpha: .8); + background: rgba($color: #203b5d, $alpha: 0.8); width: 226px; height: 36px; - border:none; + border: none; &::placeholder { color: rgba($color: #fff, $alpha: 0.6); } } ::v-deep .el-input__prefix { top: -1px; - color: rgba(31,254,253,.9); + color: rgba(31, 254, 253, 0.9); } ::v-deep .el-input-group__append { width: 54px; @@ -503,7 +502,7 @@ export default { z-index: -1 !important; width: 226px !important; left: 0px !important; - background: rgba(32,59,93,.8); + background: rgba(32, 59, 93, 0.8); border: 1px solid #1ffefd; li { color: #fff; @@ -519,9 +518,9 @@ export default { z-index: 1000; left: 10px; top: 90px; - height:908px; + height: 908px; width: 478px; - background: rgba($color: #05213b, $alpha: .85) + background: rgba($color: #05213b, $alpha: 0.85); } .eventNum { @@ -542,7 +541,7 @@ export default { span { font-size: 46px; font-weight: bold; - background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100% ); + background: linear-gradient(0deg, #91f4f8 0%, #ffffff 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; @@ -558,23 +557,23 @@ export default { top: 92px; width: 398px; // height:460px; - background: rgba($color: #05213b, $alpha: .85); + background: rgba($color: #05213b, $alpha: 0.85); } .siteList { position: absolute; z-index: 1000; right: 8px; - top: 660px; + top: 703px; width: 398px; // height:500px; - background: rgba($color: #05213b, $alpha: .85); + background: rgba($color: #05213b, $alpha: 0.85); } .changeLayer { width: 332px; height: 67px; - background: rgba(7,26,44,.8); + background: rgba(7, 26, 44, 0.8); position: absolute; bottom: 10px; left: 50%; @@ -585,7 +584,7 @@ export default { width: 96px; height: 100%; font-size: 16px; - color: rgba(255,255,255,.6); + color: rgba(255, 255, 255, 0.6); text-align: center; line-height: 67px; } @@ -596,17 +595,16 @@ export default { padding-left: 20px; ::v-deep .el-checkbox-group { - .el-checkbox-button__inner{ - padding: 6px 14px; - border: 0; - border-radius: 10px; - + .el-checkbox-button__inner { + padding: 6px 14px; + border: 0; + border-radius: 10px; } - .el-checkbox-button:first-child .el-checkbox-button__inner{ + .el-checkbox-button:first-child .el-checkbox-button__inner { margin-right: 10px; } - .el-checkbox-button.is-checked .el-checkbox-button__inner{ - background: #027DB4; + .el-checkbox-button.is-checked .el-checkbox-button__inner { + background: #027db4; color: #ffffff; box-shadow: unset; } @@ -614,7 +612,7 @@ export default { } } - .eventSelection{ + .eventSelection { width: 170px; height: 100px; background: rgba(7, 26, 44, 0.8); @@ -625,16 +623,16 @@ export default { display: flex; align-items: center; z-index: 1000; - ::v-deep .el-checkbox__label{ + ::v-deep .el-checkbox__label { color: #ffffff; } - ::v-deep .el-checkbox{ - margin:0 15px; - .el-checkbox__inner{ - margin-right: 15px; + ::v-deep .el-checkbox { + margin: 0 15px; + .el-checkbox__inner { + margin-right: 15px; } } - .eventSelectionIcon{ + .eventSelectionIcon { display: block; width: 14px; height: 14px; @@ -642,21 +640,27 @@ export default { background: #f74b3f; position: absolute; left: 34.5px; - top: 21px; + top: 13px; } - .eventSelectionIcon:nth-child(2){ + .eventSelectionIcon:nth-child(2) { background: #ffae2b; - position: absolute; + position: absolute; left: 34.5px; - top: 42px; + top: 34px; } - .eventSelectionIcon:nth-child(3){ + .eventSelectionIcon:nth-child(3) { background: #31d779; position: absolute; left: 34.5px; - top: 63px; + top: 54px; } } + ::v-deep .el-checkbox__label { + display: inline-grid; + width: 170px; + white-space: pre-line; + word-wrap: break-word; + } }