Skip to content

D
device-new-platform
Commit 18de87f1 authored by 赵啸非's avatar 赵啸非
Browse files
Options

地图详细显示

parent 83855742
Hide whitespace changes
Inline Side-by-side
Showing with 642 additions and 0 deletions
device-manager-ui/admin/src/components/MapDetail.vue 0 → 100644
View file @ 18de87f1
// 地图组件
<template>
<div class="my-map">
<el-amap
ref="map"
vid="amapDetail"
:amap-manager="amapManager"
:center="center"
:zoom="20"
:pitch="65"
:rotation="45"
viewMode="3D"
:plugin="plugin"
:events="events"
class="amap-demo"
>
<div class="tuli1"><slot name="leftTop1"></slot></div>
<div class="tuli"><slot name="leftTop"></slot></div>
<div class="rightTop"><slot name="rightTop"></slot></div>
<!-- <el-amap-search-box :on-search-result="onSearchResult" :events='searchEvents'/> -->
<!--marker -->
<el-amap-marker
v-for="(marker, index) in markers"
:key="'marker' + index"
:events="marker.events"
:position="marker.position"
:label="marker.label"
:icon="marker.icon"
:extData="marker"
>
</el-amap-marker>
</el-amap>
</div>
</template>
<script>
import { formatterDate } from "@/assets/utils/index";
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
export default {
name: "MapDetail",
props: {
value: {
type: Boolean,
},
originData: {
type: Object,
default: () => {},
},
markersData: {
type: Array,
required: false,
default: () => [],
},
},
computed: {
visible: {
get() {
return this.value;
},
set() {
this.$emit("input", false);
},
},
},
created() {
this.refresh(this.markersData);
},
methods: {
formatterDate,
getDeviceDetial() {
//获取设备列表
console.log("device siteId", this.info.siteId);
},
refresh(data) {
console.log("刷新数据", data);
this.markersData = data;
this.markersData.map((item) => {
// console.log("marker", item);
this.setMarker(item);
});
},
relocate(center) {
this.center = [center.lng, center.lat];
this.zoom = 10;
//重新定位中心点
},
setMarker(item) {
if (!item.lng && !item.lat) return;
//console.log("data",formatterDate(item.createTime))
let markerLabel = {
label: { content: item.siteName, offset: [30, 70] },
position: [item.lng, item.lat],
icon: require("@/assets/images/ego_box_img_normal.png"),
extData: item,
events: {
click: (e) => {
console.log("getExtData", e.target.getExtData());
let exData = e.target.getExtData();
this.info = exData.extData;
this.window.position = exData.position;
this.$nextTick(() => {
this.window.visible = true; //点击点坐标，出现信息窗体
});
},
},
};
this.markers.push(markerLabel);
},
// 处理搜索结果，定位到中心点
onSearchResult(pois) {
let latSum = 0;
let lngSum = 0;
if (!pois.length) return;
pois.forEach((poi) => {
let { lng, lat } = poi;
lngSum += lng;
latSum += lat;
});
let center = {
lng: lngSum / pois.length,
lat: latSum / pois.length,
};
this.setMarker(center.lng, center.lat, pois[0].name);
this.center = [center.lng, center.lat];
},
choose() {
this.$emit("input", false);
this.$emit("choose", JSON.parse(JSON.stringify(this.mapData)), (val) => {
//data = val;
console.log("callback:" + val);
});
},
},
data() {
let self = this;
return {
visiblepop: false,
searchEvents: {
init: (e) => {},
},
window: {
position: [104.405994, 30.915378],
visible: false,
content: '<div class="red">Hi! I am here!</div>',
},
mapData: {},
info: {},
markers: [],
geocoder: null,
amapManager,
zoom: 20,
center: [104.007767, 30.568308],
marker: {},
// 一些工具插件
};
},
};
</script>
<style lang="less">
.tuli {
width: 400px;
top: 60px;
left: 34px;
position: absolute;
float: left;
background-color: rgba(255, 255, 255, 0.7);
}
.tuli1 {
width: 150px;
top: 10px;
left: 34px;
position: absolute;
float: left;
background-color: rgba(255, 255, 255, 0.7);
}
.rightTop {
width: 200px;
top: 0px;
right:0px;
position: absolute;
float: right;
background-color: rgba(255, 255, 255, 1);
}
.amap-info-content {
position: relative;
background: #fff;
line-height: 1.4;
overflow: auto;
}
.my-map {
.amap-demo {
position: relative;
width: 100%;
min-height: 650px;
.map-marker {
position: relative;
width: 30px;
height: 30px;
img {
position: absolute;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.el-tag {
position: absolute;
color: #fff;
top: 30px;
transform: translateX(-50%);
background: #f56c6c;
}
}
.el-vue-search-box-container {
position: absolute;
top: -28px;
width: 100%;
box-shadow: 0 0 3px #ccc;
.search-tips {
width: 100%;
max-height: 300px;
}
}
}
}
</style>
device-manager-ui/admin/src/views/sitestat/mapDetail.vue 0 → 100644
View file @ 18de87f1
<template>
<div>
<MapDetail ref="map" :markersData="originData" @choose="getDetailData">
<el-card body-style="padding:0px;" slot="leftTop1">
<el-button
type="text"
size="mini"
style="margin-left: 10px"
icon="el-icon-back"
@click="switchStat"
>返回至站点分布</el-button
>
</el-card>
<el-card slot="leftTop">
<el-row type="flex" justify="space-between">
<span style="font-size: 18px"
><b>{{ info.siteName }}</b></span
>
</el-row>
<el-divider></el-divider>
<el-descriptions :column="1" size="small">
<el-descriptions-item label="站点编码">{{
info.siteCode
}}</el-descriptions-item>
<el-descriptions-item label="站点地址">{{
info.address
}}</el-descriptions-item>
<el-descriptions-item
label="联系人"
:labelStyle="{ 'text-align': 'right', width: '50px' }"
>{{ info.leadingOfficial }}</el-descriptions-item
>
<el-descriptions-item label="联系电话">
{{ info.leadingOfficialTelephone }}
</el-descriptions-item>
<el-descriptions-item label="创建时间">{{
formatterDate(info.createTime)
}}</el-descriptions-item>
</el-descriptions>
<el-divider></el-divider>
<el-row type="flex" justify="space-around">
<el-col :span="4">
<span style="font-size: 13px"
><b>{{ info.deviceTotal }}</b></span
><br />
<span style="font-size: 12px">设备总数</span>
</el-col>
<el-col :span="4">
<span style="font-size: 13px"
><b style="color: green">{{ info.onlineCount }}</b></span
><br />
<span style="font-size: 12px">在线</span>
</el-col>
<el-col :span="4">
<span style="font-size: 13px"
><b style="color: red">{{ info.offlineCount }}</b></span
><br />
<span style="font-size: 12px">离线</span>
</el-col>
<el-col :span="4">
<span style="font-size: 13px"
><b style="color: orange">{{ info.stopCount }}</b></span
><br />
<span style="font-size: 12px">停用</span>
</el-col>
<el-col :span="4">
<span style="font-size: 13px"
><b style="color: grey">{{ info.unActiveCount }}</b></span
><br />
<span style="font-size: 12px">待激活</span>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row type="flex" justify="space-around" style="margin-top: 10px">
<el-button type="primary" @click="switchList" size="mini" icon="el-icon-tickets"
>列表模式</el-button
>
<el-button type="primary" size="mini" icon="el-icon-edit-outline"
>编辑站点</el-button
>
<el-button type="primary" size="mini" icon="el-icon-plus"
>添加设备</el-button
>
</el-row>
</el-card>
<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-select
style="padding: 5px"
size="mini"
v-model="deviceStatus"
placeholder="请选择设备状态"
>
<el-option
v-for="($label, $value) in tableData.dict.deviceStatus"
:key="$value"
:label="$label"
:value="$value"
></el-option>
</el-select>
<span> </span>
</el-row>
<el-row>
<el-input
size="mini"
v-model="deviceCode"
style="padding: 5px"
placeholder="请输入设备编码"
></el-input>
</el-row>
<el-divider></el-divider>
<el-row
v-for="(label, value, index) in tableData.dict.productId"
:key="index"
type="flex"
style="border-bottom: 1px solid #e8eaec; padding: 10px"
justify="space-between"
>
<i
style="font-size: 20px"
v-bind:class="[true ? 'location' + index : '']"
class="el-icon-location-information"
></i>
<span style="font-size: 12px">{{ label }}</span>
<el-switch
v-model="items[index]"
:active-value="value"
:inactive-value="0"
@change="switchChange"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</el-row>
</el-col>
</MapDetail>
<drawer-show ref="drawerform" @ok="getData" />
<drawer-view ref="drawerViewform" @ok="getData" />
</div>
</template>
<script>
/** 表单弹出框模式需引入 */
import drawerView from "../device/drawerview";
import drawerShow from "../device/drawershow";
import table from "@/assets/mixins/table";
import { formatterDate } from "@/assets/utils/index";
export default {
name: "DeviceMap",
components: { drawerShow, drawerView },
mixins: [table],
created() {
console.log("route", this.$route);
let { siteId } = this.$route.query;
this.info = this.$route.query;
// this.$router.push({ query: { siteId, siteId } });
this.query = { siteId, siteId };
},
methods: {
formatterDate,
switchList() {
//进入设备列表页面
this.$router.push({
path: "/device/list",
query: {
siteId: this.info.siteId,
},
});
},
switchStat() {
this.$router.push({
path: "/sitestat/maplist",
});
},
switchChange(val) {
let arr = [];
for (let item in this.items) {
console.log(this.items[item]);
if (this.items[item] && this.items[item] != 0)
arr.push(this.items[item]);
}
this.query= Object.assign({}, this.query , { productIdList: arr });
let groupList=["productId"]
this.query= Object.assign({}, this.query , { groupList: groupList });
this.getData();
},
afterRender(data) {
console.log("tableData", data);
if (!this.sync) {
this.$nextTick(() => {
var count = 0;
for (var i in data.dict.productId) {
this.items[count] = i + "";
count++;
}
this.sync = true;
});
}
},
/** 重写新增方法 */
toAdd(row) {
//this.$refs.dialogform.add(row);
row.siteId = this.siteId;
row.siteName = this.siteName;
row.siteCode = this.siteCode;
this.$refs.drawerform.add(row);
},
/** 重写编辑方法 */
toEdit(row) {
row.siteName = this.siteName;
row.siteCode = this.siteCode;
this.$refs.drawerform.edit(row);
},
/** 重写查看方法 */
toView(row) {
this.$refs.drawerViewform.view(row);
},
},
data() {
return {
originData: [],
value1: 1,
sync: false,
// 用户导入参数
upload: {
// 是否显示弹出层（设备导入）
open: false,
// 弹出层标题（设备导入）
title: "导入设备数据",
// 是否禁用上传
isUploading: false,
// 是否更新已经存在的数据
updateSupport: 0,
// 上传的地址
url: "/m/device/importData",
},
// 站点树
pageInfo: {
list: "/device/list",
},
deviceStatus:null,
deviceCode:null,
items: {
item0: "",
item1: "",
item2: "",
item3: "",
item4: "",
item5: "",
item6: "",
item7: "",
item8: "",
item9: "",
item10: "",
item11: "",
item12: "",
},
info: {},
options: [
{
value: "选项1",
label: "黄金糕",
},
{
value: "选项2",
label: "双皮奶",
},
{
value: "选项3",
label: "蚵仔煎",
},
{
value: "选项4",
label: "龙须面",
},
{
value: "选项5",
label: "北京烤鸭",
},
],
value: "",
isExport: false,
siteId: null,
siteName: "",
siteCode: "",
updateSiteId: null,
updateSiteName: "",
updateSiteCode: "",
};
},
};
</script>
<style scoped>
.el-divider--horizontal {
margin: 5, 0, 5, 0;
background: 0 0;
border-top: 1px solid #e8eaec;
}
.back {
width: 200px;
top: 20px;
left: 34px;
position: absolute;
float: left;
}
.el-row {
margin-bottom: 5px;
margin-top: 5px;
&:last-child {
margin: 0;
}
}
.location0 {
font-size: 18px;
color: red;
}
.location1 {
font-size: 18px;
color: blueviolet;
}
.location2 {
font-size: 18px;
color: aqua;
}
.location3 {
font-size: 18px;
color: coral;
}
.location4 {
font-size: 18px;
color: slateblue;
}
.location5 {
font-size: 18px;
color: purple;
}
.location6 {
font-size: 18px;
color: darkgreen;
}
.location7 {
font-size: 18px;
color: magenta;
}
.location8 {
font-size: 18px;
color: goldenrod;
}
.location9 {
font-size: 18px;
color: orchid;
}
.location10 {
font-size: 18px;
color: navy;
}
.location11 {
font-size: 18px;
color: darkred;
}
.location12 {
font-size: 18px;
color: forestgreen;
}
</style>
\ No newline at end of file
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