diff --git a/src/assets/css/element.less b/src/assets/css/element.less new file mode 100644 index 0000000..beb9471 --- /dev/null +++ b/src/assets/css/element.less @@ -0,0 +1,35 @@ +//表格样式 +.el-table { + td.el-table__cell, + th.el-table__cell.is-leaf { + border-bottom: 1px solid #ebeef5; + } + .el-table__header-wrapper, + .el-table__fixed-header-wrapper { + border-top: 1px solid #ebeef5; + } + th.el-table__cell { + background: #f8f8f8 !important; + } + .el-button--text { + padding: 0px; + } + .el-button + .el-button, + .el-checkbox.is-bordered + .el-checkbox.is-bordered { + margin-left: 16px; + } + .deleteText { + color: #f56c6c; + } +} +.el-table::before, +.el-table__fixed-right::before, +.el-table__fixed::before { + height: 0px !important; +} +//分页 +.pageNation { + margin-top: 8px; + display: flex; + justify-content: flex-end; +} diff --git a/src/assets/css/global.less b/src/assets/css/global.less index b26bacd..b841ff4 100644 --- a/src/assets/css/global.less +++ b/src/assets/css/global.less @@ -25,3 +25,10 @@ //阴影 @box-shadow-basic: 0 2px 12px 0 rgba(0, 0, 0, 0.1); + +//网站主题颜色 + +//欣影橙色色 +@orange-color: #f08200; +//电网绿色 +@green-color: #00a096; diff --git a/src/assets/css/theme.less b/src/assets/css/theme.less index b2db8c3..3b18259 100644 --- a/src/assets/css/theme.less +++ b/src/assets/css/theme.less @@ -129,11 +129,11 @@ //绿色主题 .greenStyle { .header { - background: #00a096; + background: @green-color; } .el-menu { - background: #00a096; + background: @green-color; i { color: @color-white !important; @@ -153,23 +153,23 @@ .el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):hover { - color: #00a096; + color: @green-color; background-color: @color-white; border-bottom: 2px solid @color-white; i { - color: #00a096 !important; + color: @green-color !important; } } .el-submenu:focus .el-submenu__title, .el-submenu:hover .el-submenu__title { - color: #00a096 !important; + color: @green-color !important; background-color: @color-white; border-bottom: 2px solid @color-white; i { - color: #00a096 !important; + color: @green-color !important; } } @@ -179,7 +179,7 @@ } .sidebar .el-menu--horizontal .el-menu-item.is-active i { - color: #00a096; + color: @green-color; } .sidebar @@ -187,126 +187,103 @@ .el-submenu.is-active .el-submenu__title > i:first-child { - color: #00a096; + color: @green-color; } .tags-li.active { - border: 1px solid #00a096; - background-color: #00a096; + border: 1px solid @green-color; + background-color: @green-color; } } //橙色主题 .orangeStyle { .header { - background: #f08200; + background: @orange-color; } - .el-menu { - background: #f08200; - - i { - color: @color-white !important; - } - - .el-menu-item { - color: @color-white; - } + .sidebar { + .el-menu { + background: @orange-color; - .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: #f08200; - background-color: @color-white; - border-bottom: 2px solid @color-white; + .el-menu-item.is-active { + color: @color-white; + } - i { - color: #f08200 !important; + .el-submenu .el-submenu__title { + color: @color-white; } - } - .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; + .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; + } + } - i { - color: #f08200 !important; + .el-submenu.is-active .el-submenu__title { + color: @color-white; } } - - .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; } - } - .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-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: #f08200 !important; + background: @orange-color !important; + } + .el-menu--horizontal .el-menu-item.is-active i { + color: @orange-color; } } - .gallery-thumbs .swiper-slide-active { - border: 3px solid #f08200 !important; - } - .tags-li.active { - border: 1px solid #f08200; - background-color: #f08200; + .monitor-container + .sideBar + .el-tree--highlight-current + .el-tree-node.is-current + > .el-tree-node__content { + color: #fff; + background: @orange-color; } -} -//表格样式 - -.el-table { - td.el-table__cell, - th.el-table__cell.is-leaf { - border-bottom: 1px solid #ebeef5; - } - .el-table__header-wrapper, - .el-table__fixed-header-wrapper { - border-top: 1px solid #ebeef5; - } - th.el-table__cell { - background: #f8f8f8 !important; - } - .el-button--text { - padding: 0px; - } - .el-button + .el-button, - .el-checkbox.is-bordered + .el-checkbox.is-bordered { - margin-left: 16px; + .gallery-thumbs .swiper-slide-active { + border: 3px solid @orange-color !important; } - .deleteText { - color: #f56c6c; + .tags-li.active { + border: 1px solid @orange-color; + background-color: @orange-color; } } -.el-table::before, -.el-table__fixed-right::before, -.el-table__fixed::before { - height: 0px !important; -} -.pageNation { - margin-top: 8px; - display: flex; - justify-content: flex-end; -} diff --git a/src/assets/font/iconfont.css b/src/assets/font/iconfont.css new file mode 100644 index 0000000..e068e4b --- /dev/null +++ b/src/assets/font/iconfont.css @@ -0,0 +1,21 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1681806954677') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-dianli:before { + content: "\e649"; +} + +.icon-dianlihangye:before { + content: "\e791"; +} + diff --git a/src/assets/font/iconfont.ttf b/src/assets/font/iconfont.ttf new file mode 100644 index 0000000..09cdb69 Binary files /dev/null and b/src/assets/font/iconfont.ttf differ diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue index 26439a4..9f02cf1 100644 --- a/src/components/common/Header.vue +++ b/src/components/common/Header.vue @@ -18,16 +18,7 @@ :value="item.value" > - - +
@@ -39,8 +30,8 @@ - 公告 - 修改密码 + 退出登录 diff --git a/src/main.js b/src/main.js index cabb5b6..01db7d3 100644 --- a/src/main.js +++ b/src/main.js @@ -22,6 +22,8 @@ Vue.use(VueAwesomeSwiper /* { 全局组件的默认选项 } */); import "./assets/css/reset.css"; //默认样式 import "./assets/css/theme.less"; //修改主题颜色 import "./assets/css/global.less"; //全局定义颜色 +import "./assets/css/element.less"; //全局定义颜色 +import "./assets/font/iconfont.css"; //按钮 //引入md5加密 import md5 from "js-md5"; diff --git a/src/utils/api/index.js b/src/utils/api/index.js index e5b150c..f17809b 100644 --- a/src/utils/api/index.js +++ b/src/utils/api/index.js @@ -115,9 +115,9 @@ export function getTowerList(params) { //实时监控页面 //获取线路树状结构 -export function getLineTreeListJoggle(data) { +export function getdyTreeListJoggle(data) { return request({ - url: "/test/getLineTreeList", + url: "/test/getdyTreeList", method: "post", data, }); diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue index 43b9fba..f3a0d34 100644 --- a/src/views/realTimeMonitor/index.vue +++ b/src/views/realTimeMonitor/index.vue @@ -4,7 +4,6 @@
-

