颜色修改
fanluyan
2 years ago
parent
fde176b539
commit
53eecb8c88
@ -1,17 +1,16 @@
|
||||
<template>
|
||||
<div id="app" class="blueStyle">
|
||||
<router-view> </router-view>
|
||||
</div>
|
||||
<div id="app" class="orangeStyle">
|
||||
<router-view> </router-view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {}
|
||||
name: "App",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
mounted() {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
</style>
|
||||
<style lang="less"></style>
|
||||
|
||||
@ -1,260 +1,276 @@
|
||||
//蓝色主题
|
||||
.blueStyle {
|
||||
.header {
|
||||
background: #20a0ff;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
background: #20a0ff;
|
||||
|
||||
i {
|
||||
color: @color-white !important;
|
||||
}
|
||||
.header {
|
||||
background: #20a0ff;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: @color-white;
|
||||
}
|
||||
.el-menu {
|
||||
background: #20a0ff;
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: @color-white;
|
||||
}
|
||||
i {
|
||||
color: @color-white !important;
|
||||
}
|
||||
|
||||
.el-submenu .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
.el-menu-item {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover {
|
||||
color: #20a0ff;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
.el-menu-item.is-active {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #20a0ff !important;
|
||||
}
|
||||
}
|
||||
.el-submenu .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title {
|
||||
color: #20a0ff !important;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover {
|
||||
color: #20a0ff;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
i {
|
||||
color: #20a0ff !important;
|
||||
}
|
||||
}
|
||||
i {
|
||||
color: #20a0ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title {
|
||||
color: #20a0ff !important;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
i {
|
||||
color: #20a0ff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
border: 1px solid #20a0ff;
|
||||
background-color: #20a0ff;
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
border: 1px solid #20a0ff;
|
||||
background-color: #20a0ff;
|
||||
}
|
||||
}
|
||||
|
||||
//红色主题
|
||||
.redStyle {
|
||||
.header {
|
||||
background: #EE320C;
|
||||
}
|
||||
.header {
|
||||
background: #ee320c;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
background: #EE320C;
|
||||
.el-menu {
|
||||
background: #ee320c;
|
||||
|
||||
i {
|
||||
color: @color-white !important;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-submenu .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover {
|
||||
color: #EE320C;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
i {
|
||||
color: @color-white !important;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #EE320C !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title {
|
||||
color: #EE320C !important;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
.el-menu-item.is-active {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #EE320C !important;
|
||||
}
|
||||
}
|
||||
.el-submenu .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover {
|
||||
color: #ee320c;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
i {
|
||||
color: #ee320c !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
|
||||
color: #EE320C;
|
||||
}
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title {
|
||||
color: #ee320c !important;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
.sidebar .el-menu--horizontal .el-submenu.is-active .el-submenu__title>i:first-child {
|
||||
color: #EE320C;
|
||||
i {
|
||||
color: #ee320c !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
border: 1px solid #EE320C;
|
||||
background-color: #EE320C;
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
|
||||
color: #ee320c;
|
||||
}
|
||||
|
||||
.sidebar
|
||||
.el-menu--horizontal
|
||||
.el-submenu.is-active
|
||||
.el-submenu__title
|
||||
> i:first-child {
|
||||
color: #ee320c;
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
border: 1px solid #ee320c;
|
||||
background-color: #ee320c;
|
||||
}
|
||||
}
|
||||
|
||||
//绿色主题
|
||||
.greenStyle {
|
||||
.header {
|
||||
background: #25EE28;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
background: #25EE28;
|
||||
|
||||
i {
|
||||
color: @color-white !important;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: @color-white;
|
||||
}
|
||||
.header {
|
||||
background: #00a096;
|
||||
}
|
||||
|
||||
.el-submenu .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
.el-menu {
|
||||
background: #00a096;
|
||||
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover {
|
||||
color: #25EE28;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
i {
|
||||
color: @color-white !important;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #25EE28 !important;
|
||||
}
|
||||
}
|
||||
.el-menu-item {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title {
|
||||
color: #25EE28 !important;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
.el-menu-item.is-active {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
i {
|
||||
color: #25EE28 !important;
|
||||
}
|
||||
}
|
||||
.el-submenu .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover {
|
||||
color: #00a096;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
i {
|
||||
color: #00a096 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
|
||||
color: #25EE28;
|
||||
}
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title {
|
||||
color: #00a096 !important;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
.sidebar .el-menu--horizontal .el-submenu.is-active .el-submenu__title>i:first-child {
|
||||
color: #25EE28;
|
||||
i {
|
||||
color: #00a096 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
border: 1px solid #25EE28;
|
||||
background-color: #25EE28;
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
|
||||
color: #00a096;
|
||||
}
|
||||
|
||||
.sidebar
|
||||
.el-menu--horizontal
|
||||
.el-submenu.is-active
|
||||
.el-submenu__title
|
||||
> i:first-child {
|
||||
color: #00a096;
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
border: 1px solid #00a096;
|
||||
background-color: #00a096;
|
||||
}
|
||||
}
|
||||
|
||||
//橙色主题
|
||||
.orangeStyle {
|
||||
.header {
|
||||
background: #f08200;
|
||||
.header {
|
||||
background: #f08200;
|
||||
}
|
||||
.el-menu {
|
||||
background: #f08200;
|
||||
|
||||
i {
|
||||
color: @color-white !important;
|
||||
}
|
||||
.el-menu {
|
||||
background: #f08200;
|
||||
|
||||
i {
|
||||
color: @color-white !important;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-submenu .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover {
|
||||
color: #f08200;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
i {
|
||||
color: #f08200 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title {
|
||||
color: #f08200 !important;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
i {
|
||||
color: #f08200 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.el-menu-item {
|
||||
color: @color-white;
|
||||
}
|
||||
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
|
||||
color: #f08200;
|
||||
|
||||
.el-menu-item.is-active {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.sidebar .el-menu--horizontal .el-submenu.is-active .el-submenu__title>i:first-child {
|
||||
color: #f08200;
|
||||
.el-submenu .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
|
||||
.tags-li.active {
|
||||
border: 1px solid #f08200;
|
||||
background-color: #f08200;
|
||||
.el-menu-item:not(.is-disabled):focus,
|
||||
.el-menu-item:not(.is-disabled):hover {
|
||||
color: #f08200;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
i {
|
||||
color: #f08200 !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.el-submenu:focus .el-submenu__title,
|
||||
.el-submenu:hover .el-submenu__title {
|
||||
color: #f08200 !important;
|
||||
background-color: @color-white;
|
||||
border-bottom: 2px solid @color-white;
|
||||
|
||||
i {
|
||||
color: #f08200 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-submenu.is-active .el-submenu__title {
|
||||
color: @color-white;
|
||||
}
|
||||
}
|
||||
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
|
||||
color: #f08200;
|
||||
}
|
||||
|
||||
.sidebar
|
||||
.el-menu--horizontal
|
||||
.el-submenu.is-active
|
||||
.el-submenu__title
|
||||
> i:first-child {
|
||||
color: #f08200;
|
||||
}
|
||||
.sideBar {
|
||||
.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content {
|
||||
// 设置颜色
|
||||
color: #fff;
|
||||
background: #f08200 !important;
|
||||
}
|
||||
}
|
||||
.gallery-thumbs .swiper-slide-active {
|
||||
border: 3px solid #f08200 !important;
|
||||
}
|
||||
.tags-li.active {
|
||||
border: 1px solid #f08200;
|
||||
background-color: #f08200;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,464 +0,0 @@
|
||||
const photoVideo = [
|
||||
{
|
||||
"fileId": "2382c462-5850-4cc9-8413-8eb20a9c104e",
|
||||
"fileName": "shxy2023013100001_20230302100015_2_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302100015_2_255.jpg",
|
||||
"captureTime": "2023-03-02 10:00:15",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "1",
|
||||
"orientationName": "大号侧",
|
||||
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||
"saveTime": "2023-03-02 10:00:25.000099",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
},
|
||||
{
|
||||
"fileId": "6eca3e84-7988-4c83-894a-0d2fb5157e33",
|
||||
"fileName": "shxy2023013100001_20230302100007_1_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302100007_1_255.jpg",
|
||||
"captureTime": "2023-03-02 10:00:07",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "2",
|
||||
"orientationName": "小号侧",
|
||||
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||
"saveTime": "2023-03-02 10:00:18.000247",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
},
|
||||
{
|
||||
"fileId": "c9eb0ed1-731f-4543-bb87-3f67d7778796",
|
||||
"fileName": "shxy2023013100001_20230302090018_2_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302090018_2_255.jpg",
|
||||
"captureTime": "2023-03-02 09:00:18",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "1",
|
||||
"orientationName": "大号侧",
|
||||
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||
"saveTime": "2023-03-02 09:00:28.000053",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
},
|
||||
{
|
||||
"fileId": "63457b50-aa5e-4558-8849-f3576e13a6cb",
|
||||
"fileName": "shxy2023013100001_20230302090010_1_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302090010_1_255.jpg",
|
||||
"captureTime": "2023-03-02 09:00:10",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "2",
|
||||
"orientationName": "小号侧",
|
||||
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||
"saveTime": "2023-03-02 09:00:21.000113",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
},
|
||||
{
|
||||
"fileId": "3fa69fb6-332d-4935-814d-6fd9a9e03b1c",
|
||||
"fileName": "shxy2023013100001_20230302080016_2_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302080016_2_255.jpg",
|
||||
"captureTime": "2023-03-02 08:00:16",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "1",
|
||||
"orientationName": "大号侧",
|
||||
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||
"saveTime": "2023-03-02 08:00:26.000759",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
},
|
||||
{
|
||||
"fileId": "67634860-cd95-482f-857b-3d1190e37b05",
|
||||
"fileName": "shxy2023013100001_20230302080008_1_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302080008_1_255.jpg",
|
||||
"captureTime": "2023-03-02 08:00:08",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "2",
|
||||
"orientationName": "小号侧",
|
||||
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||
"saveTime": "2023-03-02 08:00:19.000241",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
},
|
||||
{
|
||||
"fileId": "f2cd8e33-4f97-43a7-b5b2-569bd6bfe9c1",
|
||||
"fileName": "shxy2023013100001_20230302070016_2_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302070016_2_255.jpg",
|
||||
"captureTime": "2023-03-02 07:00:16",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "1",
|
||||
"orientationName": "大号侧",
|
||||
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||
"saveTime": "2023-03-02 07:00:26.000512",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
},
|
||||
{
|
||||
"fileId": "3efade4a-6a35-40c3-b3f5-454feab69bea",
|
||||
"fileName": "shxy2023013100001_20230302070007_1_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302070007_1_255.jpg",
|
||||
"captureTime": "2023-03-02 07:00:07",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "2",
|
||||
"orientationName": "小号侧",
|
||||
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||
"saveTime": "2023-03-02 07:00:18.000115",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
},
|
||||
{
|
||||
"fileId": "a112b9bb-fd47-4e90-8747-01319930f171",
|
||||
"fileName": "shxy2023013100001_20230302060018_2_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302060018_2_255.jpg",
|
||||
"captureTime": "2023-03-02 06:00:18",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "1",
|
||||
"orientationName": "大号侧",
|
||||
"monitorPointId": "9455c6a5-1c03-840a-490f-3d585e316fa1",
|
||||
"saveTime": "2023-03-02 06:00:28.000832",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
},
|
||||
{
|
||||
"fileId": "6a1567fa-6a21-4d4f-b0b8-49a9ea633649",
|
||||
"fileName": "shxy2023013100001_20230302060009_1_255.jpg",
|
||||
"filePath": "/local/shxy2023013100001/202303/shxy2023013100001_20230302060009_1_255.jpg",
|
||||
"captureTime": "2023-03-02 06:00:09",
|
||||
"fileSize": null,
|
||||
"fileType": 0,
|
||||
"companyId": "f7d966d1-f3d1-4802-946d-ad93e1ee1b9b",
|
||||
"companyName": null,
|
||||
"lineId": "8cee6df6-46c7-4f6d-abfa-b2cfecdcf31f",
|
||||
"lineName": null,
|
||||
"towerId": "f0b2d5c3-500f-4107-81ff-501757a02064",
|
||||
"towerName": null,
|
||||
"orientation": "2",
|
||||
"orientationName": "小号侧",
|
||||
"monitorPointId": "12bf611b-ef23-6eca-dc61-2147baf24ecf",
|
||||
"saveTime": "2023-03-02 06:00:21.000806",
|
||||
"uploadTime": null,
|
||||
"analyzeTime": null,
|
||||
"status": 1,
|
||||
"discernStatus": null,
|
||||
"uploadSpeed": 0,
|
||||
"collectConfigId": null,
|
||||
"tfsTag": null,
|
||||
"tfsPicName": null,
|
||||
"coverPicName": "",
|
||||
"camera": null,
|
||||
"meid": null,
|
||||
"temperature": null,
|
||||
"voltage": null,
|
||||
"dbmLevel": null,
|
||||
"energy": null,
|
||||
"netType": null,
|
||||
"picGrade": null,
|
||||
"channel": null,
|
||||
"deviceId": "466470e9-d35e-4667-9963-f78163830fbc",
|
||||
"picOriginType": null,
|
||||
"hisflag": null,
|
||||
"timeConsuming": null,
|
||||
"markAlarmType": null,
|
||||
"dangerLevel": null,
|
||||
"isMark": null,
|
||||
"presettingNum": null,
|
||||
"presettingName": null,
|
||||
"alarmFilePath": ""
|
||||
}
|
||||
]
|
||||
|
||||
export default photoVideo
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="deviceInformation">
|
||||
<div class="deviceBtnGroup">
|
||||
<el-button type="primary" @click="handleAdddevice()">新增</el-button>
|
||||
<el-button type="primary" @click="handleResive()">修改</el-button>
|
||||
<!-- <el-button type="primary">批量添加</el-button> -->
|
||||
<el-button type="primary" @click="handleDelete()">删除</el-button>
|
||||
|
||||
<!-- <el-button type="primary">查询</el-button> -->
|
||||
</div>
|
||||
<!-- <div class="searchForm">
|
||||
<el-form :indevice="true" :model="formIndevice" class="demo-form-indevice">
|
||||
<el-form-item label="单位:">
|
||||
<el-select v-model="formIndevice.region" placeholder="活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="DY等级:">
|
||||
<el-select v-model="formIndevice.region" placeholder="活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="XL名称:">
|
||||
<el-input v-model="formIndevice.user" placeholder="审批人"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否为采集">
|
||||
<el-select v-model="formIndevice.region" placeholder="活动区域">
|
||||
<el-option label="区域一" value="shanghai"></el-option>
|
||||
<el-option label="区域二" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="PMS编号:">
|
||||
<el-input v-model="formIndevice.user" placeholder="审批人"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div> -->
|
||||
<div class="deviceTable">
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="deviceTableData"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
height="calc(100% - 40px)"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
@row-click="handleRowClick"
|
||||
>
|
||||
<el-table-column type="index" width="55"> </el-table-column>
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column label="单位" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.name }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时间表类型" show-overflow-tooltip>
|
||||
<template>时间表类型</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
prop="startTime"
|
||||
label="开始时间"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="endTime" label="结束时间" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="span" label="间隔（分）" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
<el-table-column prop="remark" label="备注" show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 新增线路 -->
|
||||
<adddeviceDialog
|
||||
:deviceDialog="deviceDialog"
|
||||
:deviceDialogTitle="deviceDialogTitle"
|
||||
:formItem="formdeviceInfo"
|
||||
@deviceDialogClose="deviceDialogClose"
|
||||
></adddeviceDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getScheduleRulelListJoggle,
|
||||
deletedeviceJoggle,
|
||||
} from "@/utils/api/index";
|
||||
import adddeviceDialog from "./components/adddeviceDialog.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
adddeviceDialog,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formIndevice: {
|
||||
user: "",
|
||||
region: "",
|
||||
},
|
||||
deviceDialogTitle: "", //弹窗标题
|
||||
deviceDialog: false,
|
||||
formdeviceInfo: {}, //弹窗传值
|
||||
deviceTableData: [],
|
||||
multipleSelection: [], //获取当前选中
|
||||
//删除数组
|
||||
deleteArr: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//获取线路列表数据
|
||||
deviceList() {
|
||||
getScheduleRulelListJoggle()
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
this.deviceTableData = res.data.list;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击行选中
|
||||
handleRowClick(row, column, event) {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
// console.log(column, row, event);
|
||||
},
|
||||
//获取选中的行
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
|
||||
// 新建弹窗
|
||||
handleAdddevice() {
|
||||
this.deviceDialog = true;
|
||||
this.deviceDialogTitle = "新增";
|
||||
},
|
||||
|
||||
//handleResive 修改线路数据
|
||||
handleResive() {
|
||||
if (this.multipleSelection.length !== 1) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "请选择要操作的记录最多只能选择一条！",
|
||||
type: "warning",
|
||||
});
|
||||
} else {
|
||||
console.log(this.multipleSelection);
|
||||
this.deviceDialogTitle = "修改";
|
||||
this.formdeviceInfo = Object.assign({}, this.multipleSelection[0]);
|
||||
this.deviceDialog = true;
|
||||
}
|
||||
},
|
||||
//新建弹窗取消按钮 关闭弹窗
|
||||
deviceDialogClose(flag) {
|
||||
if (flag) {
|
||||
//更新列表
|
||||
this.deviceList();
|
||||
}
|
||||
this.deviceDialog = false;
|
||||
},
|
||||
//删除数据
|
||||
handleDelete() {
|
||||
if (this.multipleSelection.length == 0) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
message: "请选择要操作的记录！",
|
||||
type: "warning",
|
||||
});
|
||||
} else {
|
||||
console.log(this.multipleSelection);
|
||||
for (let i in this.multipleSelection) {
|
||||
console.log(i);
|
||||
this.deleteArr.push({
|
||||
id: this.multipleSelection[i].id,
|
||||
});
|
||||
}
|
||||
console.log(this.deleteArr);
|
||||
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
// 行设置向后台请求删除数据
|
||||
deletedeviceJoggle({ list: this.deleteArr }).then((res) => {
|
||||
console.log(res);
|
||||
this.deviceList(); //刷新
|
||||
});
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.deviceList();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.deviceInformation {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @color-white;
|
||||
.deviceBtnGroup {
|
||||
padding: 16px 8px;
|
||||
}
|
||||
.searchForm {
|
||||
padding: 0px 8px;
|
||||
.el-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.deviceTable {
|
||||
padding: 16px 8px 0 8px;
|
||||
height: calc(100% - 80px);
|
||||
//background: #fcc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,185 +1,191 @@
|
||||
<template>
|
||||
<div class="picture" v-if="photoData">
|
||||
<div class="picTop">
|
||||
<h3>{{ photoData.text }}</h3>
|
||||
<div class="total">
|
||||
<span>监拍设备:14套 监拍点:14个 视频:0套 测温:0 套 微气象:0 套</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="picmain">
|
||||
<div class="photosPic">
|
||||
<div class="topTitle">
|
||||
<h4>{{ photoData.children[0].text }};大号侧</h4>
|
||||
<div class="iconList">
|
||||
<i class="el-icon-video-camera" title="主副机"></i>
|
||||
<i class="el-icon-video-camera" title="夜视"></i>
|
||||
<i class="el-icon-video-camera" title="云台"></i>
|
||||
<i class="el-icon-video-camera" title="T基+通道"></i>
|
||||
<i class="el-icon-video-camera" title="声光告警"></i>
|
||||
<i class="el-icon-video-camera" title="测温"></i>
|
||||
<i class="el-icon-video-camera" title="微气象"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="picShow">
|
||||
<li v-for="(item, index) in lagrePic.slice(0, 4)" :key="index" @click="picShow(index)">
|
||||
<img :src="'http://180.166.218.222:8104/media/' + item.filePath" />
|
||||
<span class="timeShow">{{ item.captureTime }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="photosPic">
|
||||
<div class="topTitle">
|
||||
<h4>{{ photoData.children[0].text }};小号测</h4>
|
||||
<div class="iconList">
|
||||
<i class="el-icon-video-camera" title="主副机"></i>
|
||||
<i class="el-icon-video-camera" title="夜视"></i>
|
||||
<i class="el-icon-video-camera" title="云台"></i>
|
||||
<i class="el-icon-video-camera" title="T基+通道"></i>
|
||||
<i class="el-icon-video-camera" title="声光告警"></i>
|
||||
<i class="el-icon-video-camera" title="测温"></i>
|
||||
<i class="el-icon-video-camera" title="微气象"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="picShow">
|
||||
<li v-for="(item, index) in smallPic.slice(0, 4)" :key="index" @click="picShow(index)">
|
||||
<img :src="'http://180.166.218.222:8104/media/' + item.filePath" />
|
||||
<span class="timeShow">{{ item.captureTime }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="picture" v-if="photoData">
|
||||
<div class="picTop">
|
||||
<h3>{{ photoData.text }}</h3>
|
||||
<div class="total">
|
||||
<span>监拍设备:14套 监拍点:14个 视频:0套 测温:0 套 微气象:0 套</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="picmain">
|
||||
<div class="photosPic">
|
||||
<div class="topTitle">
|
||||
<h4>{{ photoData.children[0].text }};大号侧</h4>
|
||||
<div class="iconList">
|
||||
<i class="el-icon-video-camera" title="主副机"></i>
|
||||
<i class="el-icon-video-camera" title="夜视"></i>
|
||||
<i class="el-icon-video-camera" title="云台"></i>
|
||||
<i class="el-icon-video-camera" title="T基+通道"></i>
|
||||
<i class="el-icon-video-camera" title="声光告警"></i>
|
||||
<i class="el-icon-video-camera" title="测温"></i>
|
||||
<i class="el-icon-video-camera" title="微气象"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage4"
|
||||
:page-size="100"
|
||||
layout="prev, pager, next, jumper,total"
|
||||
:total="400"
|
||||
>
|
||||
</el-pagination>
|
||||
<ul class="picShow">
|
||||
<li
|
||||
v-for="(item, index) in lagrePic.slice(0, 4)"
|
||||
:key="index"
|
||||
@click="picShow(index)"
|
||||
>
|
||||
<img :src="'http://180.166.218.222:8104/media/' + item.filePath" />
|
||||
<span class="timeShow">{{ item.captureTime }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="photosPic">
|
||||
<div class="topTitle">
|
||||
<h4>{{ photoData.children[0].text }};小号测</h4>
|
||||
<div class="iconList">
|
||||
<i class="el-icon-video-camera" title="主副机"></i>
|
||||
<i class="el-icon-video-camera" title="夜视"></i>
|
||||
<i class="el-icon-video-camera" title="云台"></i>
|
||||
<i class="el-icon-video-camera" title="T基+通道"></i>
|
||||
<i class="el-icon-video-camera" title="声光告警"></i>
|
||||
<i class="el-icon-video-camera" title="测温"></i>
|
||||
<i class="el-icon-video-camera" title="微气象"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="picShow">
|
||||
<li
|
||||
v-for="(item, index) in smallPic.slice(0, 4)"
|
||||
:key="index"
|
||||
@click="picShow(index)"
|
||||
>
|
||||
<img :src="'http://180.166.218.222:8104/media/' + item.filePath" />
|
||||
<span class="timeShow">{{ item.captureTime }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage4"
|
||||
:page-size="100"
|
||||
layout="prev, pager, next, jumper,total"
|
||||
:total="400"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import photo from '../../photo';
|
||||
export default {
|
||||
props: ['photoData'],
|
||||
data() {
|
||||
return {
|
||||
dataPhoto: '',
|
||||
lagrePic: [],
|
||||
smallPic: [],
|
||||
currentPage4: 4
|
||||
};
|
||||
props: ["photoData"],
|
||||
data() {
|
||||
return {
|
||||
dataPhoto: "",
|
||||
lagrePic: [],
|
||||
smallPic: [],
|
||||
currentPage4: 4,
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
this.getPhoto();
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
mounted: function () {
|
||||
this.getPhoto();
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
},
|
||||
methods: {
|
||||
handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
},
|
||||
getPhoto() {
|
||||
console.log(photo);
|
||||
//this.dataPhoto = photo;
|
||||
photo.forEach((item) => {
|
||||
console.log(item);
|
||||
if (item.orientation === '1') {
|
||||
this.lagrePic.push(item);
|
||||
} else {
|
||||
this.smallPic.push(item);
|
||||
}
|
||||
});
|
||||
},
|
||||
picShow(index) {
|
||||
console.log(index);
|
||||
getPhoto() {
|
||||
console.log(photo);
|
||||
//this.dataPhoto = photo;
|
||||
photo.forEach((item) => {
|
||||
console.log(item);
|
||||
if (item.orientation === "1") {
|
||||
this.lagrePic.push(item);
|
||||
} else {
|
||||
this.smallPic.push(item);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
picShow(index) {
|
||||
console.log(index);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" >
|
||||
<style lang="less">
|
||||
.picture {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
.picTop {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
.picTop {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
color: @color-text-regular;
|
||||
}
|
||||
.total span {
|
||||
color: @color-text-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
.picmain {
|
||||
border: 1px solid @border-color-base;
|
||||
.photosPic {
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid @border-color-base;
|
||||
&:last-child {
|
||||
border-bottom: 0px solid @border-color-base;
|
||||
}
|
||||
.topTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
h3 {
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
color: @color-text-regular;
|
||||
align-items: center;
|
||||
h4 {
|
||||
padding: 0 10px;
|
||||
display: inline-block;
|
||||
line-height: 45px;
|
||||
color: @color-text-regular;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.total span {
|
||||
.iconList {
|
||||
i {
|
||||
color: @color-text-secondary;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
margin-right: 12px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.picmain {
|
||||
border: 1px solid @border-color-base;
|
||||
.photosPic {
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid @border-color-base;
|
||||
&:last-child {
|
||||
border-bottom: 0px solid @border-color-base;
|
||||
}
|
||||
.topTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
h4 {
|
||||
padding: 0 10px;
|
||||
display: inline-block;
|
||||
line-height: 45px;
|
||||
color: @color-text-regular;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.iconList {
|
||||
i {
|
||||
color: @color-text-secondary;
|
||||
margin-right: 12px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.picShow {
|
||||
display: flex;
|
||||
padding-left: 6px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.picShow {
|
||||
display: flex;
|
||||
padding-left: 6px;
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 24.5%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: @color-primary;
|
||||
display: inline-block;
|
||||
color: @color-white;
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 24.5%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.timeShow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: @color-primary;
|
||||
display: inline-block;
|
||||
color: @color-white;
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page {
|
||||
margin-top: 16px;
|
||||
|
||||
}
|
||||
}
|
||||
.page {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue