wuhongjian
/
qd-changjing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

积水点区市分布、底部

This commit is contained in:
gaoyuanwei 2022-07-05 19:13:09 +08:00
parent 7c3a72bd3a
commit b8f970aeea
2 changed files with 441 additions and 315 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

370
src/views/pages/waterPoints/components/SiteList.vue
View File

@ -1,9 +1,11 @@
<template> <template>
<div class="box"> <div class="box">
<div class="title">工地列表</div> <div class="title"><p>积水点市区分布</p><div class="bottomLine"></div></div>
<!-- 工地列表 --> <!-- 工地列表 -->
<div class="eventData"> <div class="eventData">
<div style="display: flex;justify-content: space-between"> <div id="event-type-chart"></div>
<!-- <div style="display: flex;justify-content: space-between">
<el-input <el-input
placeholder="请输入工地名称" placeholder="请输入工地名称"
prefix-icon="el-icon-search" prefix-icon="el-icon-search"
@ -55,75 +57,82 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div> -->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import bus from "@/views/layout/bus"; import * as echarts from 'echarts'
import bus from '@/views/layout/bus'
import { import {
selectAllBuilding, selectAllBuilding,
selectByProjectName, selectByProjectName,
selectDayAll, selectDayAll,
selectWeekAll, selectWeekAll,
selectMonthAll, selectMonthAll
} from "@/api/construction/index"; } from '@/api/construction/index'
export default { export default {
data () { data () {
return { // return {
searchValue: "", // searchValue: '',
siteData: [], // siteData: [],
siteDataAll: [], // siteDataAll: [],
selectSiteData: [], // selectSiteData: [],
InformationActiveName: "基本信息", // InformationActiveName: '基本信息',
informationShow: false, // informationShow: false,
detailedInfToday: [], // detailedInfToday: [],
detailedInfWeek: [], // detailedInfWeek: [],
detailedInfMonth: [], // detailedInfMonth: [],
dustActiveName: "今日", // dustActiveName: '今日',
// options: [
// {
// value: '全部区市',
// label: '全部区市'
// }, {
// value: '市南区',
// label: '市南区'
// }, {
// value: '市北区',
// label: '市北区'
// }, {
// value: '崂山区',
// label: '崂山区'
// }, {
// value: '李沧区',
// label: '李沧区'
// }, {
// value: '即墨区',
// label: '即墨区'
// }, {
// value: '西海岸新区',
// label: '西海岸新区'
// }, {
// value: '城阳区',
// label: '城阳区'
// }, {
// value: '胶州市',
// label: '胶州市'
// }, {
// value: '平度市',
// label: '平度市'
// }, {
// value: '莱西市',
// label: '莱西市'
// }
// ],
// selectValue: ''
// }
return {
options: [
{
value: '全部区市',
label: '全部区市'
},{
value: '市南区',
label: '市南区'
}, {
value: '市北区',
label: '市北区'
}, {
value: '崂山区',
label: '崂山区'
}, {
value: '李沧区',
label: '李沧区'
}, {
value: '即墨区',
label: '即墨区'
},{
value: '西海岸新区',
label: '西海岸新区'
},{
value: '城阳区',
label: '城阳区'
},{
value: '胶州市',
label: '胶州市'
},{
value: '平度市',
label: '平度市'
},{
value: '莱西市',
label: '莱西市'
} }
],
selectValue: ''
};
}, },
mounted () { mounted () {
this.selectSiteByName(); this.initEventTypeCharts()
// this.selectSiteByName()
// bus.$off("mainClick") // bus.$off("mainClick")
// bus.$on("mainClick", (data) => { // bus.$on("mainClick", (data) => {
// this.informationShow = true; // this.informationShow = true;
@ -148,99 +157,182 @@ export default {
// }); // });
}, },
methods: { methods: {
// 查询所有工地 initEventTypeCharts () {
selectSiteByName() { const option = {
selectAllBuilding().then((res) => { title: {
// console.log(res.data.data); // text: '事件类型分布',
this.siteData = res.data.data left: 'left',
this.siteDataAll = res.data.data top: 15,
}); textStyle: {
fontSize: 16,
color: '#fff',
fontWeight: 'normal'
}
}, },
grid: {
bottom: 40
},
xAxis: {
type: 'category',
data: ['市南区', '市北区', '李沧区', '崂山区', '城阳区', '西海岸新区', '即墨区', '莱西市', '胶州市', '平度市'],
axisLabel: {
color: '#fff',
margin: 7,
show: true,
interval: 0,
rotate: 30
},
axisLine: {
lineStyle: {
color: 'rgba(254, 125, 42,0.6)'
}
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
show: false
},
series: [
{
data: [12, 10, 5, 8, 7, 9, 1, 2, 3, 2],
type: 'bar',
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(254,125,42,1)'
}, {
offset: 1,
color: 'rgba(254,125,42,0)'
}]),
borderWidth: 2,
borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255,211,107,1)'
}, {
offset: 1,
color: 'rgba(255,211,107,0)'
}])
},
barWidth: 23,
label: {
show: true,
position: 'top',
distance: 5,
color: 'fe982a',
fontSize: 18
}
}
]
}
const eventType = echarts.init(
document.getElementById('event-type-chart')
)
eventType.setOption(option)
}
}
// methods: {
// // 查询所有工地
// selectSiteByName () {
// selectAllBuilding().then((res) => {
// // console.log(res.data.data);
// this.siteData = res.data.data
// this.siteDataAll = res.data.data
// })
// },
searchSite() { // searchSite () {
if (this.searchValue == "") { // if (this.searchValue == '') {
this.siteData = this.siteDataAll; // this.siteData = this.siteDataAll
} else { // } else {
const params = { // const params = {
projectName: this.searchValue, // projectName: this.searchValue
}; // }
selectByProjectName(params).then((res) => { // selectByProjectName(params).then((res) => {
this.siteData = res.data.data // this.siteData = res.data.data
}); // })
} // }
}, // },
fliterSiteByArea(val) { // fliterSiteByArea (val) {
console.log(val) // console.log(val)
if (val == '全部区市') { // if (val == '全部区市') {
this.siteData = this.siteDataAll; // this.siteData = this.siteDataAll
} else { // } else {
this.siteData = this.siteDataAll.filter((item) => item.ssdq == val) // this.siteData = this.siteDataAll.filter((item) => item.ssdq == val)
// }
// },
// // 行点击
// analyse (row) {
// bus.$emit('openCauseAnalysis', row)
// },
// // 关闭基本信息窗口
// informationClose () {
// this.informationShow = false
// },
// // 今日噪声及扬尘信息
// NoAndPMToday (data) {
// // 今日
// this.detailedInfToday = []
// const params = {
// projectName: data
// }
// selectDayAll(params).then((res) => {
// for (let i = 0; i < res.data.data.length; i++) {
// this.detailedInfToday.push(res.data.data[i])
// }
// })
// },
// // 近一周噪声及扬尘信息
// NoAndPMWeek (data) {
// // 近一周
// this.detailedInfWeek = []
// const params = {
// projectName: data
// }
// selectWeekAll(params).then((res) => {
// for (let i = 0; i < res.data.data.length; i++) {
// this.detailedInfWeek.push(res.data.data[i])
// }
// })
// },
// // 近一月噪声及扬尘信息
// NoAndPMMonth (data) {
// // 近一月
// this.detailedInfMonth = []
// const params = {
// projectName: data
// }
// selectMonthAll(params).then((res) => {
// for (let i = 0; i < res.data.data.length; i++) {
// this.detailedInfMonth.push(res.data.data[i])
// }
// })
// }
// }
} }
},
// 行点击
analyse(row) {
bus.$emit("openCauseAnalysis", row);
},
// 关闭基本信息窗口
informationClose() {
this.informationShow = false;
},
// 今日噪声及扬尘信息
NoAndPMToday(data) {
// 今日
this.detailedInfToday = [];
const params = {
projectName: data,
};
selectDayAll(params).then((res) => {
for (let i = 0; i < res.data.data.length; i++) {
this.detailedInfToday.push(res.data.data[i]);
}
});
},
// 近一周噪声及扬尘信息
NoAndPMWeek(data) {
// 近一周
this.detailedInfWeek = [];
const params = {
projectName: data,
};
selectWeekAll(params).then((res) => {
for (let i = 0; i < res.data.data.length; i++) {
this.detailedInfWeek.push(res.data.data[i]);
}
});
},
// 近一月噪声及扬尘信息
NoAndPMMonth(data) {
// 近一月
this.detailedInfMonth = [];
const params = {
projectName: data,
};
selectMonthAll(params).then((res) => {
for (let i = 0; i < res.data.data.length; i++) {
this.detailedInfMonth.push(res.data.data[i]);
}
});
},
},
};
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.box { .box {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url(../../../../assets/construction/listTopBg.png) no-repeat, padding: 0px 0 18px 0px;
url(../../../../assets/construction/siteTag.png) no-repeat 324px 17px;
padding: 30px 0 18px 18px;
.title { .title {
color: #fff; color: #fff;
font-size: 20px; background: linear-gradient( to right, rgba(27, 103, 176, 1), rgba(27, 103, 176, 0) );
p{
padding: 5px;
} }
::v-deep .eventData { .bottomLine{
width: 368px; width: 100%;
height: 5px;
background: linear-gradient( to right, rgba(55, 185, 192, 1), rgba(55, 185, 192, 0) );
}
}
.eventData {
width: 100%;
margin-top: 14px; margin-top: 14px;
.el-input { .el-input {
width: 200px; width: 200px;
@ -264,6 +356,12 @@ export default {
width: 161px; width: 161px;
} }
} }
#event-type-chart,#event-state-chart {
width: 100%;
height: 207px;
display: flex;
justify-content: center;
}
} }
::v-deep .eventNoise { ::v-deep .eventNoise {

336
src/views/pages/waterPoints/index.vue
View File

@ -56,11 +56,23 @@
<site-list></site-list> <site-list></site-list>
</div> </div>
<!-- 事件多选 -->
<div class="eventSelection">
<el-checkbox-group v-model="eventCheckList">
<el-checkbox label="影响车辆(>30cm)"></el-checkbox>
<el-checkbox label="影响行人(<30cm)"></el-checkbox>
<el-checkbox label="无积水(<10cm)"></el-checkbox>
</el-checkbox-group>
<i class="eventSelectionIcon"></i>
<i class="eventSelectionIcon"></i>
<i class="eventSelectionIcon"></i>
</div>
<div class="changeLayer"> <div class="changeLayer">
<div class="title">地图显示</div> <div class="title">地图图层</div>
<div class="change-btn-box"> <div class="change-btn-box">
<el-checkbox-group v-model="changeLayerBtnGroup"> <el-checkbox-group v-model="changeLayerBtnGroup">
<el-checkbox v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)"></el-checkbox> <el-checkbox-button v-for="item in changeLayerBtnList" :key="item.index" :label="item" @change="layerHandleChange(item)" border></el-checkbox-button>
</el-checkbox-group> </el-checkbox-group>
</div> </div>
</div> </div>
@ -69,222 +81,208 @@
</template> </template>
<script> <script>
import { HieimpMap } from "@/supermap/map-init"; import { HieimpMap } from '@/supermap/map-init'
import TiledMap from "./components/tiledMap"; import TiledMap from './components/tiledMap'
import { searchCamera } from "@/api/videoSurveillance/index"; import { searchCamera } from '@/api/videoSurveillance/index'
import bus from "@/views/layout/bus"; import bus from '@/views/layout/bus'
import complaintEvent from "./components/ComplaintEvent"; import complaintEvent from './components/ComplaintEvent'
import VideoList from "./components/VideoList"; import VideoList from './components/VideoList'
import SiteList from "./components/SiteList"; import SiteList from './components/SiteList'
import { selectByJdWd } from "@/api/construction/index"; import { selectByJdWd } from '@/api/construction/index'
import { createSiteListPop } from "@/supermap/createMarkerPopup"; import { createSiteListPop, createCameraDetailsPop } from '@/supermap/createMarkerPopup'
import {createCameraDetailsPop} from '@/supermap/createMarkerPopup';
export default { export default {
data () { data () {
return { return {
hiMap: new HieimpMap(), // 地图全局对象 hiMap: new HieimpMap(), // 地图全局对象
mapId: "map-single", // 地图容器的id mapId: 'map-single', // 地图容器的id
state: "", state: '',
constructionSiteData: [], constructionSiteData: [],
changeLayerBtnList: ['AI事件','视频监控','工地','道路'], changeLayerBtnList: ['视频监控', '积水点'],
changeLayerBtnGroup: [], changeLayerBtnGroup: [],
eventCheckList: []
}; }
}, },
components: { components: {
TiledMap, TiledMap,
complaintEvent, complaintEvent,
VideoList, VideoList,
SiteList, SiteList
}, },
created () {}, created () {},
mounted () { mounted () {
this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj); this.hiMapFun = this.hiMap.myMapFun(this.hiMap.mapObj)
this.multiScreenFun = this.hiMap.multiScreenFun( this.multiScreenFun = this.hiMap.multiScreenFun(
this.hiMap.mapObj, this.hiMap.mapObj,
this.hiMapFun this.hiMapFun
); )
// 根据经纬度查询半径内所有的工地 // 根据经纬度查询半径内所有的工地
bus.$off("openCauseAnalysis"); bus.$off('openCauseAnalysis')
bus.$on("openCauseAnalysis", (row) => { bus.$on('openCauseAnalysis', (row) => {
// this.timeRegion = data.data.dt; // this.timeRegion = data.data.dt;
// this.hiMapFun.removerPolygon(); // this.hiMapFun.removerPolygon();
this.hiMapFun.removeLayerByLayerName("constructionSite"); this.hiMapFun.removeLayerByLayerName('constructionSite')
// debugger // debugger
// this.circle(latLng); // this.circle(latLng);
this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd }); this.hiMap.mapObj.map.flyTo({ lat: row.wd, lng: row.jd })
// this.WithinRadiusSite(latLng); // this.WithinRadiusSite(latLng);
let dataEvent = [{ const dataEvent = [{
latLng: { lat: row.wd, lng: row.jd }, latLng: { lat: row.wd, lng: row.jd },
data: row, data: row,
type: "site", type: 'site'
}] }]
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"construction.png", 'construction.png',
"constructionSite", 'constructionSite',
createSiteListPop createSiteListPop
); )
});
bus.$off("roadOnMap");
bus.$on("roadOnMap",(roadData) => {
this.roadOnMap(roadData);
}) })
bus.$off("removeCameraLayer"); bus.$off('roadOnMap')
bus.$on("removeCameraLayer",(type) => { bus.$on('roadOnMap', (roadData) => {
this.roadOnMap(roadData)
})
bus.$off('removeCameraLayer')
bus.$on('removeCameraLayer', (type) => {
this.hiMapFun.removeLayerByLayerName(type) this.hiMapFun.removeLayerByLayerName(type)
}) })
bus.$off("CameraSingleDataOnMap"); bus.$off('CameraSingleDataOnMap')
bus.$on("CameraSingleDataOnMap",(labelName,data) => { bus.$on('CameraSingleDataOnMap', (labelName, data) => {
this.addResourceTomap(labelName,data); this.addResourceTomap(labelName, data)
}) })
}, },
methods: { methods: {
querySearchAsync (queryString, cb) { querySearchAsync (queryString, cb) {
if (queryString.length > 0) { if (queryString.length > 0) {
searchCamera(queryString).then((res) => { searchCamera(queryString).then((res) => {
cb(res.data.suggestions); cb(res.data.suggestions)
}); })
} }
}, },
handleSelect (item) { handleSelect (item) {
this.hiMapFun.clearAllLayers(); this.hiMapFun.clearAllLayers()
const arr = item.detail.location.split(","); const arr = item.detail.location.split(',')
const searchDataDetail = [ const searchDataDetail = [
{ {
latLng: { lat: arr[1], lng: arr[0] }, latLng: { lat: arr[1], lng: arr[0] },
data: item, data: item
}, }
]; ]
this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] }); this.hiMap.mapObj.map.flyTo({ lat: arr[1], lng: arr[0] })
this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0]); this.hiMapFun.openPopupVideoSurveillance(searchDataDetail[0])
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster( this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(
searchDataDetail, searchDataDetail,
"poi-red.png", 'poi-red.png',
"address" 'address'
); )
// this.timer = setTimeout(() => { // this.timer = setTimeout(() => {
// this.addResourceTomap("全部", this.cameraAllData); // this.addResourceTomap("全部", this.cameraAllData);
// }, 1000); // }, 1000);
}, },
// 圈选查询 // 圈选查询
circle (latlng) { circle (latlng) {
this.hiMapFun.addCircleToMap(latlng, 3500); this.hiMapFun.addCircleToMap(latlng, 3500)
}, },
// 根据经纬度查半径内的工地 // 根据经纬度查半径内的工地
async WithinRadiusSite (data) { async WithinRadiusSite (data) {
const param = { const param = {
jd: data.lng, jd: data.lng,
radius: 3000, radius: 3000,
wd: data.lat, wd: data.lat
}; }
const res = await selectByJdWd(param); const res = await selectByJdWd(param)
this.constructionSiteData = res.data.data; this.constructionSiteData = res.data.data
const dataEvent = []; const dataEvent = []
this.constructionSiteData.forEach((item) => { this.constructionSiteData.forEach((item) => {
const arr = [0, 0.0, "", "0", "0.0"]; const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.wd) == -1) { if (arr.indexOf(item.wd) == -1) {
dataEvent.push({ dataEvent.push({
latLng: { lat: Number(item.wd), lng: Number(item.jd) }, latLng: { lat: Number(item.wd), lng: Number(item.jd) },
data: item, data: item,
type: "site", type: 'site'
}); })
} }
}); })
this.hiMapFun.addPointsToMap( this.hiMapFun.addPointsToMap(
dataEvent, dataEvent,
"construction.png", 'construction.png',
"constructionSite", 'constructionSite',
createSiteListPop createSiteListPop
); )
}, },
// 路网上图 // 路网上图
roadOnMap (roadData) { roadOnMap (roadData) {
roadData.forEach((item) => { roadData.forEach((item) => {
let newPoint = JSON.parse(item.points); const newPoint = JSON.parse(item.points)
newPoint[0].map((Point) => { newPoint[0].map((Point) => {
Point.reverse(); Point.reverse()
}); })
item.pm10 = Number(item.pm10); item.pm10 = Number(item.pm10)
switch (true) { switch (true) {
case 0 < item.pm10 && item.pm10 <= 50: case item.pm10 > 0 && item.pm10 <= 50:
this.hiMapFun.addPathToMap(newPoint, "#36fe78"); this.hiMapFun.addPathToMap(newPoint, '#36fe78')
break; break
case 50 < item.pm10 && item.pm10 <= 150: case item.pm10 > 50 && item.pm10 <= 150:
this.hiMapFun.addPathToMap(newPoint, "#fde202"); this.hiMapFun.addPathToMap(newPoint, '#fde202')
break; break
case 150 < item.pm10 && item.pm10 <= 250: case item.pm10 > 150 && item.pm10 <= 250:
this.hiMapFun.addPathToMap(newPoint, "#feb403"); this.hiMapFun.addPathToMap(newPoint, '#feb403')
break; break
case 250 < item.pm10 && item.pm10 <= 350: case item.pm10 > 250 && item.pm10 <= 350:
this.hiMapFun.addPathToMap(newPoint, "#fd8402"); this.hiMapFun.addPathToMap(newPoint, '#fd8402')
break; break
case 350 < item.pm10 && item.pm10 <= 420: case item.pm10 > 350 && item.pm10 <= 420:
this.hiMapFun.addPathToMap(newPoint, "#fd4302"); this.hiMapFun.addPathToMap(newPoint, '#fd4302')
break; break
case 420 < item.pm10 && item.pm10 <= 500: case item.pm10 > 420 && item.pm10 <= 500:
this.hiMapFun.addPathToMap(newPoint, "#fd0202"); this.hiMapFun.addPathToMap(newPoint, '#fd0202')
break; break
case 500 < item.pm10 && item.pm10 <= 600: case item.pm10 > 500 && item.pm10 <= 600:
this.hiMapFun.addPathToMap(newPoint, "#a80101"); this.hiMapFun.addPathToMap(newPoint, '#a80101')
break; break
case 600 < item.pm10 && item.pm10 <= 700: case item.pm10 > 600 && item.pm10 <= 700:
this.hiMapFun.addPathToMap(newPoint, "#690000"); this.hiMapFun.addPathToMap(newPoint, '#690000')
break; break
default: default:
this.hiMapFun.addPathToMap(newPoint, "#36fe78"); this.hiMapFun.addPathToMap(newPoint, '#36fe78')
break; break
} }
}); })
}, },
layerHandleChange (item) { layerHandleChange (item) {
if (this.changeLayerBtnGroup.indexOf(item) !== -1) { if (this.changeLayerBtnGroup.indexOf(item) !== -1) {
switch (item) { switch (item) {
case "道路": case '视频监控':
this.roadOnMap(this.$refs.complaintEventRef.roadData); // this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
break; break
case "AI事件": case '积水点':
break; break
case "视频监控":
this.addResourceTomap('全部',this.$refs.videoListRef.cameraAllData)
break;
case "工地":
break;
default: default:
break; break
} }
} else { } else {
switch (item) { switch (item) {
case "道路": case '视频监控':
this.hiMapFun.removerPolyline(); // this.hiMapFun.removeLayerByLayerName('全部')
break; break
case "AI事件": case '积水点':
break; break
case "视频监控":
this.hiMapFun.removeLayerByLayerName('全部')
break;
case "工地":
break;
default: default:
break; break
} }
} }
}, },
addResourceTomap (type, data) { addResourceTomap (type, data) {
const dataEvent = []; const dataEvent = []
data.forEach((item) => { data.forEach((item) => {
const arr = [0, 0.0, '', '0', '0.0'] const arr = [0, 0.0, '', '0', '0.0']
if (arr.indexOf(item.gpsX) == -1) { if (arr.indexOf(item.gpsX) == -1) {
@ -292,15 +290,14 @@ export default {
latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) }, latLng: { lat: Number(item.gpsY), lng: Number(item.gpsX) },
data: item, data: item,
type: 'videoSurveillance' type: 'videoSurveillance'
}); })
}
})
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, 'videoSurveillance.png', type, createCameraDetailsPop)
} }
});
this.hiMapFun.addResourceOnMapWithoutSuperMapCluster(dataEvent, "videoSurveillance.png", type, createCameraDetailsPop)
}, },
}, beforeDestroy () {}
beforeDestroy() {}, }
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css); @import url(../../../../node_modules/element-ui/lib/theme-chalk/index.css);
@ -446,7 +443,7 @@ export default {
right: 8px; right: 8px;
top: 562px; top: 562px;
width: 398px; width: 398px;
height:500px; // height:500px;
background: rgba($color: #05213b, $alpha: .85); background: rgba($color: #05213b, $alpha: .85);
} }
@ -469,40 +466,71 @@ export default {
line-height: 67px; line-height: 67px;
} }
.change-btn-box { .change-btn-box {
height: 42px; height: 67px;
line-height: 67px;
width: 230px; width: 230px;
margin-top: 12px;
border-left: 1px solid #005ea3;
padding-left: 20px; padding-left: 20px;
::v-deep .el-checkbox-group { ::v-deep .el-checkbox-group {
.el-checkbox { .el-checkbox-button__inner{
width: 70px; padding: 6px 14px;
color: #fff; border: 0;
.el-checkbox__input { border-radius: 10px;
}
.el-checkbox-button:first-child .el-checkbox-button__inner{
margin-right: 10px;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner{
background: #027DB4;
color: #ffffff;
box-shadow: unset;
}
}
}
}
.eventSelection{
width: 170px;
height: 100px;
background: rgba(7, 26, 44, 0.8);
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
z-index: 1000;
::v-deep .el-checkbox__label{
color: #ffffff;
}
::v-deep .el-checkbox{
margin:0 15px;
.el-checkbox__inner{ .el-checkbox__inner{
border: 1px solid #1ffefd; margin-right: 15px;
background: transparent;
}
}
}
.el-checkbox.is-checked {
.el-checkbox__label {
color: #1ffefd;
}
.el-checkbox__input {
.el-checkbox__inner {
border: 1px solid #1ffefd;
background: transparent;
&::after {
border: 1px solid #1ffefd;
border-left: 0;
border-top: 0;
}
} }
} }
.eventSelectionIcon{
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
background: red;
position: absolute;
left: 34.5px;
top: 21px;
} }
.eventSelectionIcon:nth-child(2){
background: yellow;
position: absolute;
left: 34.5px;
top: 42px;
} }
.eventSelectionIcon:nth-child(3){
background: green;
position: absolute;
left: 34.5px;
top: 63px;
} }
} }
} }