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

提交： 项目管理 详情页 左侧菜单调整布局

This commit is contained in:
23688nl 2022-10-12 14:55:11 +08:00
parent 566d6b647b
commit 50b11bd0ac
18 changed files with 412 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -11,7 +11,7 @@
<link rel="stylesheet" href="//at.alicdn.com/t/font_2506643_9w119og75cs.css">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_67w6wmrp9dc.css">
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_2506643_xttpv6d8dy.css">
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=4b483d227a9c7dd12e46faae5a8c8af8"></script>
<script src="<%= BASE_URL %>js/config.js"></script>

57
src/assets/styles/element-ui.scss
View File

@ -143,3 +143,60 @@
border-radius: 10px;
background: #ffffff;
}
.el-table {
> .el-table__body-wrapper::-webkit-scrollbar {
width: 6px; /*滚动条宽度*/
height: 6px; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
> .el-table__body-wrapper::-webkit-scrollbar-track {
// box-shadow: 0px 1px 3px rgba(red, green, blue, 0) inset; /*滚动条的背景区域的内阴影*/
border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: #c1c7d000; /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
> .el-table__body-wrapper::-webkit-scrollbar-thumb {
border-radius: 10px; /*滚动条的圆角*/
background-color: #dededea6; /*滚动条的背景颜色*/
}
// 解决表格固定列问题
// 不同尺寸表格修改固定列内容区的高度, 本人这里只罗列了mini与small尺寸的
.el-table--mini {
.el-table__fixed,
.el-table__fixed-right {
.el-table__fixed-body-wrapper {
// mini表格, 表头高度为36px, 所以这里减36
height: calc(100% - 36px) !important;
}
}
}
.el-table--small {
.el-table__fixed,
.el-table__fixed-right {
.el-table__fixed-body-wrapper {
// small表格
height: calc(100% - 40px) !important;
}
}
}
.el-table__fixed, .el-table__fixed-right {
height: calc(100% - 6px) !important;
}
// 当表格没有滚动条时
.el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right{
height: 100% !important;
bottom: 0 !important;
box-shadow: none !important;
}
// 当表格有纵向滚动条时
.el-table--scrollable-y .el-table__fixed-right{
right: 7px !important;
}
// 当表格只有横向滚动条，没有纵向滚动条时
.el-table--scrollable-x:not(.el-table--scrollable-y) .el-table__fixed-right{
right: 0 !important;
}
}

4
src/views/bigScreen/v2/profile/wraringInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="big-wraring-info-wrap">
<div class="big-wraring-info-wrap-v2">
<div class="mk-top">{{title}}</div>
<div class="conter-block">
<div class="count-block">
@ -65,7 +65,7 @@ export default {
};
</script>
<style lang="scss">
.big-wraring-info-wrap {
.big-wraring-info-wrap-v2 {
width: 100%;
height: calc(100% - 300px);
.mk-top {

13
src/views/bigScreen/v3/profile/typeDistribution.vue
View File

@ -34,13 +34,22 @@
class="color-block"
:style="`background: ${echartsOption.colorList[idx]};`"
></div>
<div class="title-block">
<span class="title-block" :title="item.name" style="
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
white-space: nowrap;
">
{{ item.name }}
</span>
<!-- <div class="title-block">
{{
item.name.length > 10
? item.name.substr(0, 10) + "..."
: item.name
}}
</div>
</div> -->
</div>
</div>
</div>

4
src/views/bigScreen/v3/profile/wraringInfo.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="big-wraring-info-wrap">
<div class="big-wraring-info-wrap-v3">
<nav-temp htmlType="t1" :title="title">
<div class="conter-block" slot="mk-center">
<census-temp-b
@ -97,7 +97,7 @@ export default {
};
</script>
<style lang="scss">
.big-wraring-info-wrap {
.big-wraring-info-wrap-v3 {
height: 190px;
width: calc((100% - 20px) / 2);
.conter-block {

4
src/views/iot/project/profileV2/AlarmManage/index.vue
View File

@ -87,7 +87,7 @@
</div>
<div class="e-alarm-table">
<el-table v-loading="tableLoading" :data="tableList" :height="total > 0 ? '230px': '270px'">
<el-table v-loading="tableLoading" :data="tableList" :height="total > 0 ? '170px': '210px'">
<el-table-column
label="设备名称"
width="120px"
@ -433,7 +433,7 @@ export default {
height: 300px;
}
.e-alarm-table {
height: 280px;
height: 220px;
width: 100%;
padding-top: 10px;
}

140
src/views/iot/project/profileV2/ENavLayout/index.vue Normal file
View File

@ -0,0 +1,140 @@
<template>
<div class="e-nav-layout">
<el-tabs v-model="activeKey">
<el-tab-pane :label="tab['label']" :name="tab['key']" v-for="(tab) in tabs" :key="tab.key">
<component
:is="activeName"
v-if="tab['key'] === activeKey"
:projectInfo="projectInfo"
:projectTypeOptions="projectTypeOptions"
:sourceId="sourceId"
:tempType="activeType"
:isShrink="isShrink"
:isFoldRight="isFoldRight"
></component>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import ECensusCards from "../ECensusCards";
import ElDescriptions from "@/components/Edescriptions";
import ElDescriptionsItem from "@/components/Edescriptions/src/descriptions-item";
import ESimpleCard from "@/components/Cards/index";
import ENavMenu from "../ENavMenu/index";
import EProjectManage from "../EProjectManage";
import ETodayRatio from "../ETodayRatio";
import ETypeCensus from "../ETypeCensus";
import ETrendCensus from "../ETrendCensus";
import EObjectContainer from "../EObjectContainer";
import EDeviceManage from "../DeviceManage/index";
import EAlarmManage from "../AlarmManage/index";
import ESafetyTemplate from "../SafetyTemplate/index";
import ELeakageCurrent from "../SafetyTemplate/ELeakageCurrent";
import EDebuff from "../SafetyTemplate/EDebuff";
import EDeviceSwitchWarning from "../SafetyTemplate/EDeviceSwitchWarning";
import EElectricity from "../EnergyManage/EElectricity";
import EEnergyLoad from "../EnergyManage/EEnergyLoad";
import ENavMenuButton from '../ENavMenuButton/index';
import ShopLocation from "@/components/Amap/components/shopLocation/index";
import ESceneManage from '../ESceneManage/index'
export default {
name: 'EProjectNavLayout',
components: {
ECensusCards,
ElDescriptions,
ElDescriptionsItem,
ENavMenu,
EProjectManage,
ESimpleCard,
ETodayRatio,
ETypeCensus,
ETrendCensus,
EObjectContainer,
EDeviceManage,
EAlarmManage,
ESafetyTemplate,
ELeakageCurrent,
EDebuff,
EDeviceSwitchWarning,
EElectricity,
EEnergyLoad,
ShopLocation,
ESceneManage,
ENavMenuButton
},
props: {
tabs: {
type: Array,
default: []
},
projectTypeOptions: {
type: Array,
default: []
},
sourceId: {
type: [Number, String],
require: true,
},
isShrink: {
type: Boolean,
default: () => {
return true
},
},
projectInfo: {
type: Object,
require: true,
},
tempType: {
type: String,
require: true
},
isFoldRight: {
type: Boolean,
default: () => {
return false
}
},
},
data() {
return {
activeKey: '',
activeName: '',
activeType: ''
}
},
watch: {
tabs: {
handler(val) {
console.log('tabs--')
if(val && val.length > 0) {
this.activeName = val[0]['template'];
this.activeType = val[0]['key'];
this.activeKey = val[0]['key'];
}
},
immediate: true,
},
activeKey: {
handler(val) {
if (val) {
console.log('activeKey--')
let result = this.tabs.filter(v => { if (val === v['key']) { return v }});
if (result && result.length > 0) {
this.activeName = result[0]['template'];
this.activeType = result[0]['key'];
}
} else {
this.activeName = '';
this.activeType = '';
}
},
immediate: true,
}
},
methods: {
}
}
</script>

139
src/views/iot/project/profileV2/ENavMenuButton/index.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class="e-nav-menu-button">
<div class="e-button" v-for="(item) in activeList" :key="item[props['key']]" @click="handleClick(item)">
<div class="but" :class="value === item[props['key']] ? 'but e-menu-sed' : 'but'">
<i :class="item[props['icon']] ? item[props['icon']] +' icon-c' : 'el-icon-d-arrow-left icon-c'"></i>
<span class="but-title">{{ item[props['label']] }}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'ENavMenuButton',
props: {
value: {
type: [String, Number],
default: () => { return 0; }
},
props: {
type: Object,
default: () => {
return {
label: "label", key: "key", children: "children", icon: 'icon' };
},
},
activeList: {
type: Array,
default: () => {
return [
{ label: "项目管理", key: "projectOt", icon: 'el-icon-d-arrow-left' },
{ label: "设备管理", key: "projectOt", icon: 'el-icon-d-arrow-left'},
];
},
},
},
data() {
return {}
},
methods: {
handleClick(row) {
this.$emit("input", row);
// if (
// !row[this.props["children"]] ||
// row[this.props["children"]].length <= 0
// ) {
// this.$emit("input", row);
// } else {
// if (this.developList.indexOf(row[this.props["key"]]) >= 0) {
// this.developList = this.developList.filter((v) => {
// v !== row[this.props["key"]];
// });
// } else {
// // 执行展开操作
// if (this.singleDevelop) {
// this.developList = [];
// }
// this.developList.push(row[this.props["key"]]);
// }
// }
},
},
}
</script>
<style lang="scss">
.e-nav-menu-button {
width: 100%;
display: flex;
justify-content: flex-start;
.e-button {
// width: 50%;
display: flex;
justify-content: flex-end;
.but {
width: 90px;
height: 30px;
background: #f4f5f7;
border-radius: 5px;
color: #6b778c;
justify-content: center;
align-items: center;
display: flex;
margin-right: 10px;
.icon-c {
font-size: 18px;
margin-top: 2px;
}
.but-title {
font-size: 12px;
font-family: "Source Han Sans CN";
font-weight: 600;
margin-left: 5px;
cursor: default;
}
}
.but:hover {
background: #1890ff;
color: #fff;
}
.e-menu-sed {
background: #0066CC;
color: #fff;
}
.but-tz {
width: 30px;
height: 30px;
background: #f4f5f7;
border-radius: 5px;
justify-content: center;
align-items: center;
display: flex;
margin-right: 0px;
font-weight: 600;
color: #6b778c;
.icon-c {
font-size: 12px;
font-weight: 600;
margin-top: 2px;
}
}
.but-tz:hover {
background: #1890ff;
color: #fff;
}
}
}
</style>

2
src/views/iot/project/profileV2/ESceneManage/ELogging.vue
View File

@ -48,7 +48,7 @@
<el-table
v-loading="tableLoading"
:data="tableList"
:height="total > 0 ? '530px' : '270px'"
:height="total > 0 ? '470px' : '510px'"
>
<el-table-column
type="index"

2
src/views/iot/project/profileV2/ESceneManage/index.vue
View File

@ -19,7 +19,7 @@
<el-table
v-loading="tableLoading"
:data="tableList"
:height="total > 0 ? '530px' : '270px'"
:height="total > 0 ? '470px' : '510px'"
>
<el-table-column
type="index"

1
src/views/iot/project/profileV2/ETypeCensus.vue
View File

@ -228,6 +228,7 @@ export default {
font-weight: 400;
color: #ffffff;
line-height: 24px;
.color-block {
width: 9px;
height: 8px;

2
src/views/iot/project/profileV2/EnergyManage/EElectricity.vue
View File

@ -46,7 +46,7 @@
<el-table
v-loading="tableLoading"
:data="tableList"
:height="total > 0 ? '520px' : '560px'"
:height="total > 0 ? '460px' : '500px'"
>
<el-table-column
label="设备名称"

4
src/views/iot/project/profileV2/EnergyManage/EEnergyLoad.vue
View File

@ -433,7 +433,7 @@ export default {
flex-wrap: wrap;
.load-center {
width: 100%;
height: 300px;
height: 270px;
display: flex;
.left {
width: 50%;
@ -445,7 +445,7 @@ export default {
}
}
.load-footer {
height: 300px;
height: 270px;
width: 100%;
}
}

2
src/views/iot/project/profileV2/SafetyTemplate/EDebuff.vue
View File

@ -39,7 +39,7 @@
<el-table
v-loading="tableLoading"
:data="tableList"
:height="total > 0 ? '530px' : '570px'"
:height="total > 0 ? '470px' : '510px'"
>
<el-table-column
label="事件ID"

2
src/views/iot/project/profileV2/SafetyTemplate/EDeviceSwitchWarning.vue
View File

@ -37,7 +37,7 @@
<el-table
v-loading="tableLoading"
:data="tableList"
:height="total > 0 ? '530px' : '570px'"
:height="total > 0 ? '470px' : '510px'"
>
<el-table-column
label="事件ID"

4
src/views/iot/project/profileV2/SafetyTemplate/ELeakageCurrent.vue
View File

@ -82,7 +82,7 @@
<el-table
v-loading="tableLoading"
:data="tableList"
:height="total > 0 ? '230px' : '270px'"
:height="total > 0 ? '170px' : '210px'"
>
<el-table-column
label="设备名称"
@ -478,7 +478,7 @@ export default {
height: 300px;
}
.e-alarm-table {
height: 280px;
height: 220px;
width: 100%;
padding-top: 10px;
}

5
src/views/iot/project/profileV2/SafetyTemplate/index.vue
View File

@ -82,7 +82,7 @@
<el-table
v-loading="tableLoading"
:data="tableList"
:height="total > 0 ? '230px' : '270px'"
:height="total > 0 ? '170px' : '210px'"
>
<el-table-column
label="设备名称"
@ -306,6 +306,7 @@ export default {
},
methods: {
init() {
console.log('temp-init')
this.queryParams.timeType = 'day'
this.time =
this.queryParams.timeType === "day"
@ -457,7 +458,7 @@ export default {
height: 300px;
}
.e-alarm-table {
height: 280px;
height: 220px;
width: 100%;
padding-top: 10px;
}

58
src/views/iot/project/profileV2/details.vue
View File

@ -39,6 +39,21 @@
</div>
</div>
</div>
<div style="width: 100%;">
<e-nav-menu-button
v-model="activeType"
:activeList="activeList"
@input="
(data) => {
selectNavChildren = [];
activeName = data['template'];
activeType = data['key'];
selectNavChildren = data.children || [];
}
"
/>
</div>
<div class="container-info">
<div class="info-left">
<el-descriptions class="margin-top" title="" :column="2">
@ -128,7 +143,8 @@
</div>
</div>
<div class="container-main">
<e-nav-menu
<!-- <e-nav-menu
v-model="activeType"
:activeList="activeList"
@eventShrink="
@ -142,7 +158,7 @@
activeType = data['key'];
}
"
/>
/> -->
<div
class="main-block"
:style="isShrink ? 'width: 100%;' : 'width: calc(100% - 150px);'"
@ -155,6 +171,7 @@
:tempType="activeType"
:isShrink="isShrink"
:isFoldRight="isFoldRight"
:tabs="selectNavChildren"
></component>
</div>
</div>
@ -212,11 +229,14 @@ import EDebuff from "./SafetyTemplate/EDebuff";
import EDeviceSwitchWarning from "./SafetyTemplate/EDeviceSwitchWarning";
import EElectricity from "./EnergyManage/EElectricity";
import EEnergyLoad from "./EnergyManage/EEnergyLoad";
import ENavMenuButton from './ENavMenuButton/index';
import { initMap, gjzCode } from "@/utils/latlngFromAddress";
import ShopLocation from "@/components/Amap/components/shopLocation/index";
import ESceneManage from './ESceneManage/index'
import ENavLayout from './ENavLayout/index'
export default {
name: "projectDetailV2",
components: {
@ -232,14 +252,16 @@ export default {
EObjectContainer,
EDeviceManage,
EAlarmManage,
ESafetyTemplate,
// ESafetyTemplate,
ELeakageCurrent,
EDebuff,
EDeviceSwitchWarning,
EElectricity,
EEnergyLoad,
ShopLocation,
ESceneManage
ESceneManage,
ENavMenuButton,
ENavLayout
},
props: {
sourceId: {
@ -263,21 +285,26 @@ export default {
resultInfo: {},
activeName: "EObjectContainer",
activeType: "EObjectContainer",
isShrink: false,
isShrink: true,
selectNavChildren: [],
activeList: [
{
label: "项目信息",
key: "EObjectContainer",
icon: 'iconfont iconxiangmugl',
template: "EObjectContainer",
},
{
label: "设备管理",
key: "EDeviceManage",
icon: 'iconfont iconwumoxing',
template: "EDeviceManage",
},
{
label: "安全监管",
key: "safety",
icon: 'iconfont iconanquangl',
template: 'ENavLayout',
children: [
// 漏电流 温度 漏电报警 温度报警 漏保自检 短路报警 过欠压 过流过载 电弧报警 三相报警 异常状态 分合闸警示
{
@ -345,14 +372,16 @@ export default {
{
label: "能源管理",
key: "energyManage",
icon: 'iconfont iconnengyuanguanli',
template: 'ENavLayout',
children: [
{
label: "电量",
label: "电 量",
key: "electricity",
template: "EElectricity",
},
{
label: "负载",
label: "负 载",
key: "energyLoad",
template: "EEnergyLoad",
},
@ -361,6 +390,8 @@ export default {
{
label: "综合管理",
key: "synthesizeManage",
icon: 'iconfont icontasks',
template: 'ENavLayout',
children: [
{
label: "场景控制",
@ -705,19 +736,20 @@ export default {
}
}
.container-main {
width: calc(100% - 10px);
width: calc(100% - 0px);
height: calc(100vh - 286px);
margin-left: 10px;
margin-top: 15px;
margin-left: 0px;
margin-top: 0px;
display: flex;
border: 1px solid #e8e8e8;
border-radius: 5px;
height: calc(100% - 160px);
height: calc(100% - 190px);
.main-block {
padding: 15px;
width: calc(100% - 150px);
height: 100%;
width: 100%;
padding-right: 0;
padding-left: 25px;
}
}
}