提交: 修复项目详情下 设备网关中 展示无数据提示

This commit is contained in:
23688nl 2022-09-08 16:26:01 +08:00
parent 23a4de9e9e
commit 129a14cb0d
2 changed files with 247 additions and 163 deletions

View File

@ -1,103 +1,110 @@
<template>
<div class="amap-shop-location">
<div id="container" style="width:100%; height:100%"></div>
</div>
<div id="container" style="width: 100%; height: 100%"></div>
</div>
</template>
<script>
import AMap from 'AMap'
import AMap from "AMap";
export default {
name: "ShopLcation",
props: {
'mapCenter': {
type: Object,
default: {
lng: 116.397428,
lat: 39.90923,
address: ''
}
},
'zoom': {
type: [String, Number],
default: 10
},
'draggable': {
type: Boolean,
default: true
}
},
mapCenter: {
type: Object,
default: {
lng: 116.397428,
lat: 39.90923,
address: "",
},
},
zoom: {
type: [String, Number],
default: 10,
},
draggable: {
type: Boolean,
default: true,
},
},
data() {
return {
aMap: null,
pointResult: {
lng: 119.275254,
lat: 26.028928,
address: ''
}
};
aMap: null,
pointResult: {
lng: 119.275254,
lat: 26.028928,
address: "",
},
};
},
mounted() {
this.initMap()
},
methods: {
initMap() {
this.pointResult['lng'] = this.mapCenter.lng
this.pointResult['lat'] = this.mapCenter.lat
this.aMap = new AMap.Map('container', {
center: [this.mapCenter.lng, this.mapCenter.lat],
resizeEnable: true,
zoom: this.zoom
})
mounted() {
this.initMap();
},
methods: {
initMap() {
this.pointResult["lng"] = this.mapCenter.lng;
this.pointResult["lat"] = this.mapCenter.lat;
this.aMap = new AMap.Map("container", {
center: [this.mapCenter.lng, this.mapCenter.lat],
resizeEnable: true,
zoom: this.zoom,
});
var marker = new AMap.Marker({
position: this.aMap.getCenter(),
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
offset: new AMap.Pixel(-13, -30),
//
draggable: this.draggable,
cursor: 'move',
//
raiseOnDrag: false
});
if (this.draggable) {
marker.on('dragging', this.showInfoM);
marker.on('mouseout', this.showInfoOut);
}
marker.setMap(this.aMap);
},
getPositionByLonLats(lng, lat) {
var _this = this
// console.log(""+lng+""+lat);
var lnglatXY = [lng, lat];//
AMap.service('AMap.Geocoder', function() {//
var geocoder = new AMap.Geocoder({});
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
// console.log(result.regeocode.formattedAddress);
var address = result.regeocode.formattedAddress;
_this.pointResult.address = address
}
_this.$emit("mapEvent", _this.pointResult)
});
});
},
showInfoOut(e) {
// return
this.getPositionByLonLats(this.pointResult['lng'], this.pointResult['lat'])
// this.$emit("")
},
showInfoM(e) {
this.pointResult['lat'] = e.lnglat.lat
this.pointResult['lng'] = e.lnglat.lng
}
}
var marker = new AMap.Marker({
position: this.aMap.getCenter(),
icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
offset: new AMap.Pixel(-13, -30),
//
draggable: this.draggable,
cursor: "move",
//
raiseOnDrag: false,
});
if (this.draggable) {
marker.on("dragging", this.showInfoM);
marker.on("mouseout", this.showInfoOut);
}
marker.setMap(this.aMap);
},
getPositionByLonLats(lng, lat) {
var _this = this;
// console.log(""+lng+""+lat);
var lnglatXY = [lng, lat]; //
AMap.service("AMap.Geocoder", function () {
//
var geocoder = new AMap.Geocoder({});
geocoder.getAddress(lnglatXY, function (status, result) {
console.log('---',status, result)
if (status === "complete" && result.info === "OK") {
// console.log(result.regeocode.formattedAddress);
var address = result.regeocode.formattedAddress;
_this.pointResult.address = address;
} else {
_this.$message.error('高德地图获取地址失败!');
}
_this.$emit("mapEvent", _this.pointResult);
});
});
},
showInfoOut(e) {
// return
this.getPositionByLonLats(
this.pointResult["lng"],
this.pointResult["lat"]
);
// this.$emit("")
},
showInfoM(e) {
this.pointResult["lat"] = e.lnglat.lat;
this.pointResult["lng"] = e.lnglat.lng;
},
},
};
</script>
<style lang="scss">
.amap-shop-location {
.amap-marker:first-child .amap-icon img {
width: 25px;
height: 34px;
}
.amap-marker:first-child .amap-icon img {
width: 25px;
height: 34px;
}
}
</style>
</style>

