610 lines
17 KiB
Vue
610 lines
17 KiB
Vue
<template>
|
|
<div class="page-cloud">
|
|
<div class="public-nav-div">
|
|
<div :style="'width: calc(100% - 280px); float: left;'">
|
|
<div class="genert-div button-div">
|
|
<div class="title" >云端数据概况</div>
|
|
<div class="content-div buttom-div" v-if="userType === 'SYSTEM'">
|
|
<i class="iconfont icon-chanpinC fontsize"></i>
|
|
<p class="buttom-div-p">{{tempObject.modelCount}}</p>
|
|
<p>全部型号数量</p>
|
|
<el-button type="text" :disabled="true" @click="toProdFu">管理型号</el-button>
|
|
</div>
|
|
<div class="content-div buttom-div" v-else-if="userType === 'TENANT'">
|
|
<i class="iconfont icon-chanpinC fontsize"></i>
|
|
<p class="buttom-div-p">{{tempObject.modelCount}}</p>
|
|
<p>全部项目数量</p>
|
|
<el-button type="text" :disabled="true" @click="toProdFu">管理项目</el-button>
|
|
</div>
|
|
<div class="content-div buttom-div" v-else>
|
|
<i class="iconfont icon-chanpinC fontsize"></i>
|
|
<p class="buttom-div-p">0</p>
|
|
<p>全部项目数量</p>
|
|
<el-button type="text" :disabled="true" @click="toProdFu">管理项目</el-button>
|
|
</div>
|
|
<div class="content-div buttom-div">
|
|
<i class="iconfont icon-shebeishuliang fontsize"></i>
|
|
<p class="buttom-div-p">{{tempObject.deviceCount}}</p>
|
|
<p>全部设备数量</p>
|
|
|
|
<el-button type="text" :disabled="true" @click="toDeviceFu">管理设备</el-button>
|
|
</div>
|
|
<div class="content-div buttom-div">
|
|
<i class="iconfont icon-chufaqi fontsize"></i>
|
|
<p class="buttom-div-p">{{tempObject.onlineCount}}</p>
|
|
<p>在线设备数量</p>
|
|
|
|
<el-button type="text" :disabled="true" @click="toDeviceFu">管理设备</el-button>
|
|
</div>
|
|
<div class="content-div buttom-div">
|
|
<div style=" width: 100%; height: 160px; position: relative; top: 32px;">
|
|
<span
|
|
style="font-size: 14px; font-family: 'Microsoft YaHei'; font-weight: bold; position: relative;top: 35px;left: 20px;"
|
|
>在线率</span>
|
|
<span
|
|
style="font-size: 17px; font-family: 'Microsoft YaHei'; font-weight: bold; color: #30ff00; position: relative;top: 20px;left: -20px;"
|
|
>{{deviceRate( tempObject.deviceCount, tempObject.onlineCount)}}</span>
|
|
<pancake
|
|
styles="width: 100%; height: 160px; width: 158px; border-radius: 50%; border: 1px solid; height: 158px;"
|
|
id="pancake026"
|
|
:config="deviceConfig"
|
|
:option="{ data: [{value: tempObject.onlineCount, name:'在线'}, {value: tempObject.offlineCount, name:'离线'}], title: '设备状态' }"
|
|
></pancake>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-div buttom-div">
|
|
<i class="iconfont icon-baojing fontsize"></i>
|
|
<p class="buttom-div-p">{{alarmCount.alarmCount}}</p>
|
|
<p>报警总数</p>
|
|
|
|
<el-button type="text" :disabled="true" @click="toAlarmFu">管理报警</el-button>
|
|
</div>
|
|
<div class="content-div buttom-div">
|
|
<i class="iconfont icon-gaojingyichuli fontsize"></i>
|
|
<p class="buttom-div-p">{{alarmCount.processCount}}</p>
|
|
<p>已处理</p>
|
|
<el-button type="text" :disabled="true" @click="toAlarmFu">管理报警</el-button>
|
|
</div>
|
|
<div class="content-div buttom-div">
|
|
<i class="iconfont icon-weichuligaojing fontsize"></i>
|
|
<p class="buttom-div-p">{{alarmCount.unProcessCount}}</p>
|
|
<p>未处理</p>
|
|
<el-button type="text" :disabled="true" @click="toAlarmFu">管理报警</el-button>
|
|
</div>
|
|
|
|
<div class="content-div buttom-div">
|
|
<div style=" width: 100%; height: 160px; position: relative; top: 32px;">
|
|
<span
|
|
style="font-size: 14px; font-family: 'Microsoft YaHei'; font-weight: bold; position: relative;top: 35px;left: 18px;"
|
|
>处理率</span>
|
|
<span
|
|
style="font-size: 17px; font-family: 'Microsoft YaHei'; font-weight: bold; color: #30ff00; position: relative;top: 20px;left: -20px;"
|
|
>{{alarmRate(alarmCount.alarmCount, alarmCount.processCount)}}</span>
|
|
<pancake
|
|
styles="width: 100%; height: 160px; height: 160px; width: 158px; border-radius: 50%; border: 1px solid; height: 158px;"
|
|
:config="alarmConfig"
|
|
id="pancake157"
|
|
:option="{ data: [{value: alarmCount.processCount, name:'已处理'}, {value: alarmCount.unProcessCount, name:'未处理'}], title: '报警处理' }"
|
|
></pancake>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="genert-div" v-if="index_m_tzgg">
|
|
<div class="title">云端设备组态流程</div>
|
|
<div class="content">
|
|
<div class="content-div" @click="toProdFu">
|
|
<i class="iconfont icon-chanpinC fontsize"></i>
|
|
<p>添加产品</p>
|
|
<p>定义产品属性</p>
|
|
</div>
|
|
<div class="right-icon">
|
|
<i class="iconfont icon-right-fill youjiantou"></i>
|
|
</div>
|
|
<div class="content-div" @click="toDeviceFu">
|
|
<i class="iconfont icon-tianjiashebei fontsize"></i>
|
|
<p>添加设备</p>
|
|
<p>创建设备与实物对应</p>
|
|
</div>
|
|
<div class="right-icon">
|
|
<i class="iconfont icon-right-fill youjiantou"></i>
|
|
</div>
|
|
<div class="content-div">
|
|
<i class="iconfont icon-icon_xinyong_xianxing_jijin- fontsize"></i>
|
|
<p>数据上报</p>
|
|
<p>设备实时数据上传云端</p>
|
|
</div>
|
|
<div class="right-icon">
|
|
<i class="iconfont icon-right-fill youjiantou"></i>
|
|
</div>
|
|
<div class="content-div">
|
|
<i class="iconfont icon-lishijilu fontsize"></i>
|
|
<p>云端查看</p>
|
|
<p>云端查看设备历史数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="genert-div button-div"
|
|
style="width: calc((100% - 30px) / 2); margin-right: 30px;"
|
|
>
|
|
<div class="title">
|
|
更新日志
|
|
<div class="see-more" @click="versionSeeMoreClick()">查看更多</div>
|
|
</div>
|
|
<div class="new-div-wrap">
|
|
<div
|
|
style="font-size: 20px; line-height: 24px; margin-bottom: 3px;"
|
|
>更新内容 ( {{versionObj.version}} )</div>
|
|
<div
|
|
style="font-size: 16px; line-height: 25px; padding-left: 0px; height: 140px; overflow: auto;"
|
|
class="new-info-wrap"
|
|
v-html="versionObj.content"
|
|
>
|
|
<!-- <el-input v-model="versionObj.content" :readonly="true" type="textarea" class="version-input" :rows="6"></el-input> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="genert-div button-div" style="width: calc((100% - 30px) / 2)">
|
|
<div class="title">
|
|
通知公告
|
|
<div class="see-more" @click="noticeSeeMoreClick()">查看更多</div>
|
|
</div>
|
|
<div style="padding: 20px 5px; " class="new-div-wrap">
|
|
<div v-for="(item, index) in newsList" :key="index" class="news-item">
|
|
<span class="ontice-span"></span>
|
|
<span @click="noticeClick(item)">{{item.noticeTitle}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dashboard-tips">
|
|
<indexTips title="微信小程序" :option="option1"></indexTips>
|
|
<indexTips title="微信公众号" :option="option2"></indexTips>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import indexTips from "./bashboardcom/indexTips";
|
|
import pancake from "./bashboardcom/pancake_echarts";
|
|
import { homeCount } from "@/api/system/home";
|
|
import { newUplog } from '@/api/system/uplog'
|
|
import { listNotice } from "@/api/system/notice";
|
|
import gzhqr from "@/assets/images/gzhqr.jpg"
|
|
import ydxcx from "@/assets/images/ydxcx.jpg"
|
|
export default {
|
|
name: "cloud",
|
|
data() {
|
|
return {
|
|
activeNames: ["1", "2", "3", "4"],
|
|
DATA: [],
|
|
text: "",
|
|
actor: "",
|
|
count: 0,
|
|
isText: false,
|
|
currentRole: "adminDashboard",
|
|
headerObj: "",
|
|
versionObj: {},
|
|
newsList: [],
|
|
tempObject: {
|
|
onlineCount: "0",
|
|
activeCount: "0",
|
|
deviceCount: "0",
|
|
modelCount: "0",
|
|
offlineCount: "0",
|
|
userId: "",
|
|
userName: ""
|
|
},
|
|
alarmCount: {
|
|
processCount: "0",
|
|
unProcessCount: "0",
|
|
alarmCount: "0"
|
|
},
|
|
deviceConfig: {
|
|
tooltip: {
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
},
|
|
series: {
|
|
radius: ["50%", "75%"]
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
var colorList = ["#00cefc", "rgb(211, 251, 253)"];
|
|
return colorList[params.dataIndex];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
alarmConfig: {
|
|
tooltip: {
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
},
|
|
series: {
|
|
radius: ["50%", "75%"]
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: function(params) {
|
|
var colorList = ["rgb(255, 158, 98)", "rgb(255, 233, 213)"];
|
|
return colorList[params.dataIndex];
|
|
}
|
|
}
|
|
}
|
|
},
|
|
option1: [
|
|
{
|
|
img: ydxcx,
|
|
lable: "微信小程序",
|
|
describe: "企业用户和个人用户通过微信小程序，可以查看设备，控制设备，查看设备实时数据和历史数据；查看报警信息，处理报警信息，查看项目信息等。"
|
|
}
|
|
],
|
|
option2: [
|
|
{
|
|
img: gzhqr,
|
|
lable: "微信公众号",
|
|
describe: "通过关注微信公众号，可以实时接收到系统通知，触发器消息等。"
|
|
}
|
|
],
|
|
index_m_tzgg: false,
|
|
head_btn_gjjk: false,
|
|
head_btn_sbjk: false,
|
|
index_m_ydxcx: false,
|
|
userType: null
|
|
};
|
|
},
|
|
components: {
|
|
indexTips,
|
|
pancake
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.userType = this.$store.getters.userType;
|
|
this.getCount();
|
|
this.getVersionList();
|
|
this.getNoticeList();
|
|
},
|
|
versionSeeMoreClick() {
|
|
this.$router.push({
|
|
path: "/uplog/list"
|
|
});
|
|
},
|
|
noticeSeeMoreClick() {
|
|
this.$router.push({ path: "/news" });
|
|
// this.$router.push({
|
|
// path: "/admin/notices/list"
|
|
// });
|
|
},
|
|
getNoticeList() {
|
|
listNotice({
|
|
pageNum: 1,
|
|
pageSize: 5
|
|
}).then(response => {
|
|
this.newsList = response.rows
|
|
}).catch(err => {})
|
|
},
|
|
getVersionList() {
|
|
newUplog().then(response => {
|
|
this.versionObj = response.data
|
|
}).catch(err => {})
|
|
},
|
|
noticeClick(row) {
|
|
this.$router.push({ path: "/news", query: { newId: row.noticeId } });
|
|
},
|
|
contentToString(val) {
|
|
let str = "";
|
|
if (val) {
|
|
let list = new Array();
|
|
list = val.split(";");
|
|
list.forEach((v, index) => {
|
|
// if (index !== list.length -1) {
|
|
str += v + " <br>";
|
|
// }
|
|
});
|
|
}
|
|
|
|
return str;
|
|
},
|
|
deviceRate(count, zk) {
|
|
let num = ((parseInt(zk) / parseInt(count)) * 100).toFixed(0);
|
|
if (num !== "NaN") {
|
|
return num + " %";
|
|
} else {
|
|
return "0 %";
|
|
}
|
|
},
|
|
alarmRate(count, zk) {
|
|
let num = ((parseInt(zk) / parseInt(count)) * 100).toFixed(0);
|
|
if (num !== "NaN") {
|
|
return num + " %";
|
|
} else {
|
|
return "0 %";
|
|
}
|
|
},
|
|
getAlarmCount() {
|
|
},
|
|
getCount() {
|
|
homeCount().then(response => {
|
|
this.tempObject = {
|
|
onlineCount: response.data.onlineTotal,
|
|
activeCount: response.data.activeCount,
|
|
deviceCount: response.data.deviceTotal,
|
|
modelCount: response.data.projectTotal,
|
|
offlineCount: (response.data.deviceTotal - response.data.onlineTotal) || 0
|
|
}
|
|
this.alarmCount = {
|
|
processCount: response.data.processed,
|
|
unProcessCount: response.data.unProcessed,
|
|
alarmCount: response.data.alarmTotal
|
|
};
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
},
|
|
toDeviceFu() {
|
|
this.$router.push({
|
|
path: "/iot/devices"
|
|
});
|
|
},
|
|
toProdFu() {
|
|
this.$router.push({
|
|
path: "/iot/prod"
|
|
});
|
|
},
|
|
toAlarmFu() {
|
|
this.$router.push({
|
|
path: "/trigger/trigger/log"
|
|
});
|
|
},
|
|
getData() {
|
|
if (this.count < this.DATA.length - 1) {
|
|
this.count++;
|
|
} else {
|
|
this.count = 0;
|
|
}
|
|
this.isText = true;
|
|
this.actor = this.DATA[this.count];
|
|
},
|
|
setData() {
|
|
let num = 0;
|
|
let count = 0;
|
|
let active = false;
|
|
let timeoutstart = 5000;
|
|
let timeoutend = 1000;
|
|
let timespeed = 10;
|
|
setInterval(() => {
|
|
if (this.isText) {
|
|
if (count == this.actor.length) {
|
|
active = true;
|
|
} else {
|
|
active = false;
|
|
}
|
|
if (active) {
|
|
num--;
|
|
this.text = this.actor.substr(0, num);
|
|
if (num == 0) {
|
|
this.isText = false;
|
|
setTimeout(() => {
|
|
count = 0;
|
|
this.getData();
|
|
}, timeoutend);
|
|
}
|
|
} else {
|
|
num++;
|
|
this.text = this.actor.substr(0, num);
|
|
if (num == this.actor.length) {
|
|
this.isText = false;
|
|
setTimeout(() => {
|
|
this.isText = true;
|
|
count = this.actor.length;
|
|
}, timeoutstart);
|
|
}
|
|
}
|
|
}
|
|
}, timespeed);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-cloud {
|
|
padding: 20px;
|
|
height: calc(100vh - 84px);
|
|
width: 100%;
|
|
padding: 20px;
|
|
background: #f0f2f5;
|
|
overflow: auto;
|
|
|
|
.public-nav-div {
|
|
// 最小宽度
|
|
width: 100%;
|
|
min-width: 1100px;
|
|
}
|
|
|
|
.genert-div {
|
|
border: 0px;
|
|
border-radius: 5px;
|
|
box-shadow: 0px 1px 3px 1px;
|
|
background-color: white;
|
|
font: 14px/16px "Roboto", sans-serif;
|
|
color: #666666;
|
|
width: 100%;
|
|
float: left;
|
|
margin-bottom: 20px;
|
|
cursor: default;
|
|
}
|
|
|
|
.new-div-wrap {
|
|
height: 200px;
|
|
width: calc(100% - 35px);
|
|
overflow: auto;
|
|
padding: 20px 5px 10px 30px;
|
|
padding-left: 30px;
|
|
}
|
|
|
|
.title {
|
|
height: 50px;
|
|
border-bottom: 1px solid #c4c4c4;
|
|
padding: 21px 10px 10px 30px;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.content {
|
|
height: 160px;
|
|
padding: 30px 20px 30px 30px;
|
|
color: #999;
|
|
}
|
|
|
|
.content-div {
|
|
float: left;
|
|
width: 160px;
|
|
min-height: 150px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
padding-top: 25px;
|
|
border-radius: 5px;
|
|
|
|
p {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.content-div:hover {
|
|
box-shadow: 0 0 10px #09c;
|
|
color: #09c;
|
|
}
|
|
|
|
.buttom-div {
|
|
margin: 20px 20px 20px 20px;
|
|
margin-left: calc((100% - (170px * 4)) / 8);
|
|
margin-right: calc((100% - (170px * 4)) / 8);
|
|
}
|
|
|
|
.fontsize {
|
|
font-size: 64px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.dashboard-tips {
|
|
width: 260px;
|
|
float: left;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.youjiantou {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.right-icon {
|
|
width: calc((100% - (170px * 4)) / 3);
|
|
float: left;
|
|
padding-top: 65px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.wel-contailer {
|
|
position: relative;
|
|
}
|
|
|
|
.banner-text {
|
|
position: relative;
|
|
padding: 0 20px;
|
|
font-size: 20px;
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
.buttom-div-p {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.news-item {
|
|
position: relative;
|
|
left: 20px;
|
|
line-height: 30px;
|
|
font-size: 16px;
|
|
width: calc(100% - 20px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.news-item:hover {
|
|
color: #1890ff;
|
|
}
|
|
|
|
.ontice-span {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 6px;
|
|
background: #1890ff;
|
|
margin-right: 20px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.see-more {
|
|
position: relative;
|
|
// left: 10px;
|
|
float: right;
|
|
font-size: 12px;
|
|
// top: 10px;
|
|
}
|
|
|
|
.see-more:hover {
|
|
color: #1890ff;
|
|
}
|
|
.new-div-wrap .new-info-wrap::-webkit-scrollbar {
|
|
/*滚动条整体样式*/
|
|
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
height: 3px;
|
|
}
|
|
.new-div-wrap .new-info-wrap::-webkit-scrollbar-thumb {
|
|
/*滚动条里面小方块*/
|
|
border-radius: 10px;
|
|
box-shadow: inset 0 0 5px #9e9d9d;
|
|
background: #ffffff;
|
|
}
|
|
.new-div-wrap .new-info-wrap::-webkit-scrollbar-track {
|
|
/*滚动条里面轨道*/
|
|
box-shadow: inset 0 0 5px #f6f6f6;
|
|
border-radius: 10px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.page-cloud::-webkit-scrollbar {
|
|
/*滚动条整体样式*/
|
|
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
height: 3px;
|
|
}
|
|
.page-cloud::-webkit-scrollbar-thumb {
|
|
/*滚动条里面小方块*/
|
|
border-radius: 10px;
|
|
box-shadow: inset 0 0 5px #9e9d9d;
|
|
background: #ffffff;
|
|
}
|
|
.page-cloud::-webkit-scrollbar-track {
|
|
/*滚动条里面轨道*/
|
|
box-shadow: inset 0 0 5px #f6f6f6;
|
|
border-radius: 10px;
|
|
background: #ffffff;
|
|
}
|
|
</style>
|
|
<style>
|
|
.version-input .el-textarea__inner {
|
|
border: 0px;
|
|
cursor: default;
|
|
}
|
|
</style>
|