<template>
<div class="mapbengzhan">
<div class="body-title">
<div class="title-item"
v-for="item in allData.toplist"
:key="item.value"
:class="allData.activeName == item.label ? 'actived' : ''"
@click="change(item.label)">
{{item.label}}
</div>
</div>
<div v-if="allData.activeName=='泵站工艺图'"
class="body-detail">
<div class="gty-covers gyt"
:class="[allData.gytclass]">
<div class="shuibobox">
<div class="shuibo"
:style="{height: allData.yeweinum}"></div>
<span class="yeweiline"
:style="{bottom:allData.yeweinum}">
<span class="yeweitext"
:style="{bottom:allData.yeweinum}">{{ allData.yeweitext }}</span>
</span>
</div>
<div class="img-item"
v-for="(item,index) in allData.PumpStateList"
:key="index"
v-show="item.type==0"
:class="[computedBzTypeKG(item.value),`img${index+1}`]">
<div class="kg-item"
:class="[computedliudongxiaoguo(item.value)]"></div>
<div class="bzbtn-item"
:class="computedBtn(item.value)">{{ computedtext(item.value) }}</div>
<div class="bengji-item">
<span class="bengji-title">泵机{{index+1}}</span>
</div>
</div>
<div class="liudonggif"
:class="[computedBzTypeZT()]"></div>
<div class="geshan-item"
v-show="allData.getactiveCode!='ythbz'"
v-for="(item,index) in allData.geshanStateList"
:key="item"
:class="['geshanpng',`geshan${index+1}`]">
<span class="geshanttile">格栅机{{ index+1 }}</span>
</div>
</div>
</div>
<div class="bengzhanleft"
v-if="allData.activeName=='基础信息'">
<div class="jichupic">
<!-- <div class="covers cover1-threewithfour"
v-if="allData.getactiveCode == 'cgbz7'">
<div class="img-item"
v-for="(item,index) in allData.PumpStateList"
:key="index"
v-show="item.type==0"
:class="[computedState(item.value),`img${index+1}`]"></div>
</div> -->
<div class="covers"
:class="[allData.bzpicclass]">
<div class="img-item"
v-for="(item,index) in allData.PumpStateList"
:key="index"
v-show="item.type==0"
:class="[computedState(item.value),`img${index+1}`]"></div>
</div>
<div class="bengzhan_ToolTip">
<div class="tooltip_box">
<div class="bengzhan_point red"></div>
<div>异常</div>
</div>
<div class="tooltip_box">
<div class="bengzhan_point gray"></div>
<div>未运行</div>
</div>
<div class="tooltip_box">
<div class="bengzhan_point green"></div>
<div>运行</div>
</div>
</div>
<!-- <div :class="['isonline',allData.realTimeData.status==1?'isonlinegray':'']">
{{allData.realTimeData.status==0?'在线':allData.realTimeData.status==1?'离线':''}}
</div> -->
</div>
</div>
<div class="bengzhanright"
v-if="allData.activeName=='基础信息'">
<div class="zhibanbox">
<div class="zhibanfirst">值班</div>
<div class="zhibansecend">
<div>{{props.pointfeature.dutyDailyDataDto.userName}}</div>
<div style="color:#B4CDED">{{props.pointfeature.dutyDailyDataDto.userPhone}}</div>
</div>
<div class="three"
v-show="props.pointfeature.dutyDailyDataDto.inPlace">已到位</div>
</div>
<div class="zhibanlist">
<div class="listitem">
<div class="itemlabel">泵站编号</div>
<div class="itemvalue">{{ props.pointfeature.pumpCode }}</div>
</div>
<div class="listitem">
<div class="itemlabel">泵站类型</div>
<div class="itemvalue">{{ props.pointfeature.pumpType=='dirtyPumpStation'?'污水泵站':'雨水泵站' }}</div>
</div>
<div class="listitem">
<div class="itemlabel">抽排能力</div>
<div class="itemvalue">{{ props.pointfeature.large }} m³/H</div>
</div>
<div class="listitem">
<div class="itemlabel">泵机数量</div>
<div class="itemvalue">{{ props.pointfeature.deviceCount }}</div>
</div>
<div class="listitem">
<div class="itemlabel">占地面积</div>
<div class="itemvalue">{{ props.pointfeature.buildArea }}</div>
</div>
<div class="listitem">
<div class="itemlabel">所属单位</div>
<div class="itemvalue">{{ props.pointfeature.unitDep }}</div>
</div>
<div class="listitem">
<div class="itemlabel">泵站位置</div>
<div class="itemvalue">{{ props.pointfeature.address }}</div>
</div>
<div class="listitem">
<div class="itemlabel">责任人</div>
<div class="itemvalue">{{ props.pointfeature.dutyUserName }} {{ props.pointfeature.dutyUserPhone }}</div>
</div>
<div class="listitem">
<div class="itemlabel">责任领导</div>
<div class="itemvalue">{{ props.pointfeature.dutyLeaderName }} {{ props.pointfeature.dutyLeaderPhone }}</div>
</div>
<div class="listitem">
<div class="itemlabel">泵站描述</div>
<div class="itemvalue"
:title="props.pointfeature.description">{{ props.pointfeature.description }}</div>
</div>
</div>
</div>
<div v-if="allData.activeName=='工况数据'"
class="body-detail">
<gongkuangshuju :pointfeature="props.pointfeature"
:refreshsecond="refreshsecond"></gongkuangshuju>
</div>
<div v-if="allData.activeName=='报表分析'"
class="body-detail">
<baobiaofenxi :pointfeature="props.pointfeature"
:refreshsecond="refreshsecond"></baobiaofenxi>
</div>
<div v-if="allData.activeName=='视频监控'"
class="body-detail">
<div class="videobox-video">
<webplayer :class="videoclass()"
v-if="webplayerdata1.cameraIndexCode"
:data="webplayerdata1"
:refresh="webplayerdata1.refresh">
</webplayer>
<webplayer :class="videoclass()"
v-if="webplayerdata2.cameraIndexCode"
:data="webplayerdata2"
:refresh="webplayerdata2.refresh">
</webplayer>
<webplayer class="videoitem"
v-if="webplayerdata3.cameraIndexCode"
:data="webplayerdata3"
:refresh="webplayerdata3.refresh">
</webplayer>
<webplayer class="videoitem"
v-if="webplayerdata4.cameraIndexCode"
:data="webplayerdata4"
:refresh="webplayerdata4.refresh">
</webplayer>
</div>
</div>
<div v-if="allData.activeName=='现场图片'"
class="body-detail">
<div class="imagecomponet">
<div v-for="(item,index) in processFileList"
:key="index">
<ImagePreview :src="item"
:width="150"
:height="150"
:FileList="processFileList"
:index="index"></ImagePreview>
</div>
</div>
</div>
<div v-if="allData.activeName=='调度规则'"
class="body-detail">
<div class="cockpit-box-item">
<div class="box-body">
<div class="box-right w100">
<div class="table-head">
<div class="flex2">前池水位</div>
<div class="flex6">处理方案</div>
<div class="flex2">提出人</div>
</div>
<div class="box-table"
style="height:calc(100% - 42px)">
<div class="table-item clearpadding"
v-for="(item, index) in allData.tableList"
:key="index + 1">
<div class="flex2">{{ item.minValue }}</div>
<div class="flex6">开启{{ item.openNum }}台泵</div>
<!-- <div class="flex2 flexlclasscenter">
{{ item.nickName }}
<img src="@/assets/images/oneMap/bzcall.png"
alt="" />
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { getImageUrl } from "@/utils/ruoyi";
import { useRouter } from "vue-router";
const router = useRouter();
const { proxy } = getCurrentInstance();
import moment from "moment";
import useUserStore from "@/store/modules/user";
const appStore = useUserStore();
import gongkuangshuju from "@/components/Detailbox/bengzhan/gongkuangshuju.vue";
import baobiaofenxi from "@/components/Detailbox/bengzhan/baobiaofenxi.vue";
// import webplayer from "@/../public/static/h5player/webplayer.vue";
const weatherpop = ref(false);
import {
pumpWorkConditionsList,
getPumpState,
facilityCameraInfo,
} from "@/api/cockpit";
const props = defineProps({
pointfeature: {
type: Object,
},
refresh: {
type: Number
}
});
watch(
() => props.refresh,
(newValue, oldValue) => {
console.log('mapdetail', props.pointfeature);
change(allData.activeName)
},
{ immediate: false }
);
const processFileList = ref([
getImageUrl("exp", "drainagefacility"),
getImageUrl("bengzhanpic", "cockpit"),
])
const webplayerdata1 = ref({
cameraIndexCode: '',
name: '',
BTNconter: [false, false, false],
addNum: true, //true全屏的意思 不展示下方的控件
refresh: 1,
})
const webplayerdata2 = ref({
cameraIndexCode: '',
name: '',
BTNconter: [false, false, false],
addNum: true, //true全屏的意思 不展示下方的控件
refresh: 1,
})
const webplayerdata3 = ref({
cameraIndexCode: '',
name: '',
BTNconter: [false, false, false],
addNum: true, //true全屏的意思 不展示下方的控件
refresh: 1,
})
const webplayerdata4 = ref({
cameraIndexCode: '',
name: '',
BTNconter: [false, false, false],
addNum: true, //true全屏的意思 不展示下方的控件
refresh: 1,
})
const refreshsecond = ref('1')
const allData = reactive({
cameraList: [],
PumpStateList: [],
ISLIUDONG: 0,
yeweinum: '', //液位动图的百分比
yeweitext: '', //液位的高度文字
geshanStateList: [
{},
{},
],
getactiveCode: '',
gytclass: '', //工艺图的动态class
bzpicclass: '', //泵站运行工况的动态class
bengzhanPic: getImageUrl("bengzhanpic", "cockpit"),
activeName: '泵站工艺图',
toplist: [
{ label: '泵站工艺图', value: 0 },
{ label: '基础信息', value: 1 },
{ label: '工况数据', value: 2 },
{ label: '报表分析', value: 3 },
{ label: '视频监控', value: 4 },
{ label: '调度规则', value: 5 },
{ label: '现场图片', value: 6 },
],
actived: 1,
phone: getImageUrl('phone', 'cockpit'),
optionsData1: [
{ label: 'xxxx', value: 'xxx' }
],
BottomValue1: '',
yuqingicon: getImageUrl("yujing_icon", "cockpit"),
dateRange: [Date.now(), Date.now()],
NFSNowDataTableHead: [
{ field: "name", title: "泵站名称" },
{ field: "time", title: "日期" },
{ field: "type", title: "类型" },
// { field: "peoplename", title: "值班人员" },
], //实时数据表格表头数据
HistoryTableData: [
{
level: "1",
name: "XX积水点",
address: "XX街道XX路",
time: "04-24 08:00",
type: "雨水",
peoplename: '张三',
peoplenametwo: '李三',
phone: '13588888888',
status: "待处理",
dispatch: "查看",
},
{
level: "1",
name: "XX积水点",
address: "XX街道XX路",
time: "04-24 08:00",
type: "雨水",
peoplename: '张三',
peoplenametwo: '李三',
phone: '13588888888',
status: "待处理",
dispatch: "查看",
},
{
level: "0",
name: "XX积水点",
address: "XX街道XX路",
time: "04-24 08:00",
type: "雨水",
peoplename: '张三',
peoplenametwo: '李三',
phone: '13588888888',
status: "待处理",
dispatch: "查看",
},
{
level: "1",
name: "XX积水点",
address: "XX街道XX路",
time: "04-24 08:00",
type: "雨水",
peoplename: '张三',
peoplenametwo: '李三',
phone: '13588888888',
status: "待处理",
dispatch: "查看",
},
{
level: "1",
name: "XX积水点",
address: "XX街道XX路",
time: "04-24 08:00",
type: "雨水",
peoplename: '张三',
peoplenametwo: '李三',
phone: '13588888888',
status: "待处理",
dispatch: "查看",
},
],
tableList: [
// {
// time: "04-25 19:00",
// name: "张三",
// value: "开启3台泵，持续30分钟",
// level: 1.8,
// },
// {
// time: "04-25 19:00",
// name: "张三",
// value: "开启3台泵，持续30分钟",
// level: 1.8,
// },
// {
// time: "04-25 19:00",
// name: "张三",
// value: "开启3台泵，持续30分钟",
// level: 1.8,
// },
// {
// time: "04-25 19:00",
// name: "张三",
// value: "开启3台泵，持续30分钟",
// level: 1.8,
// },
// {
// time: "04-25 19:00",
// name: "张三",
// value: "开启3台泵，持续30分钟",
// level: 1.8,
// },
],
});
function computedState (value1) {
return value1 == -1 ? "red" : value1 == 1 ? "green" : "grey";
}
// // 泵站工艺图 根据泵站类型渲染不同的开关
function computedBzTypeKG (value1) {
if (props.pointfeature.pumpType == 'rainPumpStation') {
return value1 == -1 ? "red" : value1 == 1 ? "green-yushui-gif" : "grey-yushui";
} else {
return value1 == -1 ? "red" : value1 == 1 ? "green-wushui-gif" : "grey-wushui";
}
}
// 泵站工艺图 根据泵站类型渲染不同流动效果颜色
function computedBzTypeZT () {
if (allData.ISLIUDONG) {
return props.pointfeature.pumpType == 'rainPumpStation' ? 'zhuti-yushui' : 'zhuti-wushui'
}
}
// 根据不同的开关渲染不同的流动效果
function computedliudongxiaoguo (value1) {
if (value1 == 1) {
return props.pointfeature.pumpType == 'rainPumpStation' ? 'kg-yushui' : 'kg-wushui'
}
}
function computedBtn (value1) {
return value1 == -1 ? "red-btn-bottom" : value1 == 1 ? "green-btn-bottom" : "grey-btn-bottom";
}
function computedtext (value1) {
return value1 == -1 ? "故障" : value1 == 1 ? "运行" : "停止";
}
// 查询泵机状态
function GetPumpState () {
allData.ISLIUDONG = 0
allData.yeweinum = 0
getPumpState(props.pointfeature.pumpCode).then(res => {
console.log('GetPumpState', res.data);
allData.PumpStateList = res.data
res.data.map(item => {
if (item.type == 0 && item.value == 1) {
allData.ISLIUDONG = 1
}
if (item.type == 1) {
allData.yeweinum = item.percent
allData.yeweitext = item.value
}
})
})
}
// 查询视频监控筛选列表
function Getcameralist () {
facilityCameraInfo(props.pointfeature.pumpCode).then(res => {
console.log('Getcameralist', res.data);
allData.cameraList = res.data
setTimeout(() => {
allData.cameraList.map((item, index) => {
switch (Number(index)) {
case 0:
webplayerdata1.value.cameraIndexCode = item.indexCode
setTimeout(() => {
webplayerdata1.value.refresh = Math.random()
}, 0);
break;
case 1:
webplayerdata2.value.cameraIndexCode = item.indexCode
setTimeout(() => {
webplayerdata2.value.refresh = Math.random()
}, 0);
break;
case 2:
webplayerdata3.value.cameraIndexCode = item.indexCode
setTimeout(() => {
webplayerdata3.value.refresh = Math.random()
}, 0);
break;
case 3:
webplayerdata4.value.cameraIndexCode = item.indexCode
setTimeout(() => {
webplayerdata4.value.refresh = Math.random()
}, 0);
break;
}
})
}, 0);
})
}
function change (name) {
allData.activeName = name;
console.log('name', name);
switch (name) {
case '泵站工艺图':
GetPumpState()
allData.getactiveCode = props.pointfeature.remark || '3+4'
// allData.getactiveCode = 'cgbz6'
allData.geshanStateList = [
{},
{},
]
switch (allData.getactiveCode) {
case 'ythbz':
allData.gytclass = 'gyt-cgbz-three'
break;
case 'cgbz3':
allData.gytclass = 'gyt-cgbz-three'
break;
case 'cgbz2':
allData.gytclass = 'gyt-cgbz-two'
break;
case 'cgbz4':
allData.gytclass = 'gyt-cgbz-four'
break;
case 'cgbz6':
allData.gytclass = 'gyt-cgbz-six'
allData.geshanStateList = [
{},
{},
{},
{},
]
break;
case 'cgbz7':
allData.gytclass = 'gyt-cgbz-seven'
allData.geshanStateList = [
{},
{},
{},
{},
]
break;
}
break;
case '基础信息':
GetPumpState()
allData.getactiveCode = props.pointfeature.remark || '3+4'
// allData.getactiveCode = 'cgbz2'
switch (allData.getactiveCode) {
case 'cgbz3':
allData.bzpicclass = 'cover2-cgbz-three'
break;
case 'cgbz2':
allData.bzpicclass = 'cover2-cgbz-two'
break;
case 'cgbz4':
allData.bzpicclass = 'cover2-cgbz-four'
break;
case 'cgbz6':
allData.bzpicclass = 'cover2-cgbz-six'
break;
case 'cgbz7':
allData.bzpicclass = 'cover2-cgbz-seven'
break;
case 'ythbz':
allData.bzpicclass = 'cover3-yth'
break;
}
break;
case '工况数据':
refreshsecond.value = Math.random()
break;
case '报表分析':
refreshsecond.value = Math.random()
break;
case '视频监控':
Getcameralist()
break;
case '调度规则':
getchulijianyi()
break;
case '现场图片':
if (props.pointfeature.picInfo.length) {
processFileList.value = props.pointfeature.picInfo.split(',')
} else {
processFileList.value = []
}
console.log('processFileList.value', processFileList.value);
break;
}
}
// 调度规则(处理方案)
function getchulijianyi () {
pumpWorkConditionsList(props.pointfeature.pumpCode).then(res => {
console.log('getchulijianyi', res.data);
allData.tableList = res.data
})
}
function videoclass () {
return allData.cameraList.length == 1 ? 'videoitem2' : allData.cameraList.length == 2 ? 'videoitem3' : "videoitem"
}
onMounted(() => {
});
</script>
<style lang="scss" scoped>
//@import "@/assets/styles/cockpit.scss";
//@import "@/assets/styles/bzgyt.scss";
.w100 {
width: 100% !important;
}
.flex2 {
flex: 2;
}
.clearpadding {
padding: 0 !important;
}
.flex6 {
flex: 6;
}
.flexlclasscenter {
display: flex;
align-items: center;
justify-content: center;
}
.cockpit-box-item {
height: 100%;
.box-body {
height: 100%;
}
}
.mapbengzhan {
width: 100%;
height: 100%;
display: flex;
.bengzhanleft {
height: calc(100% - 46px);
margin-top: 46px;
width: 70%;
.jichupic {
position: relative;
height: 100%;
width: 100%;
img {
width: 100%;
height: 100%;
}
}
}
.bengzhanright {
width: 30%;
padding: 10px 20px;
.zhibanbox {
position: relative;
background: #062f66;
display: flex;
height: 42px;
.zhibanfirst {
color: #8addff;
padding: 5px;
width: 24px;
background: linear-gradient(
0deg,
rgba(16, 107, 219, 0.3) 0%,
rgba(16, 107, 219, 0.3) 100%
);
}
.zhibansecend {
color: #ffffff;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 10px;
}
.three {
position: absolute;
right: 20px;
top: 10px;
border: 1px solid #1ddeb3;
background: linear-gradient(
0deg,
rgba(29, 222, 179, 0.2) 0%,
rgba(29, 222, 179, 0.2) 100%
);
border-radius: 2px;
height: 18px;
padding: 0 3px;
color: #1ddeb3;
}
}
.zhibanlist {
height: calc(100% - 62px);
.listitem {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 14px;
.itemlabel {
color: #b4cded;
width: 70px;
}
.itemvalue {
width: calc(100% - 70px);
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
.listitem:first-child {
margin-top: 10px;
}
}
}
}
.body-title {
height: 46px;
display: flex;
align-items: center;
position: absolute;
.title-item {
cursor: pointer;
color: #4678d4;
background: linear-gradient(0deg, #032463 0%, #042d7a 100%);
border-radius: 2px;
height: 26px;
padding: 3px 13px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 500;
margin-right: 10px;
&.actived {
border: 1px solid #50a3ff;
color: #50a3ff;
}
}
}
.body-detail {
margin-top: 46px;
height: calc(100% - 46px);
width: 100%;
}
::v-deep .el-input__wrapper {
height: 32px !important;
}
.videobox-video {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
.videoitem {
width: 50%;
height: 50%;
padding: 2%;
// background: url("@/assets/images/oneMap/shipinkuang.png") no-repeat;
background-size: 100% 100%;
video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.videoitem2 {
width: 100%;
height: 100%;
padding: 2%;
// background: url("@/assets/images/oneMap/shipinkuang.png") no-repeat;
background-size: 100% 100%;
video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.videoitem3 {
width: 50%;
height: 100%;
padding: 2%;
// background: url("@/assets/images/oneMap/shipinkuang.png") no-repeat;
background-size: 100% 100%;
video {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.imagecomponet {
display: flex;
flex-wrap: wrap;
}
.covers {
position: relative;
width: 100% !important;
height: 100% !important;
margin: 0px 0;
background-size: 100% 100%;
}
.cover1-threewithfour {
// width: 100%;
height: 100%;
// background: url("@/assets/images/zkbz/3+4bz/3+4bz.png") no-repeat;
background-size: 100% 100%;
.img-item {
position: absolute;
width: 44px;
height: 47px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
.green {
// background-image: url("@/assets/images/zkbz/3+4bz/zaixian3+4.png");
}
.grey {
// background-image: url("@/assets/images/zkbz/3+4bz/lixian3+4.png");
}
.red {
// background-image: url("@/assets/images/zkbz/3+4bz/3+4-hong.png");
}
.yewei {
position: absolute;
top: 180px;
left: 66px;
}
.img1 {
top: 20%;
left: 36.2%;
}
.img2 {
top: 27%;
left: 41.2%;
}
.img3 {
top: 33%;
left: 47.2%;
}
.img4 {
top: 39%;
left: 52.2%;
}
.img5 {
top: 53%;
left: 63.2%;
}
.img6 {
top: 60%;
left: 69.2%;
}
.img7 {
top: 67%;
left: 74.2%;
}
}
.cover2-cgbz-three {
width: 100%;
height: 100%;
// background: url("@/assets/images/zkbz/cgbz/three.png") no-repeat;
background-size: 100% 100%;
.img-item {
position: absolute;
width: 44px;
height: 47px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
.green {
// background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
}
.grey {
// background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
}
.red {
// background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
}
.img1 {
top: 30%;
left: 54.2%;
}
.img2 {
top: 38%;
left: 61.2%;
}
.img3 {
top: 46%;
left: 67.2%;
}
}
.cover2-cgbz-four {
width: 100%;
height: 100%;
// background: url("@/assets/images/zkbz/cgbz/four.png") no-repeat;
background-size: 100% 100%;
.img-item {
position: absolute;
width: 44px;
height: 47px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
.green {
// background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
}
.grey {
// background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
}
.red {
// background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
}
.img1 {
top: 26%;
left: 51.2%;
}
.img2 {
top: 34%;
left: 58.2%;
}
.img3 {
top: 42%;
left: 64.2%;
}
.img4 {
top: 50%;
left: 71.2%;
}
}
.cover3-yth {
width: 100%;
height: 100%;
// background: url("@/assets/images/zkbz/ythbz/ythbz.png") no-repeat;
background-size: 100% 100%;
.img-item {
position: absolute;
width: 44px;
height: 47px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
.green {
// background-image: url("@/assets/images/zkbz/ythbz/zaixian-yitihua.png");
}
.grey {
// background-image: url("@/assets/images/zkbz/ythbz/lixian-yitihua.png");
}
.red {
// background-image: url("@/assets/images/zkbz/ythbz/yitihua-hong.png");
}
.img1 {
top: 66%;
left: 41.2%;
}
.img2 {
top: 68%;
left: 46%;
}
.img3 {
top: 71%;
left: 50.2%;
}
}
.bengzhan_ToolTip {
background: rgba(#000000, 0.5);
position: absolute;
right: 0;
bottom: 0;
display: flex;
.tooltip_box {
display: flex;
align-items: center;
color: #fff;
font-size: 14px;
margin-right: 10px;
}
.bengzhan_point {
border-radius: 50%;
width: 10px;
height: 10px;
&.gray {
background: gray;
}
&.red {
background: red;
}
&.green {
background: green;
}
}
}
.cover2-cgbz-two {
width: 100%;
height: 100%;
// background: url("@/assets/images/zkbz/cgbz/two.png") no-repeat;
background-size: 100% 100%;
.img-item {
position: absolute;
width: 44px;
height: 47px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
.green {
// background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
}
.grey {
// background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
}
.red {
// background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
}
.img1 {
top: 30%;
left: 57.2%;
}
.img2 {
top: 38%;
left: 63.2%;
}
}
.cover2-cgbz-six {
width: 100%;
height: 100%;
// background: url("@/assets/images/zkbz/cgbz/six.png") no-repeat;
background-size: 100% 100%;
.img-item {
position: absolute;
width: 44px;
height: 47px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
.green {
// background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
}
.grey {
// background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
}
.red {
// background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
}
.img1 {
top: 27%;
left: 45.2%;
}
.img2 {
top: 33%;
left: 50.2%;
}
.img3 {
top: 39%;
left: 56.2%;
}
.img4 {
top: 46%;
left: 61.2%;
}
.img5 {
top: 53%;
left: 67.2%;
}
.img6 {
top: 59%;
left: 72.2%;
}
}
.cover2-cgbz-seven {
width: 100%;
height: 100%;
// background: url("@/assets/images/zkbz/cgbz/seven.png") no-repeat;
background-size: 100% 100%;
.img-item {
position: absolute;
width: 44px;
height: 47px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
transform: translate(-50%, -50%);
}
.green {
// background-image: url("@/assets/images/zkbz/cgbz/zaixian.png");
}
.grey {
// background-image: url("@/assets/images/zkbz/cgbz/lixian.png");
}
.red {
// background-image: url("@/assets/images/zkbz/cgbz/changgui-hong.png");
}
.img1 {
top: 24%;
left: 42.2%;
}
.img2 {
top: 29%;
left: 47.2%;
}
.img3 {
top: 36%;
left: 52.2%;
}
.img4 {
top: 43%;
left: 58.2%;
}
.img5 {
top: 49%;
left: 63.2%;
}
.img6 {
top: 56%;
left: 69.2%;
}
.img7 {
top: 62%;
left: 74.2%;
}
}
</style>
