xymp
/
frontend
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'fly' into xy-ly

Browse Source
master
fanluyan 2 years ago
parent 7160ec0fe6 a6a985faf1
commit 880eb1b649
14 changed files with 316 additions and 236 deletions
Show Stats Download Patch File Download Diff File

2
src/App.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<template>
<div id="app" class="blueStyle">
<div id="app" class="greenStyle">
<router-view> </router-view>
</div>
</template>

6
src/assets/css/element.less
Unescape Escape View File

@ -63,3 +63,9 @@
.el-dropdown [disabled] {
color: #fff;
}
.el-select-dropdown__item.selected {
font-weight: normal;
}
.el-dropdown-menu--small .el-dropdown-menu__item {
font-size: 14px;
}

2
src/assets/css/global.less
Unescape Escape View File

@ -1,5 +1,5 @@
//Brand @color
@color-primary: #409eff;
@color-primary: #169e8c;
@color-primary-light: mix(@color-white, @color-primary, 80%);
@color-primary-lighter: mix(@color-white, @color-primary, 90%);
//Functional @color

393
src/assets/css/theme.less
Unescape Escape View File

@ -1,4 +1,4 @@
//蓝色主题
// //蓝色主题
.blueStyle {
.header {
background: #20a0ff;
@ -68,234 +68,237 @@
}
}
//红色主题
.redStyle {
.header {
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: #ee320c !important;
}
}
.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;
i {
color: #ee320c !important;
}
}
.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;
}
}
// //红色主题
// .redStyle {
// .header {
// 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: #ee320c !important;
// }
// }
// .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;
// i {
// color: #ee320c !important;
// }
// }
// .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: @green-color;
background: #169e8c;
}
.el-menu {
background: @green-color;
background: #169e8c;
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: @green-color;
background-color: @color-white;
border-bottom: 2px solid @color-white;
color: #fff;
background-color: #128071;
border-bottom: 2px solid #128071;
i {
color: @green-color !important;
color: #fff !important;
}
}
.el-submenu:focus .el-submenu__title,
.el-submenu:hover .el-submenu__title {
color: @green-color !important;
background-color: @color-white;
border-bottom: 2px solid @color-white;
color: #fff !important;
background-color: #128071;
border-bottom: 2px solid #128071;
i {
color: @green-color !important;
color: #fff !important;
}
}
.el-submenu.is-active .el-submenu__title {
color: @color-white;
}
}
.sidebar .el-menu--horizontal .el-menu-item.is-active i {
color: @green-color;
}
.sidebar
.el-menu--horizontal
.el-submenu.is-active
.el-submenu__title
> i:first-child {
color: @green-color;
}
.tags-li.active {
border: 1px solid @green-color;
background-color: @green-color;
}
}
//橙色主题
.orangeStyle {
.header {
background: @orange-color;
.el-menu--horizontal > .el-menu-item.is-active {
border-bottom: 2px solid #128071 !important;
color: #fff !important;
background-color: #128071 !important;
i {
color: #fff !important;
}
}
.sidebar {
.el-menu {
background: @orange-color;
.el-submenu.is-active {
.el-submenu__title {
border-bottom: 2px solid #128071 !important;
color: #fff !important;
background-color: #128071;
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: @color-white;
background-color: #f39b33;
border-bottom: 2px solid #f39b33;
i {
color: @color-white !important;
}
}
.el-submenu:focus .el-submenu__title,
.el-submenu:hover .el-submenu__title {
color: @color-white !important;
background-color: #f39b33;
border-bottom: 2px solid #f39b33;
i {
color: @color-white !important;
}
}
.el-submenu.is-active .el-submenu__title {
color: @color-white;
color: #fff !important;
}
}
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
background-color: #f39b33;
border-bottom: 2px solid #f39b33;
}
.el-menu--horizontal > .el-menu-item.is-active {
background-color: #f39b33;
border-bottom: 2px solid #f39b33;
}
.el-menu--horizontal
.el-submenu.is-active
.el-submenu__title
> i:first-child {
color: @orange-color;
}
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
// 设置颜色
color: #fff;
background: #f39b33 !important;
}
.el-menu--horizontal .el-menu-item.is-active i {
color: @orange-color;
}
}
.monitor-container
.sideBar
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
color: #fff;
background: #f39b33 !important;
}
.gallery-thumbs .swiper-slide-active {
border: 3px solid @orange-color !important;
border: 3px solid #169e8c !important;
}
.tags-li.active {
border: 1px solid @orange-color;
background-color: @orange-color;
border: 1px solid #169e8c;
background-color: #169e8c;
}
//渐变
.thumb-example .picBottom .smallPicBox .borderActive .timeInfo {
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
}
.picRotation .imageCenter .imgList .infoTop {
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
}
.picRotation .imageCenter .imgList .infoBottom {
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
}
}
// //橙色主题
// .orangeStyle {
// .header {
// background: @orange-color;
// }
// .sidebar {
// .el-menu {
// background: @orange-color;
// 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: @color-white;
// background-color: #f39b33;
// border-bottom: 2px solid #f39b33;
// i {
// color: @color-white !important;
// }
// }
// .el-submenu:focus .el-submenu__title,
// .el-submenu:hover .el-submenu__title {
// color: @color-white !important;
// background-color: #f39b33;
// border-bottom: 2px solid #f39b33;
// i {
// color: @color-white !important;
// }
// }
// .el-submenu.is-active .el-submenu__title {
// color: @color-white;
// }
// }
// .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
// background-color: #f39b33;
// border-bottom: 2px solid #f39b33;
// }
// .el-menu--horizontal > .el-menu-item.is-active {
// background-color: #f39b33;
// border-bottom: 2px solid #f39b33;
// }
// .el-menu--horizontal
// .el-submenu.is-active
// .el-submenu__title
// > i:first-child {
// color: @orange-color;
// }
// .el-tree--highlight-current
// .el-tree-node.is-current
// > .el-tree-node__content {
// // 设置颜色
// color: #fff;
// background: #f39b33 !important;
// }
// .el-menu--horizontal .el-menu-item.is-active i {
// color: @orange-color;
// }
// }
// .monitor-container
// .sideBar
// .el-tree--highlight-current
// .el-tree-node.is-current
// > .el-tree-node__content {
// color: #fff;
// background: #f39b33 !important;
// }
// .gallery-thumbs .swiper-slide-active {
// border: 3px solid @orange-color !important;
// }
// .tags-li.active {
// border: 1px solid @orange-color;
// background-color: @orange-color;
// }
// }