检测项 通道

+

通道

import { - getLineTreeListJoggle, + getdyTreeListJoggle, getChannelListJoggle, getTerminalPhotoListJoggle, } from "@/utils/api/index"; @@ -110,22 +110,36 @@ export default { mounted() {}, created() { this.getLineTreeList(); + this.getDateTime(); + console.log(this.dateValue); }, methods: { + //获取当前时间 + getDateTime() { + this.dateValue = new Date().getTime(); + }, + //选择时间 + changedate() { + console.log(this.dateValue); + }, //获取左侧树结构 getLineTreeList() { - getLineTreeListJoggle() + getdyTreeListJoggle({ + termid: 123455, + }) .then((res) => { console.log(res); this.lineTreeData = res.data.list; - console.log(this.lineTreeData); - if (this.lineTreeData.length > 0) { - this.currentNodekey = this.lineTreeData[0].id; //第一个数据 + console.log(this.lineTreeData[0].list[0].list); + if (this.lineTreeData[0].list[0].list.length > 0) { + this.currentNodekey = this.lineTreeData[0].list[0].list[0].id; //第一个数据 + console.log(this.currentNodekey); this.$nextTick(() => { this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来 console.log(this.currentNodekey); this.channelId = this.currentNodekey; - this.getChannelList(this.channelId); + console.log(this.channelId); + this.getChannelList(this.channelId); //获取通道id接口 }); } }) @@ -133,16 +147,28 @@ export default { console.log(err); //代码错误、请求失败捕获 }); }, + //点击获取当前点击的tree数据 + handleNodeClick(data, node) { + console.log(data, node); + if (data.list) { + this.$refs.tree.setCurrentKey(data.list[0].id); + } + this.channelId = data.id; //获取当前点击的id + this.getChannelList(this.channelId); //获取通道id接口 + }, + //获取通道的接口 getChannelList(id) { getChannelListJoggle({ termid: id }) .then((res) => { console.log(res); this.channelList = res.data.list; + console.log(this.channelList); this.getTerminalPhotoList( this.channelList[0].id, this.channelList[0].termId ); //获取图片列表是传当前设备的 id 和termid + this.channelOption = []; this.channelList.forEach((item) => { this.channelOption.push({ label: item.channelName, @@ -184,15 +210,6 @@ export default { console.log(channelObj); this.getTerminalPhotoList(val, channelObj.termid); }, - //点击获取当前点击的tree数据 - handleNodeClick(data, node) { - console.log(data, node); - if (data.list) { - this.$refs.tree.setCurrentKey(data.list[0].id); - } - this.channelId = data.id; //获取当前点击的id - this.getChannelList(this.channelId); - }, }, }; diff --git a/vue.config.js b/vue.config.js index 380688e..efef97e 100644 --- a/vue.config.js +++ b/vue.config.js @@ -18,16 +18,17 @@ module.exports = defineConfig({ }, devServer: { proxy: { - '/api': {//表示拦截以/api开头的请求路径 + "/api": { + //表示拦截以/api开头的请求路径 //表示拦截以/api开头的请求路径 //target: 'http://localhost:1234', //本地nodejs服务器 target: "http://47.96.238.157:8093", //公司项目服务器环境 //target: 'http://180.166.218.222:7200', changOrigin: true, //是否开启跨域 pathRewrite: { - '^/api': '' //重写api,把api变成空字符,因为我们真正请求的路径是没有api的 - } - } + "^/api": "", //重写api,把api变成空字符,因为我们真正请求的路径是没有api的 + }, + }, // [process.env.VUE_APP_BASE_API]: { // //表示拦截以/api开头的请求路径 // //target: 'http://localhost:1234', //本地nodejs服务器