Skip to content

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

fix: 修复站点详情查看，站点设备查看列表

parent fefc92f1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1076 additions and 977 deletions
device-manager-ui/admin/src/components/HeaderSite.vue
View file @ 9ee5eec9
......@@ -129,7 +129,7 @@ export default {
const { siteTree } = res.data;
this.sitelist = siteTree;
let arr = [];
const treeFn = function (e) {
const treeFn = function(e) {
e.forEach((element) => {
arr.push(element);
if (element.children && element.children.length > 0) {
......@@ -145,6 +145,14 @@ export default {
},
clickSite(obj) {
session.setSession("siteid", obj.id);
let path = this.$route.path;
let query = this.$route.query;
if (query.siteId) {
this.$router.push({
path,
query: { ...query, siteId: obj.id },
});
}
this.show = false;
if (location.href.search(/token/gi) >= 0) {
setTimeout(() => {
......
device-manager-ui/admin/src/views/sitestat/list.vue
View file @ 9ee5eec9
......@@ -5,20 +5,26 @@
<el-card>
<div slot="header">
<span><b class="cardTitle">站点分布</b></span>
<el-button style="float: right" @click="switchStat" type="text">切换为地图模式</el-button>
<el-button style="float: right" @click="switchStat" type="text"
>切换为地图模式</el-button
>
</div>
<el-scrollbar style="height: 100%">
<el-tree size="mini"
ref="siteTree"
:data="areaData"
id="el-tree"
node-key="id"
indent="4"
:props="treeProps"
:load="loadNode"
highlight-current default-expand-all :expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick">
<el-tree
size="mini"
ref="siteTree"
:data="areaData"
id="el-tree"
node-key="id"
indent="4"
:props="treeProps"
:load="loadNode"
highlight-current
default-expand-all
:expand-on-click-node="false"
:render-content="renderContent"
@node-click="handleNodeClick"
>
</el-tree>
</el-scrollbar>
</el-card>
......@@ -27,9 +33,22 @@
<el-col :span="18" :xs="12">
<el-card>
<el-row>
<LayoutTable ref="layoutTable" :data="tableData" notAdd notDel :config="tableConfig">
<el-button slot="table-head-left2" style="margin-left: 10px" type="primary" class="addclass" size="mini" @click="doExport"
:disabled="isExport">导出
<LayoutTable
ref="layoutTable"
:data="tableData"
notAdd
notDel
:config="tableConfig"
>
<el-button
slot="table-head-left2"
style="margin-left: 10px"
type="primary"
class="addclass"
size="mini"
@click="doExport"
:disabled="isExport"
>导出
</el-button>
</LayoutTable>
</el-row>
......@@ -37,7 +56,7 @@
</el-col>
</el-row>
<dialog-show ref="dialogform" @ok="getData"/>
<dialog-show ref="dialogform" @ok="getData" />
</div>
</template>
......@@ -49,44 +68,43 @@ import tree from "@/assets/mixins/tree";
export default {
name: "Sitestat",
components: {dialogShow},
components: { dialogShow },
mixins: [table, tree],
created() {
this.$get("/sitestat/siteTree", {}).then(({data}) => {
this.$get("/sitestat/siteTree", {}).then(({ data }) => {
// this.areaData = data.siteTree;
this.areaData = data.data;
console.log("areaData1",data.data)
console.log("areaData1", data.data);
});
},
methods: {
/** 下载模板操作 */
downloadTemplate() {
this.isExport = true;
this.$download("/sitestat/downloadTemplate", {}, {type: "excel"})
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
this.$download("/sitestat/downloadTemplate", {}, { type: "excel" })
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
},
/** 导出Excel */
doExport() {
this.isExport = true;
this.$download(
"/sitestat/exportExcel",
{
siteId: this.$route.query["siteId"],
siteName: this.$route.query["siteName"],
},
{type: "excel"}
"/sitestat/exportExcel",
{
siteId: this.$route.query["siteId"],
siteName: this.$route.query["siteName"],
},
{ type: "excel" }
)
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
.then(() => (this.isExport = false))
.catch((error) => {
this.isExport = false;
this.$message.error(error.message);
});
},
/** 重写新增方法 */
......@@ -99,11 +117,13 @@ export default {
},
/** 重写查看方法 */
toView(row) {
let path = this.$route.path;
sessionStorage.setItem("sitestat", path);
//console.log(row)
//进入设备列表页面
this.$router.push({
path: "/device/list",
query: {sitestatId: row.id, siteId: row.siteId},
query: { sitestatId: row.id, siteId: row.siteId },
});
},
......@@ -126,12 +146,12 @@ export default {
siteIdList: node.id.split(",").map((i) => parseInt(i)),
};
} else {
this.query = {siteId: node.id};
this.query = { siteId: node.id };
}
this.getData();
} else if (node.type === "area") {
this.query = {areaCode: node.areaCode};
this.query = { areaCode: node.areaCode };
this.getData();
}
......@@ -162,9 +182,9 @@ export default {
width: 50,
},
{label: "站点名称", align: "center", prop: "siteName"},
{ label: "站点名称", align: "center", prop: "siteName" },
{label: "站点编号", align: "center", prop: "siteCode"},
{ label: "站点编号", align: "center", prop: "siteCode" },
{
label: "设备总数",
......@@ -206,15 +226,15 @@ export default {
width: 240,
formatter: (row) => {
return (
<table-buttons
noAdd
noEdit
noDel
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
<table-buttons
noAdd
noEdit
noDel
row={row}
onEdit={this.toEdit}
onView={this.toView}
onDel={this.toDel}
/>
);
},
},
......@@ -249,12 +269,18 @@ export default {
}
.mytree ::v-deep {
.el-tree--highlight-current ::v-deep .el-tree-node.is-checked > .el-tree-node__content {
.el-tree--highlight-current
::v-deep
.el-tree-node.is-checked
> .el-tree-node__content {
background-color: rgb(255, 255, 255);
color: rgb(64, 158, 255);
}
.el-tree--highlight-current ::v-deep .el-tree-node.is-current > .el-tree-node__content {
.el-tree--highlight-current
::v-deep
.el-tree-node.is-current
> .el-tree-node__content {
background-color: rgb(255, 255, 255);
color: rgb(64, 158, 255);
}
......
device-manager-ui/admin/src/views/sitestat/mapDetail.vue
View file @ 9ee5eec9
......@@ -146,7 +146,10 @@
justify="space-between"
>
<!-- <img src="../../assets/images/排队机.png" alt="" /> -->
<img :src="require(`../../assets/images/${label}.png`)" />
<img
v-if="label"
:src="require(`../../assets/images/${label}.png`)"
/>
<!-- <i style="font-size: 20px" class="el-icon-location-information"></i> -->
<span style="font-size: 12px">{{ label }}</span>
<el-switch
......@@ -223,6 +226,8 @@ export default {
this.$refs.drawerform.add(row);
},
switchList() {
let path = this.$route.path;
sessionStorage.setItem("sitestat", path);
//进入设备列表页面
this.$router.push({
path: "/device/list",
......@@ -462,4 +467,4 @@ export default {
font-size: 18px;
color: deepskyblue;
}
</style>
\ No newline at end of file
</style>
device-manager-ui/admin/src/views/sitestat/maplist.vue
View file @ 9ee5eec9
......@@ -27,7 +27,7 @@
>
</el-tree>
</el-scrollbar>
</el-card>
</el-card>
</el-row>
<el-row :gutter="20" slot="rightTop" class="mytree">
<el-card>
......@@ -37,23 +37,29 @@
<div class="listbody">
<div class="listtop">
<div class="item sbzs">
<div>{{listNum.all}}</div>
<div>{{ listNum.all }}</div>
<div class="wz">设备总数(台)</div>
</div>
<div class="item zx">
<div>{{listNum.online}}</div>
<div>{{ listNum.online }}</div>
<div class="wz">在线(台)</div>
</div>
<div class="item lx">
<div>{{listNum.unline}}</div>
<div>{{ listNum.unline }}</div>
<div class="wz">离线(台)</div>
</div>
</div>
<div class="maplist">
<div v-for="(item,index) in rightShowList" :key="index" class="deployitem">
<div
v-for="(item, index) in rightShowList"
:key="index"
class="deployitem"
>
<div class="top">
<div class="title">{{ item.label }}</div>
<div class="ckxq pointer" @click="getDetailData(item)">查看详情</div>
<div class="ckxq pointer" @click="getDetailData(item)">
查看详情
</div>
</div>
<div class="are">{{ item.detailAddress }}</div>
<div class="data">
......@@ -67,10 +73,10 @@
离线：<span>{{ item.offlineTotal }}台</span>
</div>
</div>
</div>
</div>
</div>
</div>
</el-card>
</el-card>
</el-row>
</Map>
<dialog-show ref="dialogform" @ok="getData" />
......@@ -89,44 +95,44 @@ export default {
mounted() {
this.pageInfo.list = "/sitestat/list";
},
watch:{
originData(newval){
let val = JSON.parse(JSON.stringify(newval))
watch: {
originData(newval) {
let val = JSON.parse(JSON.stringify(newval));
let arr = this.flatten(val).filter((v) => {
return v.type == "site";
});
this.rightShowList = arr
return v.type == "site";
});
this.rightShowList = arr;
let all = 0;
let online = 0;
let unline = 0;
arr.forEach(v=>{
all += parseInt(v.deviceTotal)
online += parseInt(v.onlineTotal)
unline += parseInt(v.offlineTotal)
})
this.listNum.all = all
this.listNum.online = online
this.listNum.unline = unline
}
arr.forEach((v) => {
all += parseInt(v.deviceTotal);
online += parseInt(v.onlineTotal);
unline += parseInt(v.offlineTotal);
});
this.listNum.all = all;
this.listNum.online = online;
this.listNum.unline = unline;
},
},
created() {
this.pageInfo.list = "/sitestat/list";
// this.$get("/sitestat/maplist", {}).then(({ data }) => {
// this.originData = data;
// this.$refs.map.refresh(this.originData);
// this.originData = data;
// this.$refs.map.refresh(this.originData);
// });
this.$get("/sitestat/siteTree", {}).then(({ data }) => {
let arr = []
data.data.forEach(i=>{
let arr = [];
data.data.forEach((i) => {
arr.push({
...i,
lat:i.latitude,
lng:i.longitude,
level:1
})
})
this.originData = arr
lat: i.latitude,
lng: i.longitude,
level: 1,
});
});
this.originData = arr;
this.areaData = JSON.parse(JSON.stringify(arr));
this.$refs.map.refresh(this.originData);
});
......@@ -173,7 +179,7 @@ export default {
this.$router.push({
path: "/sitestat/mapDetail",
// query: info,
query: { sitestatId: info.id, siteId: info.siteId },
query: { sitestatId: info.id, siteId: info.siteId || info.id },
});
},
......@@ -211,37 +217,39 @@ export default {
obj.lat = node.latitude;
this.$refs.map.relocate(obj);
}
if(node.level==1){
let arr = []
arr.push(JSON.parse(JSON.stringify(node)))
this.originData = arr
if (node.level == 1) {
let arr = [];
arr.push(JSON.parse(JSON.stringify(node)));
this.originData = arr;
this.$refs.map.refresh(this.originData);
this.$refs.map.zoom = 6
}else{
let children = JSON.parse(JSON.stringify(node.children))
children = this.$refs.map.flatten(children)
children.unshift(JSON.parse(JSON.stringify(node)))
this.$refs.map.zoom = 6;
} else {
let children = JSON.parse(JSON.stringify(node.children));
children = this.$refs.map.flatten(children);
children.unshift(JSON.parse(JSON.stringify(node)));
children = children.filter((v) => {
return v.type == "site";
});
children = children.map(i=> {return {
...i,
lat:i.latitude,
lng:i.longitude,
}})
this.originData = children
children = children.map((i) => {
return {
...i,
lat: i.latitude,
lng: i.longitude,
};
});
this.originData = children;
this.$refs.map.refresh(this.originData);
}
},
},
data() {
return {
listNum:{
all:0,
online:0,
unline:0
listNum: {
all: 0,
online: 0,
unline: 0,
},
rightShowList:[],
rightShowList: [],
isExport: false,
originData: [],
config: {
......@@ -300,69 +308,69 @@ export default {
</script>
<style lang="less" scoped>
.deployitem {
padding: 10px 0;
color: #223333;
border-bottom: 1px solid gainsboro;
.top{
display: flex;
justify-content: space-between;
.deployitem {
padding: 10px 0;
color: #223333;
border-bottom: 1px solid gainsboro;
.top {
display: flex;
justify-content: space-between;
}
.ckxq {
font-size: 10px;
margin-right: 20px;
margin-top: 8px;
color: #1890ff;
flex-shrink: 0;
}
.data {
display: flex;
font-size: 12px;
font-weight: 500;
color: #999999;
margin: 4px 0;
.dataitem {
margin-right: 16px;
}
.ckxq {
font-size: 10px;
margin-right: 20px;
margin-top: 8px;
color: #1890ff;
flex-shrink: 0;
.sbzs > span {
color: #223333;
}
.data {
display: flex;
font-size: 12px;
font-weight: 500;
color: #999999;
margin: 4px 0;
.dataitem {
margin-right: 16px;
}
.sbzs > span {
color: #223333;
}
.zx > span {
color: #0064e9;
}
.zx {
position: relative;
}
.zx::before {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: #0064e9;
border-radius: 50%;
top: 6px;
left: -6px;
}
.lx > span {
color: #fa4d4c;
}
.zx > span {
color: #0064e9;
}
.zx {
position: relative;
}
.title {
font-size: 14px;
font-weight: 600;
padding: 4px 0;
.zx::before {
content: "";
position: absolute;
width: 4px;
height: 4px;
background: #0064e9;
border-radius: 50%;
top: 6px;
left: -6px;
}
.are {
font-size: 12px;
.lx > span {
color: #fa4d4c;
}
}
.title {
font-size: 14px;
font-weight: 600;
padding: 4px 0;
}
.are {
font-size: 12px;
}
}
.listbody::-webkit-scrollbar {
width: 0;
}
.listbody{
.listbody {
max-height: 700px;
overflow: auto;
.listtop{
overflow: auto;
.listtop {
display: flex;
justify-content: space-between;
padding: 20px 0 10px;
......@@ -376,7 +384,7 @@ export default {
flex-direction: column;
color: #fff;
padding-bottom: 6px;
font-size: 8px;
font-size: 12px;
.wz {
margin-left: 14px;
}
......
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