Skip to content

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

pref:修改数据分析页面

parent fca720f0
Expand all Show whitespace changes
Inline Side-by-side
Showing with 664 additions and 136 deletions
device-manager-ui/admin/package.json
View file @ bddd7701
......@@ -31,6 +31,7 @@
"quill": "1.3.7",
"screenfull": "5.0.2",
"sockjs-client": "^1.5.1",
"three": "^0.152.2",
"v-charts": "^1.17.10",
"vue": "^2.6.14",
"vue-amap": "^0.5.10",
......
device-manager-ui/admin/src/assets/less/base.less
View file @ bddd7701
......@@ -8,58 +8,114 @@ html * {
outline: 0;
box-sizing: inherit;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html,body {
height: 100%;
html,
body {
width: 100%;
// height: 100%;
min-height: 100%;
font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, STHeiTi, Arial,
sans-serif;
}
body {
overflow-y: auto;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0
padding: 0;
}
input,select,textarea,button {
input,
select,
textarea,
button {
font-size: 100%;
-webkit-appearance: none;
border:0;
border: 0;
outline: 0;
}
table {
border-collapse: collapse;
border-spacing: 0
border-spacing: 0;
}
fieldset,img {
border: 0
fieldset,
img {
border: 0;
}
abbr,acronym {
abbr,
acronym {
border: 0;
font-variant: normal
font-variant: normal;
}
del {
text-decoration: line-through
text-decoration: line-through;
}
address,caption,cite,code,dfn,em,th,var {
address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight: 500
font-weight: 500;
}
ol,ul {
list-style: none
ol,
ul {
list-style: none;
}
caption,th {
text-align: left
caption,
th {
text-align: left;
}
// h1,h2,h3,h4,h5,h6 {
......@@ -67,29 +123,33 @@ caption,th {
// font-weight: 500
// }
q:before,q:after {
content: ''
q:before,
q:after {
content: "";
}
sub,sup {
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
vertical-align: baseline;
}
sup {
top: -.5em
top: -0.5em;
}
sub {
bottom: -.25em
bottom: -0.25em;
}
ins,a {
ins,
a {
text-decoration: none;
cursor: pointer;
}
/* ============================================================
flex：定义布局为盒模型
flex-v：盒模型垂直布局
......@@ -99,111 +159,167 @@ ins,a {
flex-pack-justify：子元素两端对齐
兼容性：ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
.clearfix{
&:after{
content: '';
.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex-v {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.flex-1 {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
.flex-align-center {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.flex-pack-center {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-pack-justify {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.clearfix {
&:after {
content: "";
display: table;
clear: both;
font-size: 0;
}
}
.fl{float: left};
.fr{float: right};
.hide{display: none;}
.disabled{
.fl {
float: left;
}
.fr {
float: right;
}
.hide {
display: none;
}
.disabled {
pointer-events: none;
}
#app,.pages{
#app,
.pages {
.flex;
.flex-v;
height: 100%;
}
.ellipsis{
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
[v-cloak] {
display: none;
}
[disabled] {
pointer-events: none;
}
.el-dialog{
.el-checkbox-group{
.el-checkbox{
.el-dialog {
.el-checkbox-group {
.el-checkbox {
margin: 5px 0;
width: 33.33%;
}
.pointBox{
.pointBox {
width: 50%;
}
}
}
.table-foot{
.table-foot {
display: flex;
justify-content: flex-end;
}
.el-table th {
user-select: all;
}
/* el-table列数据为空自动显示-- */
.cell:empty::before{
content:'--';
color:gray;
.cell:empty::before {
content: "--";
color: gray;
}
.el-progress-bar{
.el-progress-bar {
padding-right: 70px;
margin-right: -70px;
}
#operatorUserCabinCheckBox .el-checkbox{
#operatorUserCabinCheckBox .el-checkbox {
white-space: normal !important;
width: 100%
width: 100%;
}
#operatorUserCabinCheckBox .el-checkbox__label{
#operatorUserCabinCheckBox .el-checkbox__label {
display: inline;
}
// 统计页面隔日期变色
.page-statistics{
.chart{
.page-statistics {
.chart {
margin-bottom: 80px;
border: 1px solid #ededed;
height: 400px;
}
.el-table th, .el-table tr{
&.color-gray{
.el-table th,
.el-table tr {
&.color-gray {
background-color: #f0f9eb;
}
}
}
@media screen and (max-width: 800px){
.page{
@media screen and (max-width: 800px) {
.page {
margin: 5px 5px;
}
.el-dialog{
width: 98%!important;
.el-checkbox-group{
.el-checkbox{
.el-dialog {
width: 98% !important;
.el-checkbox-group {
.el-checkbox {
margin: 5px 0;
width: 50%;
font-size: 12px;
.el-checkbox__label{
.el-checkbox__label {
font-size: 12px;
}
}
......@@ -215,18 +331,21 @@ ins,a {
// background-color: red;
// }
.mobile-table-card{
.mobile-table-card {
margin: 10px auto;
padding: 10px;
box-shadow: 0 0 5px #ccc;
.mobile-table-cell{
.mobile-table-cell {
padding: 5px 0;
border-bottom: 1px dotted #eee;
.cell-title{
.cell-title {
font-size: 13px;
color: #666;
}
.cell-content{
.cell-content {
padding-left: 5px;
text-align: right;
word-break: break-word;
......
device-manager-ui/admin/src/components/three/Three.vue 0 → 100644
View file @ bddd7701
This diff is collapsed.
device-manager-ui/admin/src/views/analysis/Analysis.vue
View file @ bddd7701
......@@ -61,7 +61,9 @@
</div>
</div>
</div>
<div class="center"></div>
<div class="center">
<Three class="three" :lv="lv" :floorArr="floorArr"></Three>
</div>
<div class="right">
<div class="right-content">
<!-- 设备告警汇总 -->
......@@ -95,13 +97,13 @@
</div>
<div class="warning-info-item2">
<div class="item2-info">
<div class="title">危险</div>
<div class="title">次要</div>
<div class="percent">24%</div>
</div>
</div>
<div class="warning-info-item1">
<div class="item1-info">
<div class="title">危险</div>
<div class="title">一般</div>
<div class="percent">24%</div>
</div>
</div>
......@@ -126,10 +128,12 @@
<script>
import HeaderSite from "./components/HeaderSite.vue";
import TitleItem from "./components/TitleItem.vue";
import Three from "@/components/three/Three.vue";
export default {
components: {
HeaderSite,
TitleItem,
Three,
},
data() {
return {
......@@ -217,12 +221,46 @@ export default {
["一楼排号机", "5", "15:00", "在线"],
],
},
floorArr: [],
lv: "1",
};
},
mounted() {
this.getDevTypeDisEchart();
this.getWarningDisEchart();
this.getManufacturersTopEchart();
setTimeout(() => {
this.floorArr = [
{
id: 4,
building: 1,
lv: 1,
picture: "",
phonepicture: "",
mtl_url: "/uploads/floor/yibin2/L1.mtl",
obj_url: "/uploads/floor/L1-1/L1-1.gltf",
siteid: 1,
type: 1,
create_time: "2023-03-13 11:32:38",
update_time: "2023-04-08 11:40:07",
zip_url: "/uploads/floor/L1-1/L1-1.zip",
},
{
id: 5,
building: 1,
lv: 2,
picture: "",
phonepicture: "",
mtl_url: "/uploads/floor/yibin/L2.mtl",
obj_url: "/uploads/floor/L2-1/L2-1.gltf",
siteid: 1,
type: 1,
create_time: "2023-03-13 16:54:14",
update_time: "2023-04-08 11:40:21",
zip_url: "/uploads/floor/L2-1/L2-1.zip",
},
];
});
},
methods: {
// 获取设备类型分布图标
......@@ -430,7 +468,7 @@ export default {
grid: {
top: "0px",
left: "0px",
right: "20px",
right: "0px",
bottom: "-30px",
containLabel: true,
},
......@@ -551,7 +589,7 @@ export default {
},
},
{
// 分隔
// 分隔背景
type: "pictorialBar",
itemStyle: {
color: "#022539",
......@@ -582,10 +620,9 @@ export default {
<style lang="less" scoped>
.analysis {
width: 100%;
height: 100%;
padding-bottom: 40px;
height: 1080px;
background: url("../../assets/images/data/bg.png") no-repeat center;
background-size: 100% 100%;
background-size: 100% 1080px;
color: #fff;
.header {
width: 100%;
......@@ -650,9 +687,13 @@ export default {
.left {
width: 500px;
height: 100%;
position: relative;
}
.left-centent {
width: 100%;
position: absolute;
left: 0px;
top: -20px;
.dev-total {
height: 120px;
}
......@@ -679,12 +720,22 @@ export default {
background-size: 100% 100%;
}
}
.center {
// .three {
// height: 500px;
// width: 500px;
// }
}
.right {
width: 500px;
height: 100%;
position: relative;
}
.right-content {
width: 500px;
position: absolute;
left: 0px;
top: -20px;
.warning-rank-info {
height: 188px;
background: url("~@/assets/images/data/kuang2.png") no-repeat center;
......
device-manager-ui/admin/yarn.lock
View file @ bddd7701
......@@ -9076,6 +9076,11 @@ thread-loader@^2.1.3:
loader-utils "^1.1.0"
neo-async "^2.6.0"
three@^0.152.2:
version "0.152.2"
resolved "https://registry.npmmirror.com/three/-/three-0.152.2.tgz#2ee0f2c504d31a4bc29b45495c12bded9fda7bfc"
integrity sha512-Ff9zIpSfkkqcBcpdiFo2f35vA9ZucO+N8TNacJOqaEE6DrB0eufItVMib8bK8Pcju/ZNT6a7blE1GhTpkdsILw==
throttle-debounce@^1.0.1:
version "1.1.0"
resolved "https://registry.nlark.com/throttle-debounce/download/throttle-debounce-1.1.0.tgz"
......
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