0017
/
smart-power-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/Amap/components/shopLocation/index.vue
View File

@ -4,27 +4,27 @@
</div> </div>
</template> </template>
<script> <script>
import AMap from 'AMap' import AMap from "AMap";
export default { export default {
name: "ShopLcation", name: "ShopLcation",
props: { props: {
'mapCenter': { mapCenter: {
type: Object, type: Object,
default: { default: {
lng: 116.397428, lng: 116.397428,
lat: 39.90923, lat: 39.90923,
address: '' address: "",
} },
}, },
'zoom': { zoom: {
type: [String, Number], type: [String, Number],
default: 10 default: 10,
}, },
'draggable': { draggable: {
type: Boolean, type: Boolean,
default: true default: true,
} },
}, },
data() { data() {
return { return {
@ -32,65 +32,72 @@ export default {
pointResult: { pointResult: {
lng: 119.275254, lng: 119.275254,
lat: 26.028928, lat: 26.028928,
address: '' address: "",
} },
}; };
}, },
mounted() { mounted() {
this.initMap() this.initMap();
}, },
methods: { methods: {
initMap() { initMap() {
this.pointResult['lng'] = this.mapCenter.lng this.pointResult["lng"] = this.mapCenter.lng;
this.pointResult['lat'] = this.mapCenter.lat this.pointResult["lat"] = this.mapCenter.lat;
this.aMap = new AMap.Map('container', { this.aMap = new AMap.Map("container", {
center: [this.mapCenter.lng, this.mapCenter.lat], center: [this.mapCenter.lng, this.mapCenter.lat],
resizeEnable: true, resizeEnable: true,
zoom: this.zoom zoom: this.zoom,
}) });
var marker = new AMap.Marker({ var marker = new AMap.Marker({
position: this.aMap.getCenter(), position: this.aMap.getCenter(),
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
offset: new AMap.Pixel(-13, -30), offset: new AMap.Pixel(-13, -30),
// 设置是否可以拖拽 // 设置是否可以拖拽
draggable: this.draggable, draggable: this.draggable,
cursor: 'move', cursor: "move",
// 设置拖拽效果 // 设置拖拽效果
raiseOnDrag: false raiseOnDrag: false,
}); });
if (this.draggable) { if (this.draggable) {
marker.on('dragging', this.showInfoM); marker.on("dragging", this.showInfoM);
marker.on('mouseout', this.showInfoOut); marker.on("mouseout", this.showInfoOut);
} }
marker.setMap(this.aMap); marker.setMap(this.aMap);
}, },
getPositionByLonLats(lng, lat) { getPositionByLonLats(lng, lat) {
var _this = this var _this = this;
// console.log("经度："+lng+"纬度"+lat); // console.log("经度："+lng+"纬度"+lat);
var lnglatXY = [lng, lat]; // 地图上所标点的坐标 var lnglatXY = [lng, lat]; // 地图上所标点的坐标
AMap.service('AMap.Geocoder', function() {// 回调函数 AMap.service("AMap.Geocoder", function () {
// 回调函数
var geocoder = new AMap.Geocoder({}); var geocoder = new AMap.Geocoder({});
geocoder.getAddress(lnglatXY, function (status, result) { geocoder.getAddress(lnglatXY, function (status, result) {
if (status === 'complete' && result.info === 'OK') { console.log('---',status, result)
if (status === "complete" && result.info === "OK") {
// console.log(result.regeocode.formattedAddress); // console.log(result.regeocode.formattedAddress);
var address = result.regeocode.formattedAddress; var address = result.regeocode.formattedAddress;
_this.pointResult.address = address _this.pointResult.address = address;
} else {
_this.$message.error('高德地图获取地址失败！');
} }
_this.$emit("mapEvent", _this.pointResult) _this.$emit("mapEvent", _this.pointResult);
}); });
}); });
}, },
showInfoOut(e) { showInfoOut(e) {
// 当点标注失去鼠标焦点的时候就执行return 数据 // 当点标注失去鼠标焦点的时候就执行return 数据
this.getPositionByLonLats(this.pointResult['lng'], this.pointResult['lat']) this.getPositionByLonLats(
this.pointResult["lng"],
this.pointResult["lat"]
);
// this.$emit("") // this.$emit("")
}, },
showInfoM(e) { showInfoM(e) {
this.pointResult['lat'] = e.lnglat.lat this.pointResult["lat"] = e.lnglat.lat;
this.pointResult['lng'] = e.lnglat.lng this.pointResult["lng"] = e.lnglat.lng;
} },
} },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">

195
src/views/iot/project/profileV2/DeviceManage/EDeviceTable.vue
View File

@ -10,7 +10,12 @@
<el-row> <el-row>
<el-col :span="5"> <el-col :span="5">
<el-form-item label="型号名称" prop="prodKey"> <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 <el-option
v-for="dict in projectModelList" v-for="dict in projectModelList"
:key="dict.prodKey" :key="dict.prodKey"
@ -75,12 +80,29 @@
</el-row> </el-row>
</el-form> </el-form>
<div class="table-container" v-show="showChildrenView === false"> <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"> <template slot="cardHeader" class="card-custom-head">
<div :class="devItem['deviceState'] == 'ONLINE' ? 'card-left' : 'card-left off-line'"> <div
<icon v-if="devItem['deviceState'] == 'ONLINE'" class="iconfont iconSYS_STA_1"/> :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" /> <icon v-else class="iconfont iconlixian" />
<span style="margin-left: 8px;">{{ devItem['deviceState'] == 'ONLINE' ? '在线' : '离线' }}</span> <span style="margin-left: 8px">{{
devItem["deviceState"] == "ONLINE" ? "在线" : "离线"
}}</span>
</div> </div>
<div class="card-right"> <div class="card-right">
<span class="c-label">线路数:</span> <span class="c-label">线路数:</span>
@ -89,54 +111,90 @@
<el-dropdown> <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-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-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-menu>
</el-dropdown> </el-dropdown>
</div> </div>
</template> </template>
<template slot="cardBody"> <template slot="cardBody">
<div class="object-device-body"> <div class="object-device-body">
<div class="card-body-info"> <div class="card-body-info">
<div class="card-body-left"> <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>
<div class="card-body-right"> <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.deviceKey">{{ devItem.deviceKey }}</span>
<span :title="devItem.deviceAddress">{{ devItem.deviceAddress }}</span> <span :title="devItem.deviceAddress">{{
devItem.deviceAddress
}}</span>
</div> </div>
</div> </div>
<div class="card-body-footer"> <div class="card-body-footer">
<!-- {{ renderCardFooter(devItem) }} --> <!-- {{ 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> <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> </div>
</div> </div>
</template> </template>
</e-simple-card> </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>
<div v-if="showChildrenView"> <div v-if="showChildrenView">
<e-device-children <e-device-children
:gatewayDevice="showGatewayInfo" :gatewayDevice="showGatewayInfo"
:sourceId="sourceId" :sourceId="sourceId"
:deviceType="deviceType" :deviceType="deviceType"
@handleLinkToHome="handleLinkToHome"></e-device-children> @handleLinkToHome="handleLinkToHome"
></e-device-children>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import ESimpleCard from "@/components/Cards/index"; import ESimpleCard from "@/components/Cards/index";
import EDeviceChildren from './EDeviceChildren' import EDeviceChildren from "./EDeviceChildren";
import { webSocketProjectGatewayUrl } from "@/config/env"; import { webSocketProjectGatewayUrl } from "@/config/env";
import { listProjectDevice, listProjectModel } from '@/api/iot/project_new' import { listProjectDevice, listProjectModel } from "@/api/iot/project_new";
import { getIotFileUrl } from "@/utils/hciot" import { getIotFileUrl } from "@/utils/hciot";
const deviceStatusOpt = { const deviceStatusOpt = {
ONLINE: "在线", ONLINE: "在线",
OFFLINE: "离线", OFFLINE: "离线",
@ -147,7 +205,7 @@ export default {
name: "EDeviceTable", name: "EDeviceTable",
components: { components: {
ESimpleCard, ESimpleCard,
EDeviceChildren EDeviceChildren,
}, },
props: { props: {
sourceId: { sourceId: {
@ -226,14 +284,14 @@ export default {
projectModelList: [], projectModelList: [],
stompClient: null, stompClient: null,
socket_flag: true, socket_flag: true,
timeout_flag: null timeout_flag: null,
}; };
}, },
watch: { watch: {
sourceId(val) { sourceId(val) {
if (val) { if (val) {
this.initHTML(); this.initHTML();
this.showChildrenView = false this.showChildrenView = false;
} }
}, },
deviceType(val) { deviceType(val) {
@ -243,7 +301,7 @@ export default {
}, },
}, },
created() { created() {
this.initHTML() this.initHTML();
}, },
methods: { methods: {
getIotFileUrl, getIotFileUrl,
@ -256,7 +314,7 @@ export default {
handleChildrenDevice(gatewayDevice) { handleChildrenDevice(gatewayDevice) {
this.showChildrenView = true; this.showChildrenView = true;
this.showGatewayInfo = gatewayDevice; this.showGatewayInfo = gatewayDevice;
this.$forceUpdate() this.$forceUpdate();
}, },
// 子设备列表 返回 网关设备列表 // 子设备列表 返回 网关设备列表
handleLinkToHome() { handleLinkToHome() {
@ -267,7 +325,13 @@ export default {
return ( return (
<template> <template>
<div class="card-body-left"> <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>
<div class="card-body-right"> <div class="card-body-right">
<span>{item.deviceId}</span> <span>{item.deviceId}</span>
@ -275,18 +339,24 @@ export default {
<span>{item.deviceAddress}</span> <span>{item.deviceAddress}</span>
</div> </div>
</template> </template>
) );
}, },
// 卡片 底部 报警状态 // 卡片 底部 报警状态
renderCardFooter(item) { renderCardFooter(item) {
return ( return (
<template> <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> <icon class="iconfont icontongzhi"></icon>
<span>{item.deviceStatus == 0 ? '正常' : 'card-footer dev-error'}</span> <span>
{item.deviceStatus == 0 ? "正常" : "card-footer dev-error"}
</span>
</div> </div>
</template> </template>
) );
}, },
handleQuery() { handleQuery() {
this.getGatewayList(); this.getGatewayList();
@ -299,24 +369,29 @@ export default {
getProjectModelList() { getProjectModelList() {
listProjectModel({ listProjectModel({
projectId: this.sourceId, projectId: this.sourceId,
deviceTags: this.deviceType || '' deviceTags: this.deviceType || "",
}).then(res => { }).then((res) => {
this.projectModelList = res.data this.projectModelList = res.data;
}) });
}, },
// 获取 项目网关设备列表 // 获取 项目网关设备列表
getGatewayList() { getGatewayList() {
this.list = [] this.list = [];
listProjectDevice(Object.assign({ listProjectDevice(
Object.assign(
{
projectId: this.sourceId, projectId: this.sourceId,
deviceTags: this.deviceType || '' deviceTags: this.deviceType || "",
}, this.queryParams)).then(res => { },
this.list = res.rows this.queryParams
)
).then((res) => {
this.list = res.rows;
if (this.stompClient) { if (this.stompClient) {
this.closeSocket() this.closeSocket();
} }
this.connection() this.connection();
}) });
}, },
// 创建一个ws 监听获取报警实时数据 // 创建一个ws 监听获取报警实时数据
connection() { connection() {
@ -329,7 +404,7 @@ export default {
if (!this.list || this.length <= 0) { if (!this.list || this.length <= 0) {
return; return;
} }
let deviceIds = this.list.map(v => v['deviceId']) let deviceIds = this.list.map((v) => v["deviceId"]);
this.stompClient = new WebSocket( this.stompClient = new WebSocket(
`${webSocketProjectGatewayUrl}/${this.getGuid()}/${deviceIds.toString()}` `${webSocketProjectGatewayUrl}/${this.getGuid()}/${deviceIds.toString()}`
); );
@ -341,20 +416,20 @@ export default {
const data = JSON.parse(evt.data); const data = JSON.parse(evt.data);
// this.actualEnergyCensus = data.params || {}; // this.actualEnergyCensus = data.params || {};
console.log('socket-message:', data) console.log("socket-message:", data);
this.handleDeviceInfo(data) this.handleDeviceInfo(data);
this.$forceUpdate(); this.$forceUpdate();
}, },
// 处理 socket 数据返回 赋值问题 // 处理 socket 数据返回 赋值问题
handleDeviceInfo(param) { handleDeviceInfo(param) {
if (this.list && this.list.length > 0) { if (this.list && this.list.length > 0) {
this.list = this.list.map(v => { this.list = this.list.map((v) => {
if (v['deviceId'] === param['deviceId']) { if (v["deviceId"] === param["deviceId"]) {
return Object.assign(v, param) return Object.assign(v, param);
} else { } else {
return v return v;
} }
}) });
} }
}, },
socket_onclose(e) { socket_onclose(e) {
@ -377,18 +452,19 @@ export default {
clearTimeout(this.timeout_flag); clearTimeout(this.timeout_flag);
}, },
getGuid() { getGuid() {
return "xxxxxxx_xxxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(/[xy]/g, function( return "xxxxxxx_xxxxx_4xxx_yxxx_xxxxxxxxxxxx".replace(
c /[xy]/g,
) { function (c) {
var r = (Math.random() * 16) | 0, var r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8; v = c == "x" ? r : (r & 0x3) | 0x8;
return v.toString(16); return v.toString(16);
}); }
);
}, },
}, },
destroyed() { destroyed() {
this.closeSocket() this.closeSocket();
} },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
@ -409,8 +485,8 @@ export default {
.object-device-card { .object-device-card {
width: 285px; width: 285px;
height: 164px; height: 164px;
background: #FFFFFF; background: #ffffff;
border: 1px solid #E4EBF4; border: 1px solid #e4ebf4;
box-shadow: 0px 0px 8px 0px rgba(17, 76, 157, 0.26); box-shadow: 0px 0px 8px 0px rgba(17, 76, 157, 0.26);
border-radius: 5px; border-radius: 5px;
margin: 5px; margin: 5px;
@ -418,19 +494,20 @@ export default {
font-size: 14px; font-size: 14px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #00C805; color: #00c805;
} }
.off-line { .off-line {
color: #DA2710; color: #da2710;
} }
.card-right { .card-right {
display: flex; display: flex;
font-size: 14px; font-size: 14px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
color: #6B778C; color: #6b778c;
align-items: baseline; align-items: baseline;
.c-label {} .c-label {
}
.c-number { .c-number {
color: #344567; color: #344567;
margin: 0 8px; margin: 0 8px;
@ -513,7 +590,7 @@ export default {
} }
} }
.dev-error { .dev-error {
color: #DC3520; color: #dc3520;
} }
} }
} }