13 changed files with 608 additions and 949 deletions
@ -1,27 +0,0 @@ |
|||||||
import request from '@/router/axios'; |
|
||||||
|
|
||||||
/** |
|
||||||
* 获取租户详情 |
|
||||||
* @param{string} tenantId |
|
||||||
*/ |
|
||||||
export const getTenantDetail = (tenantId) => request({ |
|
||||||
url: '/api/iot/tenant/summary', |
|
||||||
params: { |
|
||||||
tenantId, |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
/** |
|
||||||
* 获取在线设备统计数据 |
|
||||||
* @param queryStartTime |
|
||||||
* @param queryEndTime |
|
||||||
* @param productId |
|
||||||
*/ |
|
||||||
export const getOnlineDeviceData = (queryStartTime, queryEndTime, productId) => request({ |
|
||||||
url: '/api/iot/statistics/online', |
|
||||||
params: { |
|
||||||
queryStartTime, |
|
||||||
queryEndTime, |
|
||||||
productId, |
|
||||||
}, |
|
||||||
}); |
|
||||||
@ -1,214 +0,0 @@ |
|||||||
<template> |
|
||||||
<basic-container> |
|
||||||
<avue-crud :option="option" |
|
||||||
:table-loading="loading" |
|
||||||
:data="data" |
|
||||||
:page.sync="page" |
|
||||||
:permission="permissionList" |
|
||||||
:before-open="beforeOpen" |
|
||||||
v-model="form" |
|
||||||
ref="crud" |
|
||||||
@row-update="rowUpdate" |
|
||||||
@row-save="rowSave" |
|
||||||
@row-del="rowDel" |
|
||||||
@search-change="searchChange" |
|
||||||
@search-reset="searchReset" |
|
||||||
@current-change="currentChange" |
|
||||||
@size-change="sizeChange" |
|
||||||
@refresh-change="refreshChange" |
|
||||||
@on-load="onLoad"> |
|
||||||
</avue-crud> |
|
||||||
</basic-container> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {add, getDetail, getList, remove, update} from "@/api/iot/vendor/aliConfig"; |
|
||||||
import {mapGetters} from "vuex"; |
|
||||||
|
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
form: {}, |
|
||||||
query: {}, |
|
||||||
loading: true, |
|
||||||
page: { |
|
||||||
pageSize: 10, |
|
||||||
currentPage: 1, |
|
||||||
total: 0 |
|
||||||
}, |
|
||||||
option: { |
|
||||||
tip: false, |
|
||||||
searchShow: true, |
|
||||||
searchMenuSpan: 6, |
|
||||||
border: true, |
|
||||||
index: true, |
|
||||||
viewBtn: true, |
|
||||||
columnBtn: false, |
|
||||||
selection: false, |
|
||||||
dialogClickModal: false, |
|
||||||
dialogWidth: "45%", |
|
||||||
column: [ |
|
||||||
{ |
|
||||||
label: "配置名称", |
|
||||||
prop: "configName", |
|
||||||
span: 24, |
|
||||||
labelWidth: 120, |
|
||||||
search: true, |
|
||||||
searchLabelWidth: 80, |
|
||||||
searchPlaceholder: "请输入配置名称", |
|
||||||
rules: [{ |
|
||||||
required: true, |
|
||||||
message: "请输入配置名称", |
|
||||||
trigger: "blur" |
|
||||||
}], |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: "区域", |
|
||||||
prop: "regionId", |
|
||||||
span: 22, |
|
||||||
labelWidth: 120, |
|
||||||
searchPlaceholder: "请输入区域", |
|
||||||
rules: [{ |
|
||||||
required: true, |
|
||||||
message: "请输入区域", |
|
||||||
trigger: "blur" |
|
||||||
}] |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: "AccessKey", |
|
||||||
prop: "accessKey", |
|
||||||
span: 22, |
|
||||||
labelWidth: 120, |
|
||||||
searchPlaceholder: "请输入 AccessKey", |
|
||||||
rules: [{ |
|
||||||
required: true, |
|
||||||
message: "请输入 AccessKey", |
|
||||||
trigger: "blur" |
|
||||||
}] |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: "AccessSecret", |
|
||||||
prop: "accessSecret", |
|
||||||
span: 22, |
|
||||||
labelWidth: 120, |
|
||||||
searchPlaceholder: "请输入 AccessSecret", |
|
||||||
rules: [{ |
|
||||||
required: true, |
|
||||||
message: "请输入 AccessSecret", |
|
||||||
trigger: "blur" |
|
||||||
}] |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: "接入域名", |
|
||||||
prop: "connectionUrl", |
|
||||||
span: 22, |
|
||||||
labelWidth: 120, |
|
||||||
searchPlaceholder: "请输入接入域名", |
|
||||||
rules: [{ |
|
||||||
required: false, |
|
||||||
message: "请输入接入域名", |
|
||||||
trigger: "blur" |
|
||||||
}] |
|
||||||
}, |
|
||||||
] |
|
||||||
}, |
|
||||||
data: [] |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
...mapGetters(["permission"]), |
|
||||||
permissionList() { |
|
||||||
return { |
|
||||||
addBtn: this.vaildData(this.permission.ali_config_add, false), |
|
||||||
viewBtn: this.vaildData(this.permission.ali_config_view, false), |
|
||||||
delBtn: this.vaildData(this.permission.ali_config_delete, false), |
|
||||||
editBtn: this.vaildData(this.permission.ali_config_edit, false) |
|
||||||
}; |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
rowSave(row, done, loading) { |
|
||||||
add(row).then(() => { |
|
||||||
this.onLoad(this.page); |
|
||||||
this.$message({ |
|
||||||
type: "success", |
|
||||||
message: "操作成功!" |
|
||||||
}); |
|
||||||
done(); |
|
||||||
}, error => { |
|
||||||
loading(); |
|
||||||
window.console.log(error); |
|
||||||
}); |
|
||||||
}, |
|
||||||
rowUpdate(row, index, done, loading) { |
|
||||||
update(row).then(() => { |
|
||||||
this.onLoad(this.page); |
|
||||||
this.$message({ |
|
||||||
type: "success", |
|
||||||
message: "操作成功!" |
|
||||||
}); |
|
||||||
done(); |
|
||||||
}, error => { |
|
||||||
loading(); |
|
||||||
console.log(error); |
|
||||||
}); |
|
||||||
}, |
|
||||||
rowDel(row) { |
|
||||||
this.$confirm("确定将选择数据删除?", { |
|
||||||
confirmButtonText: "确定", |
|
||||||
cancelButtonText: "取消", |
|
||||||
type: "warning" |
|
||||||
}) |
|
||||||
.then(() => { |
|
||||||
return remove(row.id); |
|
||||||
}) |
|
||||||
.then(() => { |
|
||||||
this.onLoad(this.page); |
|
||||||
this.$message({ |
|
||||||
type: "success", |
|
||||||
message: "操作成功!" |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
beforeOpen(done, type) { |
|
||||||
if (["edit", "view"].includes(type)) { |
|
||||||
getDetail(this.form.id).then(res => { |
|
||||||
this.form = res.data.data; |
|
||||||
}); |
|
||||||
} |
|
||||||
done(); |
|
||||||
}, |
|
||||||
searchReset() { |
|
||||||
this.query = {}; |
|
||||||
this.onLoad(this.page); |
|
||||||
}, |
|
||||||
searchChange(params, done) { |
|
||||||
this.query = params; |
|
||||||
this.page.currentPage = 1; |
|
||||||
this.onLoad(this.page, params); |
|
||||||
done(); |
|
||||||
}, |
|
||||||
currentChange(currentPage) { |
|
||||||
this.page.currentPage = currentPage; |
|
||||||
}, |
|
||||||
sizeChange(pageSize) { |
|
||||||
this.page.pageSize = pageSize; |
|
||||||
}, |
|
||||||
refreshChange() { |
|
||||||
this.onLoad(this.page, this.query); |
|
||||||
}, |
|
||||||
onLoad(page, params = {}) { |
|
||||||
this.loading = true; |
|
||||||
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => { |
|
||||||
const data = res.data.data; |
|
||||||
this.page.total = data.total; |
|
||||||
this.data = data.records; |
|
||||||
this.loading = false; |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
</style> |
|
||||||
@ -1,199 +0,0 @@ |
|||||||
<template> |
|
||||||
<basic-container> |
|
||||||
<avue-crud :option="option" |
|
||||||
:table-loading="loading" |
|
||||||
:data="data" |
|
||||||
:page.sync="page" |
|
||||||
:permission="permissionList" |
|
||||||
:before-open="beforeOpen" |
|
||||||
v-model="form" |
|
||||||
ref="crud" |
|
||||||
@row-update="rowUpdate" |
|
||||||
@row-save="rowSave" |
|
||||||
@row-del="rowDel" |
|
||||||
@search-change="searchChange" |
|
||||||
@search-reset="searchReset" |
|
||||||
@current-change="currentChange" |
|
||||||
@size-change="sizeChange" |
|
||||||
@refresh-change="refreshChange" |
|
||||||
@on-load="onLoad"> |
|
||||||
</avue-crud> |
|
||||||
</basic-container> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {add, getDetail, getList, remove, update} from "@/api/iot/vendor/aliConsumer"; |
|
||||||
import {mapGetters} from "vuex"; |
|
||||||
|
|
||||||
export default { |
|
||||||
data() { |
|
||||||
return { |
|
||||||
form: {}, |
|
||||||
query: {}, |
|
||||||
loading: true, |
|
||||||
page: { |
|
||||||
pageSize: 10, |
|
||||||
currentPage: 1, |
|
||||||
total: 0 |
|
||||||
}, |
|
||||||
option: { |
|
||||||
tip: false, |
|
||||||
searchShow: true, |
|
||||||
searchMenuSpan: 6, |
|
||||||
border: true, |
|
||||||
index: true, |
|
||||||
viewBtn: true, |
|
||||||
columnBtn: false, |
|
||||||
selection: false, |
|
||||||
dialogClickModal: false, |
|
||||||
dialogWidth: "45%", |
|
||||||
column: [ |
|
||||||
{ |
|
||||||
label: "阿里云配置", |
|
||||||
prop: "configId", |
|
||||||
type: "tree", |
|
||||||
dicUrl: "/api/iot/ali/config/select", |
|
||||||
props: { |
|
||||||
label: "configName", |
|
||||||
value: "id" |
|
||||||
}, |
|
||||||
span: 24, |
|
||||||
labelWidth: 110, |
|
||||||
search: true, |
|
||||||
searchLabelWidth: 90, |
|
||||||
searchPlaceholder: "请选择阿里云配置", |
|
||||||
rules: [{ |
|
||||||
required: true, |
|
||||||
message: "请选择阿里云配置", |
|
||||||
trigger: "click" |
|
||||||
}], |
|
||||||
editDisplay: false, |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: "消费组名称", |
|
||||||
prop: "consumerName", |
|
||||||
span: 24, |
|
||||||
labelWidth: 110, |
|
||||||
searchPlaceholder: "请输入消费组名称", |
|
||||||
rules: [{ |
|
||||||
required: true, |
|
||||||
message: "请输入消费组名称", |
|
||||||
trigger: "blur" |
|
||||||
}] |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: "消费组ID", |
|
||||||
prop: "consumerId", |
|
||||||
labelWidth: 110, |
|
||||||
search: true, |
|
||||||
searchPlaceholder: "请输入消费组ID", |
|
||||||
rules: [{ |
|
||||||
required: true, |
|
||||||
message: "请输入消费组ID", |
|
||||||
trigger: "blur" |
|
||||||
}], |
|
||||||
addDisplay: false, |
|
||||||
editDisplay: false, |
|
||||||
}, |
|
||||||
] |
|
||||||
}, |
|
||||||
data: [] |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
...mapGetters(["permission"]), |
|
||||||
permissionList() { |
|
||||||
return { |
|
||||||
addBtn: this.vaildData(this.permission.ali_config_add, false), |
|
||||||
viewBtn: this.vaildData(this.permission.ali_config_view, false), |
|
||||||
delBtn: this.vaildData(this.permission.ali_config_delete, false), |
|
||||||
editBtn: this.vaildData(this.permission.ali_config_edit, false) |
|
||||||
}; |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
rowSave(row, done, loading) { |
|
||||||
add(row).then(() => { |
|
||||||
this.onLoad(this.page); |
|
||||||
this.$message({ |
|
||||||
type: "success", |
|
||||||
message: "操作成功!" |
|
||||||
}); |
|
||||||
done(); |
|
||||||
}, error => { |
|
||||||
loading(); |
|
||||||
window.console.log(error); |
|
||||||
}); |
|
||||||
}, |
|
||||||
rowUpdate(row, index, done, loading) { |
|
||||||
update(row).then(() => { |
|
||||||
this.onLoad(this.page); |
|
||||||
this.$message({ |
|
||||||
type: "success", |
|
||||||
message: "操作成功!" |
|
||||||
}); |
|
||||||
done(); |
|
||||||
}, error => { |
|
||||||
loading(); |
|
||||||
console.log(error); |
|
||||||
}); |
|
||||||
}, |
|
||||||
rowDel(row) { |
|
||||||
this.$confirm("确定将选择数据删除?", { |
|
||||||
confirmButtonText: "确定", |
|
||||||
cancelButtonText: "取消", |
|
||||||
type: "warning" |
|
||||||
}) |
|
||||||
.then(() => { |
|
||||||
return remove(row.id); |
|
||||||
}) |
|
||||||
.then(() => { |
|
||||||
this.onLoad(this.page); |
|
||||||
this.$message({ |
|
||||||
type: "success", |
|
||||||
message: "操作成功!" |
|
||||||
}); |
|
||||||
}); |
|
||||||
}, |
|
||||||
beforeOpen(done, type) { |
|
||||||
if (["edit", "view"].includes(type)) { |
|
||||||
getDetail(this.form.id).then(res => { |
|
||||||
this.form = res.data.data; |
|
||||||
}); |
|
||||||
} |
|
||||||
done(); |
|
||||||
}, |
|
||||||
searchReset() { |
|
||||||
this.query = {}; |
|
||||||
this.onLoad(this.page); |
|
||||||
}, |
|
||||||
searchChange(params, done) { |
|
||||||
this.query = params; |
|
||||||
this.page.currentPage = 1; |
|
||||||
this.onLoad(this.page, params); |
|
||||||
done(); |
|
||||||
}, |
|
||||||
currentChange(currentPage) { |
|
||||||
this.page.currentPage = currentPage; |
|
||||||
}, |
|
||||||
sizeChange(pageSize) { |
|
||||||
this.page.pageSize = pageSize; |
|
||||||
}, |
|
||||||
refreshChange() { |
|
||||||
this.onLoad(this.page, this.query); |
|
||||||
}, |
|
||||||
onLoad(page, params = {}) { |
|
||||||
this.loading = true; |
|
||||||
getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => { |
|
||||||
const data = res.data.data; |
|
||||||
this.page.total = data.total; |
|
||||||
this.data = data.records; |
|
||||||
this.loading = false; |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style> |
|
||||||
</style> |
|
||||||
@ -1,352 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<div class='infos'> |
|
||||||
<el-card> |
|
||||||
<div class='title'> |
|
||||||
<span class='icon el-icon-tickets'></span> |
|
||||||
租户基本信息 |
|
||||||
</div> |
|
||||||
<div class='content'> |
|
||||||
<div> |
|
||||||
租户ID <span>{{tenantDetail.tenantId}}</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
租户名称 <span>{{tenantDetail.tenantName}}</span> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
开通时间 <span>{{tenantDetail.tenantCreateTime}}</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-card> |
|
||||||
<el-card> |
|
||||||
<div class='title'> |
|
||||||
<span class='icon el-icon-cpu'></span> |
|
||||||
设备数 |
|
||||||
</div> |
|
||||||
<div class='content'> |
|
||||||
<Bar |
|
||||||
:current-value='tenantDetail.countStatistics.productCount || 0' |
|
||||||
:total-value='tenantDetail.countStatistics.productLimitNumber || 1' |
|
||||||
> |
|
||||||
<template #title> |
|
||||||
<div class='bar-title'> |
|
||||||
<div class='label'> |
|
||||||
产品 |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template #currentValue>已添加</template> |
|
||||||
</Bar> |
|
||||||
<Bar |
|
||||||
:current-value='tenantDetail.countStatistics.deviceCount || 0' |
|
||||||
:total-value='(tenantDetail.countStatistics.deviceLimitNumberPerProduct || 1) * (tenantDetail.countStatistics.productLimitNumber || 1)' |
|
||||||
> |
|
||||||
<template #title> |
|
||||||
<div class='bar-title'> |
|
||||||
<div class='label'> |
|
||||||
设备 |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<template #currentValue>已添加</template> |
|
||||||
</Bar> |
|
||||||
</div> |
|
||||||
</el-card> |
|
||||||
<el-card> |
|
||||||
<div class='title'> |
|
||||||
<span class='icon el-icon-coin'></span> |
|
||||||
Open API |
|
||||||
</div> |
|
||||||
<div class='content'> |
|
||||||
<div> |
|
||||||
AppID <span>{{tenantDetail.openApi.appId || '-'}}</span> |
|
||||||
</div> |
|
||||||
<div class='secret'> |
|
||||||
AppSecret |
|
||||||
<span> |
|
||||||
{{tenantDetail.openApi.appSecret || '-'}} |
|
||||||
</span> |
|
||||||
<a class='reset' @click='handleReset'>重置</a> |
|
||||||
</div> |
|
||||||
<div> |
|
||||||
生成时间 <span>{{tenantDetail.openApi.createTime || '-'}}</span> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-card> |
|
||||||
</div> |
|
||||||
<div class='device'> |
|
||||||
<el-card> |
|
||||||
<div class='title'> |
|
||||||
<span class='icon el-icon-cpu'></span> |
|
||||||
实时在线设备数 |
|
||||||
<el-tooltip effect='dark' content='于物联网平台建立长连接的设备数量，数据采集有一定延迟。' placement='top'> |
|
||||||
<span class='tips el-icon-question'></span> |
|
||||||
</el-tooltip> |
|
||||||
</div> |
|
||||||
<div class='content'> |
|
||||||
<Bar |
|
||||||
:current-value='tenantDetail.onlineStatistics.onlineCount || 0' |
|
||||||
:total-value='tenantDetail.onlineStatistics.totalCount || 1' |
|
||||||
> |
|
||||||
<template #title> |
|
||||||
<div class='bar-title'> |
|
||||||
<div class='label'> |
|
||||||
当前在线设备 |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
</Bar> |
|
||||||
<div class='not-active'> |
|
||||||
<div> |
|
||||||
占比: {{ |
|
||||||
((tenantDetail.onlineStatistics.onlineCount || 0) / (tenantDetail.onlineStatistics.totalCount || 1) * 100).toFixed(2) |
|
||||||
}}% |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</el-card> |
|
||||||
<el-card> |
|
||||||
<div class='title'> |
|
||||||
<span class='icon el-icon-cpu'></span> |
|
||||||
在线设备数量 |
|
||||||
<DatePicker |
|
||||||
v-model='onLineDeviceQueryDate' |
|
||||||
@change='getOnLineDevice' |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<BasicLine class='line-chart' :data='onLineDeviceList' /> |
|
||||||
</el-card> |
|
||||||
</div> |
|
||||||
<div class='message'> |
|
||||||
<el-card> |
|
||||||
<div class='title'> |
|
||||||
<span class='icon el-icon-chat-dot-square'></span> |
|
||||||
发送到平台的消息量 |
|
||||||
<el-tooltip effect='dark' content='从物联网发送到服务端和设备的消息，数据采集有一定延迟。' placement='top'> |
|
||||||
<span class='tips el-icon-question'></span> |
|
||||||
</el-tooltip> |
|
||||||
</div> |
|
||||||
<BasicLine :height='210'/> |
|
||||||
<div class='month'>本月消息量: 3000</div> |
|
||||||
</el-card> |
|
||||||
<el-card> |
|
||||||
<div class='title'> |
|
||||||
<span class='icon el-icon-chat-dot-square'></span> |
|
||||||
平台发出的消息量 |
|
||||||
<el-tooltip effect='dark' content='从物联网发送到服务端和设备的消息，数据采集有一定延迟。' placement='top'> |
|
||||||
<span class='tips el-icon-question'></span> |
|
||||||
</el-tooltip> |
|
||||||
</div> |
|
||||||
<BasicLine :height='210' /> |
|
||||||
<div class='month'>本月消息量: 3000</div> |
|
||||||
</el-card> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
import {mapGetters} from 'vuex'; |
|
||||||
import dayjs from 'dayjs'; |
|
||||||
import Bar from '@/components/Bar/index.vue'; |
|
||||||
import BasicLine from '@/components/Charts/BasicLine'; |
|
||||||
import {getOnlineDeviceData, getTenantDetail} from '@/api/sys'; |
|
||||||
import DatePicker from '@/components/DatePicker/index.vue'; |
|
||||||
|
|
||||||
export default { |
|
||||||
name: 'Sys', |
|
||||||
components: { |
|
||||||
Bar, |
|
||||||
BasicLine, |
|
||||||
DatePicker, |
|
||||||
}, |
|
||||||
data() { |
|
||||||
return { |
|
||||||
tenantDetail: { |
|
||||||
countStatistics: {}, |
|
||||||
onlineStatistics: {}, |
|
||||||
openApi: {}, |
|
||||||
}, |
|
||||||
onLineDeviceQueryDate: [dayjs().subtract(24, 'hour'), dayjs()], |
|
||||||
onLineDeviceList: [], |
|
||||||
}; |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
...mapGetters(['userInfo']), |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
// 重置 |
|
||||||
handleReset() { |
|
||||||
this.$confirm('重置后将导致原有AppSecret失效, 是否确定重置？', { type: 'warning' }).then(() => { |
|
||||||
// todo reset |
|
||||||
}).catch(() => {}); |
|
||||||
}, |
|
||||||
|
|
||||||
// 获取在线设备数量 |
|
||||||
getOnLineDevice() { |
|
||||||
let [start, end] = this.onLineDeviceQueryDate; |
|
||||||
const format = 'YYYY-MM-DD HH:mm:ss'; |
|
||||||
start = dayjs(start).format(format); |
|
||||||
end = dayjs(end).format(format); |
|
||||||
getOnlineDeviceData(start, end).then((res) => { |
|
||||||
this.onLineDeviceList = res.data.data.map((item) => ({ |
|
||||||
label: dayjs(item.timeString).format('MM/DD HH:mm'), |
|
||||||
value: item.onlineNum, |
|
||||||
})); |
|
||||||
}); |
|
||||||
}, |
|
||||||
|
|
||||||
initData() { |
|
||||||
getTenantDetail(this.userInfo['tenant_id']).then((res) => { |
|
||||||
this.tenantDetail = res.data.data; |
|
||||||
}); |
|
||||||
this.getOnLineDevice(); |
|
||||||
}, |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
this.initData(); |
|
||||||
}, |
|
||||||
}; |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang='scss'> |
|
||||||
.infos { |
|
||||||
display: flex; |
|
||||||
|
|
||||||
.el-card { |
|
||||||
flex: 1; |
|
||||||
margin-right: 20px; |
|
||||||
|
|
||||||
&:last-child { |
|
||||||
margin-right: 0; |
|
||||||
} |
|
||||||
|
|
||||||
.content { |
|
||||||
color: #555555; |
|
||||||
font-size: 14px; |
|
||||||
line-height: 3; |
|
||||||
|
|
||||||
span { |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.reset { |
|
||||||
color: red; |
|
||||||
cursor: pointer; |
|
||||||
margin: 0 20px; |
|
||||||
|
|
||||||
&:hover { |
|
||||||
text-decoration: underline; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.ki-bar:first-child { |
|
||||||
margin-top: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.ki-bar { |
|
||||||
margin-top: 30px; |
|
||||||
} |
|
||||||
|
|
||||||
.secret { |
|
||||||
display: flex; |
|
||||||
|
|
||||||
span { |
|
||||||
width: 0; |
|
||||||
flex: 1; |
|
||||||
overflow: hidden; |
|
||||||
white-space: nowrap; |
|
||||||
text-overflow: ellipsis; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.title { |
|
||||||
color: #000c17; |
|
||||||
font-weight: bold; |
|
||||||
display: flex; |
|
||||||
align-items: center; |
|
||||||
|
|
||||||
.icon { |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.bar-title { |
|
||||||
color: #555555; |
|
||||||
font-size: 14px; |
|
||||||
display: flex; |
|
||||||
align-items: baseline; |
|
||||||
|
|
||||||
.label { |
|
||||||
font-size: 16px; |
|
||||||
font-weight: bold; |
|
||||||
margin-right: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
span { |
|
||||||
font-size: 14px; |
|
||||||
font-weight: normal; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.tips { |
|
||||||
color: #cccccc; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-date-editor { |
|
||||||
margin-left: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.device { |
|
||||||
margin-top: 20px; |
|
||||||
display: flex; |
|
||||||
|
|
||||||
.el-card:first-child { |
|
||||||
flex: 1; |
|
||||||
margin-right: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-card:last-child { |
|
||||||
flex: 2; |
|
||||||
padding-right: 20px |
|
||||||
} |
|
||||||
|
|
||||||
.ki-bar, .line-chart { |
|
||||||
margin-top: 25px; |
|
||||||
} |
|
||||||
|
|
||||||
.not-active { |
|
||||||
margin-top: 30px; |
|
||||||
|
|
||||||
span { |
|
||||||
font-size: 14px; |
|
||||||
margin-left: 10px; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.message { |
|
||||||
margin-top: 20px; |
|
||||||
display: flex; |
|
||||||
|
|
||||||
.title { |
|
||||||
margin-bottom: 30px; |
|
||||||
} |
|
||||||
|
|
||||||
.el-card { |
|
||||||
flex: 1; |
|
||||||
} |
|
||||||
|
|
||||||
.el-card:first-child { |
|
||||||
margin-right: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.month { |
|
||||||
font-size: 14px; |
|
||||||
margin-top: 15px; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue