|
@@ -1,233 +1,99 @@
|
|
|
<template>
|
|
|
- <div class="main-data data-weeks-foods">
|
|
|
- <div class="title-area">摄像头列表</div>
|
|
|
+ <div class="main-data data-week-foods">
|
|
|
+ <div class="title-area">监控列表</div>
|
|
|
+ <!-- 选择日期 -->
|
|
|
<div class="close-btn" @click="close"></div>
|
|
|
- <div class="me">
|
|
|
- <div v-for="(item, index) in unitDataList" :key="index">
|
|
|
- <img src="../../../assets/camera/camera.png" width="200px" @click="choose" style="cursor: pointer">
|
|
|
+ <div class="content-area">
|
|
|
+ <div class="content">
|
|
|
+ <div class="monitor-cont">
|
|
|
+ <div class="monitor-list" v-for="(item,index) in monitorList" :key="index" @click="chooseItem(index)">
|
|
|
+ <img src="@/assets/images/building_guarantee/img_12.png" class="img" />
|
|
|
+ <div class="monitor-info">
|
|
|
+ <div class="name">{{item.abbreviation}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getFoodsList } from "@/api/screen/service";
|
|
|
-import pinyin from "../data/pinyin.js";
|
|
|
+import {videoList} from "@/api/screen/service";
|
|
|
|
|
|
export default {
|
|
|
- name: "UnitCamera",
|
|
|
+ name: "projectCameraDia",
|
|
|
+ props: {
|
|
|
+ // monitorName:{
|
|
|
+ // type: String,
|
|
|
+ // default: "",
|
|
|
+ // required: true,
|
|
|
+ // }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- unitDataList: [
|
|
|
- {
|
|
|
- name: "国网山西省电力公司",
|
|
|
- num: 56,
|
|
|
- onLineNum: 46
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网太原供电公司",
|
|
|
- num: 10,
|
|
|
- onLineNum: 8
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网运城供电公司",
|
|
|
- num: 8,
|
|
|
- onLineNum: 4
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网山西省电力公司",
|
|
|
- num: 56,
|
|
|
- onLineNum: 46
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网太原供电公司",
|
|
|
- num: 10,
|
|
|
- onLineNum: 8
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网运城供电公司",
|
|
|
- num: 8,
|
|
|
- onLineNum: 4
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网山西省电力公司",
|
|
|
- num: 56,
|
|
|
- onLineNum: 46
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网太原供电公司",
|
|
|
- num: 10,
|
|
|
- onLineNum: 8
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网运城供电公司",
|
|
|
- num: 8,
|
|
|
- onLineNum: 4
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网山西省电力公司",
|
|
|
- num: 56,
|
|
|
- onLineNum: 46
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网太原供电公司",
|
|
|
- num: 10,
|
|
|
- onLineNum: 8
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网运城供电公司",
|
|
|
- num: 8,
|
|
|
- onLineNum: 4
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网山西省电力公司",
|
|
|
- num: 56,
|
|
|
- onLineNum: 46
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网太原供电公司",
|
|
|
- num: 10,
|
|
|
- onLineNum: 8
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网运城供电公司",
|
|
|
- num: 8,
|
|
|
- onLineNum: 4
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网山西省电力公司",
|
|
|
- num: 56,
|
|
|
- onLineNum: 46
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网太原供电公司",
|
|
|
- num: 10,
|
|
|
- onLineNum: 8
|
|
|
- },
|
|
|
- {
|
|
|
- name: "国网运城供电公司",
|
|
|
- num: 8,
|
|
|
- onLineNum: 4
|
|
|
- }],
|
|
|
+ monitorList: [],
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.videoList();
|
|
|
+ },
|
|
|
+ destroyed() {},
|
|
|
+ beforeDestroy() {},
|
|
|
mounted() {},
|
|
|
methods: {
|
|
|
- choose(){
|
|
|
- this.$emit("choose");
|
|
|
+ //统一视频(工程现场监控)
|
|
|
+ videoList() {
|
|
|
+ let code = "";
|
|
|
+ videoList(code).then((res) => {
|
|
|
+ if (Number(res.code) === 200) {
|
|
|
+ this.monitorList = res.data
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
- close() {
|
|
|
- this.$emit("close");
|
|
|
+ close(){
|
|
|
+ this.$emit("close")
|
|
|
},
|
|
|
+
|
|
|
+ //选择单个摄像头
|
|
|
+ chooseItem(index){
|
|
|
+ alert(JSON.stringify(this.monitorList[index]))
|
|
|
+ this.$emit("choose", this.monitorList[index]);
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.me{
|
|
|
- display: flex;flex-wrap: wrap;justify-content: space-around;height: 380px;overflow: auto;
|
|
|
-}
|
|
|
-.me::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.said{
|
|
|
- width: 2px;
|
|
|
- margin-right: 8px;
|
|
|
- height: 16px;
|
|
|
- background-color: #00FFFF;
|
|
|
-}
|
|
|
-.table-cont{
|
|
|
- width:100%;
|
|
|
-
|
|
|
- .table-top{
|
|
|
- width:100%;
|
|
|
- height: 26px;
|
|
|
- background: url("../../../assets/images/building_guarantee/img_11.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- padding:0 4px 0 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-size:14px;
|
|
|
- color:#00FFFF;
|
|
|
- }
|
|
|
- .table-bot{
|
|
|
- width:100%;
|
|
|
- height: 300px;
|
|
|
- overflow: auto;
|
|
|
- .table-list{
|
|
|
- margin-bottom: 10px;
|
|
|
- align-items: center;
|
|
|
- background: radial-gradient(
|
|
|
- 190% 71% at 50% 49%,
|
|
|
- rgba(21, 105, 107, 0.54) 0%,
|
|
|
- rgba(27, 95, 97, 0) 100%
|
|
|
- );
|
|
|
- width:100%;
|
|
|
- height:30px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-size:14px;
|
|
|
- color:#FFFFFF;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- .table-list:hover{
|
|
|
- background: radial-gradient(
|
|
|
- 190% 71% at 50% 49%,
|
|
|
- rgba(47, 204, 208, 0.74) 0%,
|
|
|
- rgba(27, 95, 97, 0) 100%
|
|
|
- );
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .table-bot::-webkit-scrollbar {
|
|
|
- display: none; /* 隐藏滚动条 */
|
|
|
- }
|
|
|
-
|
|
|
- .fir{
|
|
|
- width:40%;
|
|
|
- text-align: left;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .snd{
|
|
|
- width:30%;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
- .thd{
|
|
|
- width:30%;
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-}
|
|
|
+<style lang="scss">
|
|
|
|
|
|
-.el-scrollbar {
|
|
|
- background: #15696b;
|
|
|
+.el-scrollbar{
|
|
|
+ background: #15696B;
|
|
|
border: 1px solid #00ffff;
|
|
|
- ul {
|
|
|
- li {
|
|
|
- color: #fff;
|
|
|
+ ul{
|
|
|
+ li{
|
|
|
+ color: #FFF;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.el-select-dropdown__item.hover,
|
|
|
-.el-select-dropdown__item:hover {
|
|
|
- background: #15696b;
|
|
|
- color: #00ffff;
|
|
|
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
|
|
|
+ background: #15696B;
|
|
|
+ color: #00FFFF;
|
|
|
}
|
|
|
-.el-select-dropdown__item.selected {
|
|
|
- color: #00ffff;
|
|
|
+.el-select-dropdown__item.selected{
|
|
|
+ color: #00FFFF;
|
|
|
}
|
|
|
-.el-select .el-input .el-select__caret {
|
|
|
+.el-select .el-input .el-select__caret{
|
|
|
display: none;
|
|
|
}
|
|
|
-.data-weeks-foods {
|
|
|
+.data-week-foods {
|
|
|
position: relative;
|
|
|
- width: 668px;
|
|
|
- height: 432px;
|
|
|
+ width: 890px;
|
|
|
+ height: 576px;
|
|
|
background: url("../../../assets/images/main/dialog-bg.png") no-repeat;
|
|
|
background-size: cover;
|
|
|
- .close-btn {
|
|
|
+ .close-btn{
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
@@ -235,7 +101,7 @@ export default {
|
|
|
height: 50px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .choose-area {
|
|
|
+ .choose-area{
|
|
|
position: absolute;
|
|
|
right: 100px;
|
|
|
top: 7px;
|
|
@@ -244,18 +110,15 @@ export default {
|
|
|
line-height: 30px;
|
|
|
padding-left: 15px;
|
|
|
font-size: 14px;
|
|
|
- color: #00ffff;
|
|
|
+ color: #00FFFF;
|
|
|
background: url("../../../assets/images/main/choose_short.png") no-repeat;
|
|
|
cursor: pointer;
|
|
|
- }
|
|
|
- .choose-area.choose-week{
|
|
|
- right: 200px;
|
|
|
+
|
|
|
}
|
|
|
.content-area {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
padding: 15px 20px 0 15px;
|
|
|
- padding-top: 0 !important;
|
|
|
}
|
|
|
|
|
|
.content-title {
|
|
@@ -263,7 +126,7 @@ export default {
|
|
|
height: 26px;
|
|
|
background: url("../../../assets/images/main/title_pro_long.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- font-family: "PingFangSC";
|
|
|
+ font-family: PingFang SC;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|
|
|
color: #00ffff;
|
|
@@ -279,11 +142,7 @@ export default {
|
|
|
flex-direction: row;
|
|
|
align-items: center;
|
|
|
.data-list {
|
|
|
- background: radial-gradient(
|
|
|
- 190% 71% at 50% 49%,
|
|
|
- rgba(21, 105, 107, 0.54) 0%,
|
|
|
- rgba(27, 95, 97, 0) 100%
|
|
|
- );
|
|
|
+ background: radial-gradient(190% 71% at 50% 49%, rgba(21, 105, 107, 0.54) 0%, rgba(27, 95, 97, 0) 100%);
|
|
|
width: 100%;
|
|
|
height: 492px;
|
|
|
padding: 20px;
|
|
@@ -291,23 +150,10 @@ export default {
|
|
|
white-space: pre-wrap;
|
|
|
.data-item {
|
|
|
display: inline-block;
|
|
|
- color: #00ffff;
|
|
|
+ color: #00FFFF;
|
|
|
font-weight: bold;
|
|
|
- margin: 0 20px 20px 0;
|
|
|
+ margin: 0 40px 28px 0;
|
|
|
font-size: 14px;
|
|
|
- img {
|
|
|
- width: 80px;
|
|
|
- height: 80px;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- .name {
|
|
|
- width: 80px;
|
|
|
- display: block;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -334,26 +180,77 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .choose-area {
|
|
|
- .el-select {
|
|
|
- width: 90%;
|
|
|
+ .choose-area{
|
|
|
+ .el-select{
|
|
|
+ width: 50%;
|
|
|
}
|
|
|
- .el-input {
|
|
|
- input {
|
|
|
+ .el-input{
|
|
|
+ input{
|
|
|
background: rgba(255, 255, 255, 0);
|
|
|
- color: #00ffff;
|
|
|
+ color: #00FFFF;
|
|
|
border: none;
|
|
|
padding: 0;
|
|
|
width: 30px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .monitor-cont{
|
|
|
+ width:100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding:0 15px 20px;
|
|
|
+ background: url("../../../assets/images/main/data_bg6.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .monitor-list{
|
|
|
+ width:151px;
|
|
|
+ position: relative;
|
|
|
+ margin:0 10px 10px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ .img{
|
|
|
+ display: block;
|
|
|
+ width:151px;
|
|
|
+ height:104px;
|
|
|
+ }
|
|
|
+ .monitor-info{
|
|
|
+ position: absolute;
|
|
|
+ left:0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 25px;
|
|
|
+ opacity: 0.55;
|
|
|
+ background: #000000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 8px;
|
|
|
+
|
|
|
+ .name{
|
|
|
+ font-size: 13px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .online{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00F6EC;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .offline{
|
|
|
+ font-size: 12px;
|
|
|
+ color: #F60000;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .monitor-list:nth-child(5n){
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .no-data{
|
|
|
- text-align: center;
|
|
|
- color: #62ffe5;
|
|
|
- font-size: 25px;
|
|
|
- margin-top: 150px;
|
|
|
+ .title-area{
|
|
|
+ padding-left: 40px !important;
|
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
@@ -375,4 +272,3 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
-
|