<template>
|
<div
|
class="itm-map-item"
|
:class="[
|
item.s ? '' : 'd',
|
item.n == 'r' ? 'error r' : '',
|
item.n == 'y' ? 'error y' : '',
|
item.areacode ? 'areacode' : '',
|
]"
|
:style="{
|
left: evalA(item.x) + 'rem',
|
top: evalA(item.y) + 'rem',
|
width: item.w && item.w != '0' ? item.w + 'rem' : '',
|
height: item.h && item.h != '0' ? item.h + 'rem' : '',
|
}"
|
@click="toAreaDetail"
|
>
|
<div
|
v-if="item.t"
|
class="t"
|
v-html="item.t"
|
:class="[item.t_c_1, item.stand, item.t_c, item.tl]"
|
></div>
|
<div v-if="false">{{ no }}</div>
|
<!-- <img v-if="item.s" :class="[item.s ? 'itm-svg-' + item.s : '']"></img> -->
|
<div
|
v-if="item.s"
|
:class="[
|
item.s ? 'itm-svg-' + item.s : '',
|
item.n == 'r' ? 'r' : '',
|
item.n == 'y' ? 'y' : '',
|
]"
|
:style="{
|
width: item.w && item.w != '0' ? item.w + 'rem' : '',
|
height: item.h && item.h != '0' ? item.h + 'rem' : '',
|
}"
|
></div>
|
<div class="tip-msg">
|
<div class="title flex">
|
<div class="dot"></div>
|
<div>{{ getMsg(item.t) }}</div>
|
</div>
|
<div class="title flex">
|
<div class="dot"></div>
|
<div>所属区域:{{ item.areacode }}区</div>
|
</div>
|
<!-- <div class="desc">所属区域:{{item.area}}</div> -->
|
<!-- <div class="desc">详细信息：一小时后磁盘满</div> -->
|
</div>
|
<div v-if="item.n == 'r'" class="tip-msg">
|
<div class="title flex">
|
<div class="dot"></div>
|
<div>{{ getMsg(item.t) }}</div>
|
</div>
|
<div class="desc">预警情况：红色预警</div>
|
<div class="desc">详细信息：一小时后磁盘满</div>
|
</div>
|
<div v-if="item.n == 'y'" class="tip-msg">
|
<div class="title flex">
|
<div class="dot"></div>
|
<div>{{ getMsg(item.t) }}</div>
|
</div>
|
<div class="desc">预警情况：黄色预警</div>
|
<div class="desc">详细信息：一小时后磁盘满</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
item: {
|
type: Object,
|
default() {
|
return {};
|
},
|
},
|
no: {
|
type: Number,
|
default() {
|
return 0;
|
},
|
},
|
},
|
methods: {
|
evalA(string) {
|
return eval(string);
|
},
|
getMsg(t) {
|
return t
|
.replace(" ", " ")
|
.replace(" ", " ")
|
.replace(" ", " ")
|
.replace("<br/>", " ")
|
.replace("<br/>", " ");
|
},
|
toAreaDetail() {
|
if (this.item.areacode) {
|
this.$router.push({
|
path: "/area",
|
query: { code: this.item.areacode },
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@import "../../common/itm_svg3d.scss";
|
|
.itm-map-item {
|
position: absolute;
|
min-width: 20px;
|
min-height: 20px;
|
.itm-svg-A41 {
|
background-size: 100% 100%;
|
}
|
|
.t {
|
position: absolute;
|
left: 50%; //起始是在body中，横向距左50%的位置
|
top: 50%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
|
transform: translate(-50%, -50%); //水平、垂直都居中,也可以写成下面的方式
|
font-size: 1.2rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #ffffff;
|
color: rgba(1, 43, 94, 1);
|
line-height: 1.4rem;
|
}
|
.t.w {
|
color: #ffffff;
|
}
|
.t.l {
|
/* left: unset; */
|
/* right: 2rem; */
|
left: 30%;
|
transform: translate(-50%, 0%);
|
}
|
.t.t_c_1 {
|
font-size: 2.33rem;
|
/* font-weight: 400; */
|
}
|
.t.stand {
|
writing-mode: vertical-rl;
|
text-orientation: mixed;
|
}
|
.t.t_c_2 {
|
font-size: 2.33rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #8ba7c7;
|
}
|
.tip-msg {
|
display: none;
|
position: absolute;
|
left: calc(50% + 5rem); //起始是在body中，横向距左50%的位置
|
top: 55%; //起始是在body中，纵向距上50%的位置，这个点相当于body的中心点，div的左上角的定位
|
min-width: 21rem;
|
height: 9.6rem;
|
background: #f1f9ff;
|
box-shadow: 0.6rem 0.4rem 2.4rem 0rem rgba(56, 92, 131, 0.77);
|
border-radius: 0.6rem;
|
z-index: 2;
|
padding: 1.3rem;
|
.title {
|
font-size: 2.5rem;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #012b5e;
|
line-height: 3.6rem;
|
text-align: left;
|
margin-bottom: 1rem;
|
text-overflow: ellipsis;
|
/* width: 10rem; */
|
overflow: hidden;
|
word-break: break-all;
|
white-space: nowrap;
|
.dot {
|
width: 1.6rem;
|
height: 1.6rem;
|
min-width: 1.6rem;
|
min-height: 1.6rem;
|
/* background: #e20505; */
|
border-radius: 50%;
|
margin-top: 1rem;
|
margin-right: 0.5rem;
|
}
|
}
|
.desc {
|
font-size: 1.4rem;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
line-height: 2rem;
|
text-align: left;
|
margin-left: 2.1rem;
|
margin-top: 0.5rem;
|
}
|
}
|
}
|
.itm-map-item.d {
|
/* background-color: rgba(209, 227, 247, 1); */
|
}
|
.itm-map-item.error {
|
cursor: pointer;
|
.tip-msg {
|
/* display: unset; */
|
}
|
}
|
.itm-map-item.error.r::before {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
|
content: "";
|
background-color: #e2050593;
|
}
|
.itm-map-item.error.y::before {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
|
content: "";
|
background: rgba(236, 193, 93, 0.6);
|
}
|
.itm-map-item.error.r .tip-msg .title .dot {
|
background: #e20505;
|
}
|
.itm-map-item.error.y .tip-msg .title .dot {
|
background: rgba(236, 193, 93, 1);
|
}
|
|
.itm-map-item.error:hover {
|
.tip-msg {
|
display: unset;
|
}
|
}
|
.itm-map-item:hover {
|
.tip-msg {
|
display: unset;
|
}
|
}
|
.itm-map-item.areacode:hover::before {
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 0;
|
bottom: 0;
|
|
content: "";
|
background-color: #059ce293;
|
}
|
</style>
|
