|
@@ -110,19 +110,168 @@
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="center"></div>
|
|
|
- <div class="right"></div>
|
|
|
+ <div class="center">
|
|
|
+ <div class="update-record">
|
|
|
+ <div class="system-main-title">
|
|
|
+ <h4 class="section-title">说明书更新记录</h4>
|
|
|
+ </div>
|
|
|
+ <!-- 进度调 -->
|
|
|
+ <div class="progress">
|
|
|
+ <div class="number">
|
|
|
+ <div class="nu">19</div>
|
|
|
+ <span>当月更新</span>
|
|
|
+ </div>
|
|
|
+ <div class="progress-box">
|
|
|
+ <div class="progress-list">
|
|
|
+ <div class="progress-item"></div>
|
|
|
+ <div class="progress-item"></div>
|
|
|
+ <div class="progress-item"></div>
|
|
|
+ <div class="progress-item progress-box-bottom"></div>
|
|
|
+ </div>
|
|
|
+ <div class="progress-legend">
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-color"></span>
|
|
|
+ <span class="title">重要维修</span>
|
|
|
+ <span class="num">1条</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-color"></span>
|
|
|
+ <span class="title">重要维修</span>
|
|
|
+ <span class="num">5条</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-color"></span>
|
|
|
+ <span class="title">重要维修</span>
|
|
|
+ <span class="num">3条</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-color"></span>
|
|
|
+ <span class="title">重要维修</span>
|
|
|
+ <span class="num">5条</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="feng-map" ref="fengmap">
|
|
|
+ <div class="lcgn-title">
|
|
|
+ <span class="span1">{{ floorInfo.code }}</span>
|
|
|
+ </div>
|
|
|
+ <floorMap
|
|
|
+ ref="floorMap"
|
|
|
+ :loadName="loadName"
|
|
|
+ :type="'floor'"
|
|
|
+ ></floorMap>
|
|
|
+ <!-- 图例 -->
|
|
|
+ <div class="legend-boxs">
|
|
|
+ <Legend
|
|
|
+ :floors="floorsArr"
|
|
|
+ type="1"
|
|
|
+ :editTips="`编辑${floorInfo.code}层楼层功能平面图`"
|
|
|
+ ></Legend>
|
|
|
+ <floor-list
|
|
|
+ v-if="floorsArr.length > 0"
|
|
|
+ :floorsArr="floorsArr"
|
|
|
+ :type="1"
|
|
|
+ @emitFloor="emitFloor"
|
|
|
+ :id="'floor'"
|
|
|
+ ></floor-list>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="box">
|
|
|
+ <div class="box-center">
|
|
|
+ <div class="system-main-title">
|
|
|
+ <h4 class="section-title">维保</h4>
|
|
|
+ </div>
|
|
|
+ <div class="select">全部</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-bottom">
|
|
|
+ <div class="circle"></div>
|
|
|
+ <div class="msg">
|
|
|
+ <div class="msg-item item-1">
|
|
|
+ <span class="msg-color"></span>
|
|
|
+ <span class="type">未完成得任务</span>
|
|
|
+ <span class="num">8</span>
|
|
|
+ </div>
|
|
|
+ <div class="msg-item item-1">
|
|
|
+ <span class="msg-color"></span>
|
|
|
+ <span class="type">即将逾期</span>
|
|
|
+ <span class="num">8</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="box-center">
|
|
|
+ <div class="system-main-title">
|
|
|
+ <h4 class="section-title">第三方检测</h4>
|
|
|
+ </div>
|
|
|
+ <div class="select">全部</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-bottom">
|
|
|
+ <div class="circle"></div>
|
|
|
+ <div class="msg">
|
|
|
+ <div class="msg-item item-1">
|
|
|
+ <span class="msg-color"></span>
|
|
|
+ <span class="type">未完成得任务</span>
|
|
|
+ <span class="num">8</span>
|
|
|
+ </div>
|
|
|
+ <div class="msg-item item-1">
|
|
|
+ <span class="msg-color"></span>
|
|
|
+ <span class="type">即将逾期</span>
|
|
|
+ <span class="num">8</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box">
|
|
|
+ <div class="box-center">
|
|
|
+ <div class="system-main-title">
|
|
|
+ <h4 class="section-title">专维</h4>
|
|
|
+ </div>
|
|
|
+ <div class="select">全部</div>
|
|
|
+ </div>
|
|
|
+ <div class="box-bottom">
|
|
|
+ <div class="circle"></div>
|
|
|
+ <div class="msg">
|
|
|
+ <div class="msg-item item-1">
|
|
|
+ <span class="msg-color"></span>
|
|
|
+ <span class="type">未完成得任务</span>
|
|
|
+ <span class="num">8</span>
|
|
|
+ </div>
|
|
|
+ <div class="msg-item item-1">
|
|
|
+ <span class="msg-color"></span>
|
|
|
+ <span class="type">即将逾期</span>
|
|
|
+ <span class="num">8</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import { getCardList } from "@/api/homePage";
|
|
|
+import floorMap from "@/components/floorMap/index.vue";
|
|
|
+import floorList from "@/components/floorList.vue";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
export default {
|
|
|
+ components: { floorMap, floorList },
|
|
|
data() {
|
|
|
return {
|
|
|
systemList: [], //系统数据
|
|
|
+ show: true,
|
|
|
+ floorInfo: {},
|
|
|
+ loadName: "",
|
|
|
+ type: "",
|
|
|
};
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["floorsArr", "floorObj"]),
|
|
|
+ },
|
|
|
methods: {
|
|
|
imgSrc(code) {
|
|
|
return require("../../assets/images/icons/" + code + ".png");
|
|
@@ -213,10 +362,35 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+
|
|
|
+ emitFloor(item) {
|
|
|
+ console.log(item);
|
|
|
+ this.floorInfo = item;
|
|
|
+ this.$refs.floorMap.init(this.floorInfo.gname);
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ additionalColl() {
|
|
|
+ this.show = !this.show;
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.loadName = `楼层功能-${this.floorInfo.code}`;
|
|
|
+ console.log(this.floorsArr.length);
|
|
|
+ console.log(this.$cookie.get("currentFloorId"));
|
|
|
+ if (this.floorsArr.length > 0 && this.$cookie.get("currentFloorId")) {
|
|
|
+ this.floorInfo = this.floorsArr.find((item) => {
|
|
|
+ return this.$cookie.get("currentFloorId") == item.seq;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
this.getSystemList(103000, 1);
|
|
|
},
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ this.$refs.floorMap.init(this.floorInfo.gname);
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
@@ -231,21 +405,23 @@ export default {
|
|
|
padding: 56px 16px 40px 16px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
+ .system-main-title {
|
|
|
+ width: 152px;
|
|
|
+ height: 40px;
|
|
|
+ background: #1649ce;
|
|
|
+ line-height: 40px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ h4 {
|
|
|
+ color: #fff;
|
|
|
+ margin-left: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
.left {
|
|
|
width: 30.05%;
|
|
|
height: 100%;
|
|
|
- padding: 16px 10px;
|
|
|
+ padding: 16px 0px 16px 10px;
|
|
|
box-sizing: border-box;
|
|
|
- .system-main-title {
|
|
|
- width: 152px;
|
|
|
- height: 40px;
|
|
|
- background: #1649ce;
|
|
|
- line-height: 40px;
|
|
|
- h4 {
|
|
|
- color: #fff;
|
|
|
- margin-left: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
+ border-radius: 1px solid #cccccc;
|
|
|
.system-list {
|
|
|
height: 100%;
|
|
|
overflow-y: auto;
|
|
@@ -256,11 +432,12 @@ export default {
|
|
|
justify-content: flex-start;
|
|
|
align-items: stretch;
|
|
|
width: 100%;
|
|
|
- margin-bottom:6px;
|
|
|
+ margin-bottom: 6px;
|
|
|
box-sizing: border-box;
|
|
|
- border: 1px solid #eff0f1;
|
|
|
+ border: 1px solid#0C102C;
|
|
|
border-radius: 4px;
|
|
|
transition: 0.5s;
|
|
|
+ background: #0d1d42;
|
|
|
cursor: pointer;
|
|
|
.system-name {
|
|
|
position: absolute;
|
|
@@ -277,7 +454,7 @@ export default {
|
|
|
img {
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
- margin-bottom:60px;
|
|
|
+ margin-bottom: 6px;
|
|
|
}
|
|
|
span {
|
|
|
color: white;
|
|
@@ -288,7 +465,7 @@ export default {
|
|
|
.system-equipments-container {
|
|
|
position: relative;
|
|
|
width: 88%;
|
|
|
- padding: 60px;
|
|
|
+ padding: 10px;
|
|
|
margin-left: 18%;
|
|
|
.more {
|
|
|
position: absolute;
|
|
@@ -316,7 +493,7 @@ export default {
|
|
|
.number {
|
|
|
width: 30%;
|
|
|
margin-right: 1%;
|
|
|
- background: #eff0f1;
|
|
|
+ background: #385ecc;
|
|
|
border-radius: 2px;
|
|
|
padding: 14px 0 10px 4px;
|
|
|
.title {
|
|
@@ -340,8 +517,8 @@ export default {
|
|
|
padding: 2px 4px;
|
|
|
border-radius: 9px;
|
|
|
font-size: 12px;
|
|
|
- color: #f54e45;
|
|
|
- background: #fde3e2;
|
|
|
+ color: #ffffff;
|
|
|
+ background: #f54e45;
|
|
|
}
|
|
|
}
|
|
|
p {
|
|
@@ -359,8 +536,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
li.selected {
|
|
|
- border-color: rgba(0, 118, 197, 0.6);
|
|
|
- box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
|
|
|
+ border-color: #6883ff;
|
|
|
+ box-shadow: 0 2px 10px 0px #6883ff;
|
|
|
}
|
|
|
li:hover {
|
|
|
border-color: #e4e5e7;
|
|
@@ -392,12 +569,172 @@ export default {
|
|
|
.center {
|
|
|
flex: 1;
|
|
|
height: 100%;
|
|
|
- background: pink;
|
|
|
+ padding: 0 20px;
|
|
|
+ position: relative;
|
|
|
+ .update-record {
|
|
|
+ width: 100%;
|
|
|
+ height: 196px;
|
|
|
+ border: 1px solid #cccccc;
|
|
|
+ padding: 10px;
|
|
|
+ .progress {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .progress-box {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ .progress-list {
|
|
|
+ height: 12px;
|
|
|
+ background: #ccc;
|
|
|
+ border-radius: 6px 6px;
|
|
|
+ display: flex;
|
|
|
+ .progress-item {
|
|
|
+ height: 12px;
|
|
|
+ width: 33%;
|
|
|
+ margin-right: 1px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .progress-box-bottom {
|
|
|
+ margin-right: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .progress-legend {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 28px;
|
|
|
+ .legend-item {
|
|
|
+ margin-right: 30px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .legend-color {
|
|
|
+ display: block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 50% 50%;
|
|
|
+ background: #fd9039;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ width: 140px;
|
|
|
+ height: 100%;
|
|
|
+ color: #c3c7cb;
|
|
|
+ padding: 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ .nu {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #c3c7cb;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .feng-map {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(~"100% - 200px");
|
|
|
+ position: relative;
|
|
|
+ .lcgn-title {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ display: block;
|
|
|
+ top: 30px;
|
|
|
+ left: 30px;
|
|
|
+ width: 140px;
|
|
|
+ height: 32px;
|
|
|
+ background: linear-gradient(
|
|
|
+ 270deg,
|
|
|
+ rgba(199, 217, 234, 0) 0%,
|
|
|
+ rgba(199, 217, 234, 1) 100%
|
|
|
+ );
|
|
|
+ box-shadow: -6px 2px 8px 0px rgba(31, 36, 41, 0.1);
|
|
|
+ color: #025baa;
|
|
|
+ font-size: 16px;
|
|
|
+ &::before {
|
|
|
+ width: 2px;
|
|
|
+ height: 16px;
|
|
|
+ background: rgba(2, 91, 170, 1);
|
|
|
+ display: inline-block;
|
|
|
+ content: "";
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ .span1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .legend-boxs {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9;
|
|
|
+ right: 32px;
|
|
|
+ top: 142px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.right {
|
|
|
width: 21.2%;
|
|
|
height: 100%;
|
|
|
- background: yellow;
|
|
|
+ padding-left: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .box {
|
|
|
+ width: 100%;
|
|
|
+ height: ~"calc(33% - 16px)";
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .box-center {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ .select {
|
|
|
+ width: 110px;
|
|
|
+ height: 36px;
|
|
|
+ background: #1649ce;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-bottom {
|
|
|
+ margin-top: 36px;
|
|
|
+ display: flex;
|
|
|
+ .circle {
|
|
|
+ margin: 40px;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ }
|
|
|
+ .msg {
|
|
|
+ flex: 1;
|
|
|
+ margin-top: 10px;
|
|
|
+ .msg-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 16px;
|
|
|
+ .msg-color {
|
|
|
+ display: block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ border-radius: 10px 10px;
|
|
|
+ background: #ffffff;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .type {
|
|
|
+ margin: 0 6px 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|