View File

@ -10,7 +10,12 @@
<el-row>
<el-col :span="5">
<el-form-item label="型号名称" prop="prodKey">
<el-select v-model="queryParams.prodKey" placeholder="请选择项目类型" clearable size="small">
<el-select
v-model="queryParams.prodKey"
placeholder="请选择项目类型"
clearable
size="small"
>
<el-option
v-for="dict in projectModelList"
:key="dict.prodKey"
@ -75,68 +80,121 @@
</el-row>
</el-form>
<div class="table-container" v-show="showChildrenView === false">
<e-simple-card title="" extra="" class="object-device-card" v-for="(devItem, idx) in list" :key="idx">
<e-simple-card
title=""
extra=""
class="object-device-card"
v-for="(devItem, idx) in list"
:key="idx"
>
<template slot="cardHeader" class="card-custom-head">
<div :class="devItem['deviceState'] == 'ONLINE' ? 'card-left' : 'card-left off-line'">
<icon v-if="devItem['deviceState'] == 'ONLINE'" class="iconfont iconSYS_STA_1"/>
<icon v-else class="iconfont iconlixian"/>
<span style="margin-left: 8px;">{{ devItem['deviceState'] == 'ONLINE' ? '在线' : '离线' }}</span>
<div
:class="
devItem['deviceState'] == 'ONLINE'
? 'card-left'
: 'card-left off-line'
"
>
<icon
v-if="devItem['deviceState'] == 'ONLINE'"
class="iconfont iconSYS_STA_1"
/>
<icon v-else class="iconfont iconlixian" />
<span style="margin-left: 8px">{{
devItem["deviceState"] == "ONLINE" ? "在线" : "离线"
}}</span>
</div>
<div class="card-right">
<span class="c-label">线路数:</span>
<span class="c-number">{{ devItem.routeCount || 0}}</span>
<span class="c-number">{{ devItem.routeCount || 0 }}</span>
<el-dropdown>
<icon class="el-icon-s-operation card-opt-i"/>
<icon class="el-icon-s-operation card-opt-i" />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="handleChildrenDevice(devItem)">查看线路列表</el-dropdown-item>
<el-dropdown-item @click.native="handleChildrenDevice(devItem)"
>查看线路列表</el-dropdown-item
>
<el-dropdown-item>修改服务指向</el-dropdown-item>
<el-dropdown-item>设备巡检记录</el-dropdown-item>
<el-dropdown-item>设备参数调整</el-dropdown-item>
<el-dropdown-item>内置定时配置</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<template slot="cardBody">
<div class="object-device-body">
<div class="card-body-info">
<div class="card-body-left">
<img :src="devItem['deviceImage'] ? getIotFileUrl(devItem['deviceImage']) : '/images/devcie_default.png'" />
<img
:src="
devItem['deviceImage']
? getIotFileUrl(devItem['deviceImage'])
: '/images/devcie_default.png'
"
/>
</div>
<div class="card-body-right">
<span :title="devItem.deviceName">{{ devItem.deviceName }}</span>
<span :title="devItem.deviceName">{{
devItem.deviceName
}}</span>
<span :title="devItem.deviceKey">{{ devItem.deviceKey }}</span>
<span :title="devItem.deviceAddress">{{ devItem.deviceAddress }}</span>
<span :title="devItem.deviceAddress">{{
devItem.deviceAddress
}}</span>
</div>
</div>
<div class="card-body-footer">
<!-- {{ renderCardFooter(devItem) }} -->
<div :class="devItem.alarmProcessStatus == 1 ? 'card-footer' : 'card-footer dev-error'">
<div
:class="
devItem.alarmProcessStatus == 1
? 'card-footer'
: 'card-footer dev-error'
"
>
<icon class="iconfont icontongzhi"></icon>
<span stle="margin-left: 10px;" class="footer-title">{{ devItem.alarmProcessStatus == 1 ? '正常' : `时间:${devItem.alarmTime} ${devItem.alarmTypeName || '--'}` }}</span>
<span stle="margin-left: 10px;" class="footer-title">{{
devItem.alarmProcessStatus == 1
? "正常"
: `时间:${devItem.alarmTime} ${
devItem.alarmTypeName || "--"
}`
}}</span>
</div>
</div>
</div>
</template>
</e-simple-card>
<div
v-if="!list || list.length <= 0"
style="
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
"
>
暂无数据
</div>
</div>
<div v-if="showChildrenView">
<e-device-children
:gatewayDevice="showGatewayInfo"
:sourceId="sourceId"
:deviceType="deviceType"
@handleLinkToHome="handleLinkToHome"></e-device-children>
@handleLinkToHome="handleLinkToHome"
></e-device-children>
</div>
</div>
</template>
<script>
import ESimpleCard from "@/components/Cards/index";
import EDeviceChildren from './EDeviceChildren'
import EDeviceChildren from "./EDeviceChildren";
import { webSocketProjectGatewayUrl } from "@/config/env";
import { listProjectDevice, listProjectModel } from '@/api/iot/project_new'
import { getIotFileUrl } from "@/utils/hciot"
import { listProjectDevice, listProjectModel } from "@/api/iot/project_new";
import { getIotFileUrl } from "@/utils/hciot";
const deviceStatusOpt = {
ONLINE: "在线",
OFFLINE: "离线",
@ -147,7 +205,7 @@ export default {
name: "EDeviceTable",
components: {
ESimpleCard,
EDeviceChildren
EDeviceChildren,
},
props: {
sourceId: {
@ -226,14 +284,14 @@ export default {
projectModelList: [],
stompClient: null,
socket_flag: true,
timeout_flag: null
timeout_flag: null,
};
},
watch: {
sourceId(val) {
if (val) {
this.initHTML();
this.showChildrenView = false
this.showChildrenView = false;
}
},
deviceType(val) {
@ -243,7 +301,7 @@ export default {
},
},
created() {
this.initHTML()
this.initHTML();
},
methods: {
getIotFileUrl,
@ -256,7 +314,7 @@ export default {
handleChildrenDevice(gatewayDevice) {
this.showChildrenView = true;
this.showGatewayInfo = gatewayDevice;
this.$forceUpdate()
this.$forceUpdate();
},
//
handleLinkToHome() {
@ -267,26 +325,38 @@ export default {
return (
<template>
<div class="card-body-left">
<image src={item['deviceImage'] ? item['deviceImage'] : '/images/devcie_default.png'}></image>
<image
src={
item["deviceImage"]
? item["deviceImage"]
: "/images/devcie_default.png"
}
></image>
</div>
<div class="card-body-right">
<span>{ item.deviceId }</span>
<span>{ item.deviceSecret }</span>
<span>{ item.deviceAddress }</span>
<div class="card-body-right">
<span>{item.deviceId}</span>
<span>{item.deviceSecret}</span>
<span>{item.deviceAddress}</span>
</div>
</template>
)
);
},
//
renderCardFooter(item) {
return (
<template>
<div class={item.deviceStatus == 0 ? 'card-footer' : 'card-footer dev-error'}>
<div
class={
item.deviceStatus == 0 ? "card-footer" : "card-footer dev-error"
}
>
<icon class="iconfont icontongzhi"></icon>
<span>{item.deviceStatus == 0 ? '正常' : 'card-footer dev-error'}</span>
<span>
{item.deviceStatus == 0 ? "正常" : "card-footer dev-error"}
</span>
</div>
</template>
)
);
},
handleQuery() {
this.getGatewayList();
@ -299,24 +369,29 @@ export default {
getProjectModelList() {
listProjectModel({
projectId: this.sourceId,
deviceTags: this.deviceType || ''
}).then(res => {
this.projectModelList = res.data
})
deviceTags: this.deviceType || "",
}).then((res) => {
this.projectModelList = res.data;
});
},
//
getGatewayList() {
this.list = []
listProjectDevice(Object.assign({
projectId: this.sourceId,
deviceTags: this.deviceType || ''
}, this.queryParams)).then(res => {
this.list = res.rows
this.list = [];
listProjectDevice(
Object.assign(
{
projectId: this.sourceId,
deviceTags: this.deviceType || "",
},
this.queryParams
)
).then((res) => {
this.list = res.rows;
if (this.stompClient) {
this.closeSocket()
this.closeSocket();
}
this.connection()
})
this.connection();
});
},
// ws
connection() {
@ -329,9 +404,9 @@ export default {
if (!this.list || this.length <= 0) {
return;
}
let deviceIds = this.list.map(v => v['deviceId'])
let deviceIds = this.list.map((v) => v["deviceId"]);
this.stompClient = new WebSocket(
`${webSocketProjectGatewayUrl}/${this.getGuid()}/${ deviceIds.toString() }`
`${webSocketProjectGatewayUrl}/${this.getGuid()}/${deviceIds.toString()}`
);
this.stompClient.onmessage = this.socket_message;
this.stompClient.onclose = this.socket_onclose;
@ -341,20 +416,20 @@ export default {
const data = JSON.parse(evt.data);
// this.actualEnergyCensus = data.params || {};
console.log('socket-message:', data)
this.handleDeviceInfo(data)
console.log("socket-message:", data);
this.handleDeviceInfo(data);
this.$forceUpdate();
},
// socket
handleDeviceInfo(param) {
if (this.list && this.list.length > 0) {
this.list = this.list.map(v => {
if (v['deviceId'] === param['deviceId']) {
return Object.assign(v, param)
this.list = this.list.map((v) => {
if (v["deviceId"] === param["deviceId"]) {
return Object.assign(v, param);
} else {
return v
return v;
}
})
});
}
},
socket_onclose(e) {
@ -377,18 +452,19 @@ export default {
clearTimeout(this.timeout_flag);
},
getGuid() {
return "xxxxxxx_xxxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(/[xy]/g, function(
c
) {
var r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
});
return "xxxxxxx_xxxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(
/[xy]/g,
function (c) {
var r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16);
}
);
},
},
destroyed() {
this.closeSocket()
}
this.closeSocket();
},
};
</script>
<style lang="scss">
@ -409,37 +485,38 @@ export default {
.object-device-card {
width: 285px;
height: 164px;
background: #FFFFFF;
border: 1px solid #E4EBF4;
box-shadow: 0px 0px 8px 0px rgba(17,76,157,0.26);
background: #ffffff;
border: 1px solid #e4ebf4;
box-shadow: 0px 0px 8px 0px rgba(17, 76, 157, 0.26);
border-radius: 5px;
margin: 5px;
.card-left {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #00C805;
color: #00c805;
}
.off-line {
color: #DA2710;
color: #da2710;
}
.card-right {
display: flex;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #6B778C;
color: #6b778c;
align-items: baseline;
.c-label {}
.c-label {
}
.c-number {
color: #344567;
margin: 0 8px;
}
.card-opt-i {
font-size: 18px;
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
transform:rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
transform: rotate(90deg);
}
.card-opt-i:hover {
color: #46a6ff;
@ -482,7 +559,7 @@ export default {
font-family: Source Han Sans CN;
font-weight: 300;
color: #344567;
>span {
> span {
display: block;
width: 100%;
overflow: hidden;
@ -513,7 +590,7 @@ export default {
}
}
.dev-error {
color: #DC3520;
color: #dc3520;
}
}
}