BIN
src/assets/css/theme/fonts/element-icons.ttf
View File

Binary file not shown.

BIN
src/assets/css/theme/fonts/element-icons.woff
View File

Binary file not shown.

1
src/assets/css/theme/index.css
View File

File diff suppressed because one or more lines are too long

2
src/components/common/Sidebar.vue
Unescape Escape View File

@ -78,7 +78,7 @@ export default {
{
icon: "el-icon-search",
index: "/realTimeSearch",
title: "实时查询",
title: "历史图片",
},
{
icon: "el-icon-files",

3
src/main.js
Unescape Escape View File

@ -4,8 +4,9 @@ import router from "./router";
import store from "./store";
//引入element-ui
import "../src/assets/css/theme/index.css";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// import "element-ui/lib/theme-chalk/index.css";
import { message } from "./components/message.js";

5
src/views/components/carouselChart.vue
Unescape Escape View File

@ -12,7 +12,7 @@
"
@click="handleBigPicbox(bigPicPath)"
>
<img ref="picJpg" class="animImg" :src="bigPicPath + '!1280x720'" />
<img ref="picJpg" class="animImg" :src="bigPicPath" />
<canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
<!-- <p class="mark">
@ -202,7 +202,8 @@ export default {
console.log(this.fiveList);
//获取points
getCoordinate({
channelId: this.fiveList[0].channelId,
channelId:
this.fiveList[0].channelId == null ? 1 : this.fiveList[0].channelId,
needPic: "0",
termId: this.fiveList[0].termId,
})

23
src/views/devicePhotoSchedule/components/setdevice.vue
Unescape Escape View File

@ -11,8 +11,15 @@
<h3>时间表规则</h3>
<div class="flexTimeGz">
<p class="timeGz" v-for="(val, index) in ruleSchedule" :key="index">
<span>{{ val.startTime }}</span> ~
<span>{{ val.endTime }}</span>
<span>
{{
val.startTime.substring(0, val.startTime.lastIndexOf(":"))
}}</span
>
~
<span>{{
val.endTime.substring(0, val.endTime.lastIndexOf(":"))
}}</span>
间隔：<b>{{ val.span }}分钟</b>
</p>
</div>
@ -46,12 +53,16 @@
class="custom-tree-node"
slot-scope="{ data }"
>
<span class="mr10">{{ data.name }}--{{ data.id }}</span>
<!-- <el-tag size="mini" type="success">装置下发成功</el-tag>
<span class="mr10">{{ data.name }}</span>
<!-- <el-tag size="mini" type="success" v-if="zzsuccess"
>装置下发成功</el-tag
>
<el-tag size="mini" v-if="zzpending"
><i class="el-icon-loading"></i>装置下发中</el-tag
>
<el-tag size="mini" type="danger">装置下发失败</el-tag> -->
<el-tag size="mini" type="danger" v-if="zzerror"
>装置下发失败</el-tag
> -->
</span>
<span v-else class="custom-tree-node" slot-scope="{ data }">
<span>{{ data.name }}</span>
@ -229,12 +240,14 @@ export default {
return value.status !== 1;
});
if (this.requestList.length == 0) {
this.zzsuccess = true;
this.$message.success("下发成功");
clearInterval(this.timer);
this.timer = null;
this.isShow = false;
this.sureloading = false;
} else if (this.i > 9) {
this.zzerror = true;
this.i = 0;
this.$message.warning("下发失败，请稍后再试！");
clearInterval(this.timer);

17
src/views/devicePhotoSchedule/index.vue
Unescape Escape View File

@ -27,18 +27,25 @@
<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>
<!-- <el-table-column label="时间表类型" show-overflow-tooltip>
<template>时间表类型</template>
</el-table-column>
<el-table-column label="时间表规则" width="300">
</el-table-column> -->
<el-table-column label="时间表规则">
<template slot-scope="scope">
<p
class="timeGz"
v-for="(val, index) in scope.row.list"
:key="index"
>
<span>{{ val.startTime }}</span> ~
<span>{{ val.endTime }}</span>
<span>
{{
val.startTime.substring(0, val.startTime.lastIndexOf(":"))
}}</span
>
~
<span>{{
val.endTime.substring(0, val.endTime.lastIndexOf(":"))
}}</span>
间隔：<b>{{ val.span }}分钟</b>
</p>
<!-- <ul

26
src/views/realTimeMonitor/components/setschedule.vue
Unescape Escape View File

@ -94,8 +94,15 @@
v-for="(val, index) in scope.row.list"
:key="index"
>
<span>{{ val.startTime }}</span> ~
<span>{{ val.endTime }}</span>
<span>
{{
val.startTime.substring(0, val.startTime.lastIndexOf(":"))
}}</span
>
~
<span>{{
val.endTime.substring(0, val.endTime.lastIndexOf(":"))
}}</span>
间隔：<b>{{ val.span }}分钟</b>
</p>
</template>
@ -304,6 +311,7 @@ export default {
changeSelect() {
console.log(this.selaccess);
this.loading = true;
this.newshedulenr = [];
getSchedulenr({
channelid: this.selaccess,
terminalid: this.selfacilityId,
@ -365,9 +373,9 @@ export default {
}
})
.catch((err) => {
this.$message.error("查询失败");
clearInterval(this.timer);
this.timer = null;
this.$message.error("查询失败");
});
},
//获取线路列表数据
@ -542,7 +550,7 @@ export default {
},
closebtn() {
this.isShowset = false;
clearInterval(this.timer);
this.deviceList();
clearInterval(this.timers);
this.timers = null;
@ -554,7 +562,9 @@ export default {
this.isShow = false;
},
handleclose() {
clearInterval(this.timer);
this.newshedulenr = [];
this.shedulenr = [];
console.log("关闭轮询");
clearInterval(this.timers);
this.timers = null;
@ -598,6 +608,12 @@ export default {
}
.timeShow {
display: flex;
.leftTime {
width: 50%;
}
.rightTime {
width: 50%;
}
}
}
.searchBtn {

72
src/views/realTimeMonitor/index.vue
Unescape Escape View File

@ -14,21 +14,38 @@
:current-node-key="currentNodekey"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span v-if="node.level === 1" class="iconfont icon-dianli"></span>
<span
v-else-if="data.list && node.level !== 1"
class="iconfont icon-dianlihangye"
>
</span>
<span
<div v-if="node.level === 1">
<span class="iconfont icon-dianli"></span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }}
</span>
</div>
<div v-else-if="data.list && node.level !== 1">
<span class="iconfont icon-dianlihangye"> </span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }}
</span>
</div>
<div v-else>
<span
class="iconfont icon-video-camera"
:class="data.onlinestatus == 0 ? 'disconnect' : ''"
style="margin-right: 6px"
></span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''">{{
node.label
}}</span>
</div>
</span>
<!-- <span
v-else
class="iconfont icon-video-camera"
style="margin-right: 6px"
></span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''">{{
node.label
}}</span>
</span>
<span :class="data.onlinestatus == 0 ? 'disconnect' : ''"
>{{ node.label }} -- {{ data.cmdid }}</span
>
</span> -->
</el-tree>
</div>
<!-- 带参数的中心内容右侧参数区 -->
@ -44,6 +61,10 @@
</div> -->
</div>
<div class="parameterArea">
<div class="zzbox">
<!-- <h3>装置名称</h3> -->
<p class="zzidname">{{ cmdid }}</p>
</div>
<div class="paramsDate">
<h3>日历快速查询</h3>
<el-date-picker
@ -202,7 +223,6 @@ import {
getLatestPhotoJoggle,
getReturnedPhotoJoggle,
alarmMarkJoggle,
getCoordinate,
} from "@/utils/api/index";
import { mapState } from "vuex";
import carouselChart from "../components/carouselChart.vue";
@ -244,19 +264,19 @@ export default {
nopicPath: require("@/assets/img/nopic.jpg"),
loadingBg: true,
loading: true,
newPicData: "",
timer: null,
treetimer: null,
treenum: 0,
i: 0,
newTermId: "",
};
},
watch: {
// channelValue() {
// setTimeout(() => {
// this.$refs.multiSelect.blur();
// }, 50);
// },
lineTreeData: function (newVal, oldVal) {
console.log("11111111111111111");
console.log(newVal, oldVal);
},
},
computed: {
...mapState(["channelid", "termid"]),
@ -273,6 +293,9 @@ export default {
mounted() {},
created() {
this.getLineTreeList();
// this.treetimer = window.setInterval(() => {
// setTimeout(this.getLineTreeList(), 0);
// }, 3000);
this.getDateTime();
console.log(this.dateValue);
},
@ -378,6 +401,7 @@ export default {
this.terminalPhoto = [
{
path: this.nopicPath,
termId: id,
},
];
console.log(this.terminalPhoto);
@ -396,6 +420,7 @@ export default {
this.terminalPhoto = [
{
path: this.nopicPath,
termId: id,
},
];
console.log(this.terminalPhoto);
@ -418,6 +443,7 @@ export default {
this.terminalPhoto = [
{
path: this.nopicPath,
termId: termId,
},
];
this.totalPic = 0;
@ -654,6 +680,8 @@ export default {
// },
},
destroyed() {
clearInterval(this.treetimer);
this.treetimer = null;
//离开页面是销毁
if (this.timer) {
console.log(this.timer);
@ -696,7 +724,7 @@ export default {
> .el-tree-node__content {
// 设置颜色
color: #fff;
background: #2d8cf0;
background: #169e8c;
.custom-tree-node {
color: #fff;
}
@ -741,7 +769,8 @@ export default {
.monitorItemBox,
.paramsDate,
.setTimebtn,
.GPSItemBox {
.GPSItemBox,
.zzbox {
margin-bottom: 16px;
h3 {
font-size: 14px;
@ -752,6 +781,9 @@ export default {
.el-date-editor.el-input {
width: 215px;
}
.zzidname {
font-weight: normal;
}
}
.setTimebtn {
// position: absolute;

Write Preview
Loading…
Cancel
Save