Skip to content

D
device-new-platform
Commit 49ec3977 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

feat:设备地图添加设备信息弹窗

parent 3136ee46
Show whitespace changes
Inline Side-by-side
Showing with 210 additions and 29 deletions
device-manager-ui/admin/src/components/MapDetail.vue
View file @ 49ec3977
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
vid="amapDetail" vid="amapDetail"
:amap-manager="amapManager" :amap-manager="amapManager"
:center="center" :center="center"
expandZoomRange :expandZoomRange="true"
:zoom="20" :zoom="20"
:pitch="65" :pitch="65"
:rotation="45" :rotation="45"
...@@ -32,6 +32,87 @@ ...@@ -32,6 +32,87 @@
:extData="marker" :extData="marker"
> >
</el-amap-marker> </el-amap-marker>
<!--信息窗体-->
<el-amap-info-window
:closeWhenClickMap="true"
:position="window.position"
:visible="window.visible"
:offset="[0, -30]"
:events="{
init(m) {
m.on('open', () => (window.visible = true));
m.on('close', () => (window.visible = false));
},
}"
>
<div class="info-window">
<!-- 头部 -->
<div class="header flex aic jcb mb20">
<div class="title">{{ curDev.deviceName }}</div>
<div class="hint">
<div class="green" v-if="curDev.deviceStatus === 2">
<i class="el-icon-link"></i>
在线
</div>
<div class="wraning" v-else-if="curDev.enabled === 0">
<i class="el-icon-switch-button"></i>
停用
</div>
<div class="ordinary" v-else-if="curDev.deviceStatus === 0">
<i class="el-icon-sunset"></i>
未激活
</div>
<div class="delete" v-else-if="curDev.deviceStatus === 1">
<i class="el-icon-light-rain"></i>
离线
</div>
</div>
</div>
<!-- 主体 -->
<div class="info-box">
<el-descriptions :column="1" size="small">
<el-descriptions-item label="设备编码">{{
curDev.deviceCode ? curDev.deviceCode : "--"
}}</el-descriptions-item>
<el-descriptions-item label="MAC地址">{{
curDev.deviceMac ? curDev.deviceMac : "--"
}}</el-descriptions-item>
<el-descriptions-item label="设备位置"
>{{
curDev.deviceInBuilding ? curDev.deviceInBuilding : "--"
}}栋{{
curDev.deviceInFloor ? curDev.deviceInFloor : "--"
}}层</el-descriptions-item
>
<el-descriptions-item
:labelStyle="{ 'text-align': 'right', width: '50px' }"
label="负责人"
>
{{ curDev.leadingOfficial || "--" }}
</el-descriptions-item>
<el-descriptions-item label="联系电话">{{
curDev.leadingOfficialTelephone || "--"
}}</el-descriptions-item>
<el-descriptions-item label="创建时间">{{
formatterDate(curDev.createTime)
}}</el-descriptions-item>
</el-descriptions>
</div>
<!-- 底部按钮 -->
<!-- <div class="footer mt20 flex aic">
<el-button
size="small"
v-if="curDev.deviceStatus === 0"
type="primary"
@click="handleActive"
>一键激活</el-button
>
<el-button size="small" type="primary" @click="checkInfo(curDev.id)"
>查看设备详情</el-button
>
</div> -->
</div>
</el-amap-info-window>
</el-amap> </el-amap>
</div> </div>
</template> </template>
...@@ -110,6 +191,10 @@ export default { ...@@ -110,6 +191,10 @@ export default {
events: { events: {
click: (e) => { click: (e) => {
let ExtData = e.target.getExtData();
this.window.visible = true;
this.window.position = ExtData.position;
this.curDev = ExtData.extData;
console.log("getExtData", e.target.getExtData()); console.log("getExtData", e.target.getExtData());
}, },
}, },
...@@ -136,7 +221,11 @@ export default { ...@@ -136,7 +221,11 @@ export default {
zoom: 20, zoom: 20,
center: [104.007767, 30.568308], center: [104.007767, 30.568308],
marker: {}, marker: {},
window: {
position: [0, 0],
visible: false,
},
curDev: {},
// 一些工具插件 // 一些工具插件
}; };
}, },
...@@ -146,7 +235,7 @@ export default { ...@@ -146,7 +235,7 @@ export default {
<style lang="less"> <style lang="less">
.tuli { .tuli {
width: 400px; width: 400px;
top: 20px; top: 40px;
left: 34px; left: 34px;
position: absolute; position: absolute;
float: left; float: left;
...@@ -175,6 +264,30 @@ export default { ...@@ -175,6 +264,30 @@ export default {
line-height: 1.4; line-height: 1.4;
overflow: auto; overflow: auto;
} }
.info-window {
width: 400px;
padding: 10px;
font-size: 12px;
color: #606266;
.header {
.title {
font-size: 20px;
font-weight: 500;
}
}
.info-text-title {
width: 90px;
text-align: right;
}
.info-box {
padding: 10px 0px;
border-top: 1px solid #ececec;
border-bottom: 1px solid #ececec;
}
.footer {
justify-content: flex-end;
}
}
.my-map { .my-map {
width: 100%; width: 100%;
height: 93vh; height: 93vh;
......
device-manager-ui/admin/src/views/sitestat/mapDetail.vue
View file @ 49ec3977
...@@ -2,13 +2,21 @@ ...@@ -2,13 +2,21 @@
<div> <div>
<MapDetail ref="map" :markersData="originData" @choose="getDetailData"> <MapDetail ref="map" :markersData="originData" @choose="getDetailData">
<el-card body-style="padding:0px;" slot="leftTop1"> <el-card body-style="padding:0px;" slot="leftTop1">
<el-button type="text" size="mini" style="margin-left: 10px" icon="el-icon-back" <el-button
@click="switchStat">返回至站点分布</el-button> type="text"
size="mini"
style="margin-left: 10px"
icon="el-icon-back"
@click="switchStat"
>返回至站点分布</el-button
>
</el-card> </el-card>
<el-card slot="leftTop"> <el-card slot="leftTop">
<el-row type="flex" justify="space-between"> <el-row type="flex" justify="space-between">
<span style="font-size: 18px"><b>{{ info.siteName }}</b></span> <span style="font-size: 18px"
><b>{{ info.siteName }}</b></span
>
</el-row> </el-row>
<el-divider></el-divider> <el-divider></el-divider>
...@@ -19,8 +27,11 @@ ...@@ -19,8 +27,11 @@
<el-descriptions-item label="站点地址">{{ <el-descriptions-item label="站点地址">{{
info.address info.address
}}</el-descriptions-item> }}</el-descriptions-item>
<el-descriptions-item label="联系人" :labelStyle="{ 'text-align': 'right', width: '50px' }">{{ info.leadingOfficial <el-descriptions-item
}}</el-descriptions-item> label="联系人"
:labelStyle="{ 'text-align': 'right', width: '50px' }"
>{{ info.leadingOfficial }}</el-descriptions-item
>
<el-descriptions-item label="联系电话"> <el-descriptions-item label="联系电话">
{{ info.leadingOfficialTelephone }} {{ info.leadingOfficialTelephone }}
</el-descriptions-item> </el-descriptions-item>
...@@ -32,23 +43,33 @@ ...@@ -32,23 +43,33 @@
<el-divider></el-divider> <el-divider></el-divider>
<el-row type="flex" justify="space-around"> <el-row type="flex" justify="space-around">
<el-col :span="4"> <el-col :span="4">
<span style="font-size: 13px"><b>{{ info.deviceTotal }}</b></span><br /> <span style="font-size: 13px"
><b>{{ info.deviceTotal }}</b></span
><br />
<span style="font-size: 12px">设备总数</span> <span style="font-size: 12px">设备总数</span>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<span style="font-size: 13px"><b style="color: green">{{ info.onlineCount }}</b></span><br /> <span style="font-size: 13px"
><b style="color: green">{{ info.onlineCount }}</b></span
><br />
<span style="font-size: 12px">在线</span> <span style="font-size: 12px">在线</span>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<span style="font-size: 13px"><b style="color: red">{{ info.offlineCount }}</b></span><br /> <span style="font-size: 13px"
><b style="color: red">{{ info.offlineCount }}</b></span
><br />
<span style="font-size: 12px">离线</span> <span style="font-size: 12px">离线</span>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<span style="font-size: 13px"><b style="color: orange">{{ info.stopCount }}</b></span><br /> <span style="font-size: 13px"
><b style="color: orange">{{ info.stopCount }}</b></span
><br />
<span style="font-size: 12px">停用</span> <span style="font-size: 12px">停用</span>
</el-col> </el-col>
<el-col :span="4"> <el-col :span="4">
<span style="font-size: 13px"><b style="color: grey">{{ info.unActiveCount }}</b></span><br /> <span style="font-size: 13px"
><b style="color: grey">{{ info.unActiveCount }}</b></span
><br />
<span style="font-size: 12px">待激活</span> <span style="font-size: 12px">待激活</span>
</el-col> </el-col>
</el-row> </el-row>
...@@ -56,39 +77,86 @@ ...@@ -56,39 +77,86 @@
<el-divider></el-divider> <el-divider></el-divider>
<el-row type="flex" justify="space-around" style="margin-top: 10px"> <el-row type="flex" justify="space-around" style="margin-top: 10px">
<el-button type="primary" class="addclass" @click="switchList" size="mini">列表模式</el-button> <el-button
type="primary"
<el-button type="primary" class="addclass" size="mini" icon="el-icon-edit-outline">编辑站点</el-button> class="addclass"
@click="switchList"
<el-button type="primary" class="addclass" size="mini" @click="addDevice" icon="el-icon-plus">添加设备</el-button> size="mini"
>列表模式</el-button
>
<el-button
type="primary"
class="addclass"
size="mini"
icon="el-icon-edit-outline"
>编辑站点</el-button
>
<el-button
type="primary"
class="addclass"
size="mini"
@click="addDevice"
icon="el-icon-plus"
>添加设备</el-button
>
</el-row> </el-row>
</el-card> </el-card>
<el-col slot="rightTop" style="box-shadow: 12px 2px 12px 12px rgba(0, 0, 0, 0.1)"> <el-col
slot="rightTop"
style="box-shadow: 12px 2px 12px 12px rgba(0, 0, 0, 0.1)"
>
<el-row type="flex" justify="space-around"> <el-row type="flex" justify="space-around">
<el-select style="padding: 5px" size="mini" @change="deviceStatuschange" v-model="deviceStatus" <el-select
placeholder="请选择设备状态"> style="padding: 5px"
<el-option v-for="($label, $value) in tableData.dict.deviceStatus" :key="$value" :label="$label" size="mini"
:value="$value"></el-option> @change="deviceStatuschange"
v-model="deviceStatus"
placeholder="请选择设备状态"
>
<el-option
v-for="($label, $value) in tableData.dict.deviceStatus"
:key="$value"
:label="$label"
:value="$value"
></el-option>
</el-select> </el-select>
<span> </span> <span> </span>
</el-row> </el-row>
<el-row> <el-row>
<el-input size="mini" v-model="deviceName" @change="deviceNameChange" style="padding: 5px" <el-input
placeholder="请输入设备编码"></el-input> size="mini"
v-model="deviceName"
@change="deviceNameChange"
style="padding: 5px"
placeholder="请输入设备编码"
></el-input>
</el-row> </el-row>
<el-divider></el-divider> <el-divider></el-divider>
<el-row v-for="(label, value, index) in tableData.dict.productId" :key="index" type="flex" <el-row
style="border-bottom: 1px solid #e8eaec; padding: 10px" justify="space-between"> v-for="(label, value, index) in tableData.dict.productId"
:key="index"
type="flex"
style="border-bottom: 1px solid #e8eaec; padding: 10px"
justify="space-between"
>
<!-- <img src="../../assets/images/排队机.png" alt="" /> --> <!-- <img src="../../assets/images/排队机.png" alt="" /> -->
<img :src="require(`../../assets/images/${label}.png`)" /> <img :src="require(`../../assets/images/${label}.png`)" />
<!-- <i style="font-size: 20px" class="el-icon-location-information"></i> --> <!-- <i style="font-size: 20px" class="el-icon-location-information"></i> -->
<span style="font-size: 12px">{{ label }}</span> <span style="font-size: 12px">{{ label }}</span>
<el-switch v-model="items[index]" :active-value="value" :inactive-value="0" @change="switchChange" <el-switch
active-color="#2882ED" inactive-color="#8C8B8E"> v-model="items[index]"
:active-value="value"
:inactive-value="0"
@change="switchChange"
active-color="#2882ED"
inactive-color="#8C8B8E"
>
</el-switch> </el-switch>
</el-row> </el-row>
</el-col> </el-col>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment