diff --git a/config/index.js b/config/index.js index 5cebd62..f58eecb 100644 --- a/config/index.js +++ b/config/index.js @@ -10,19 +10,20 @@ assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { - '/queueadmin': { // 使用"/queue-admin"来代替 API头部，可随意命名 - //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 - target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 - pathRewrite: { - '^/queueadmin': '' // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） - }, - // 以下解决https 访问问题。上面的可以访问http - changeOrigin: true, - secure: false, - headers: { - Referer: 'https://geo.datav.aliyun.com' - } - }, + "/queueadmin": { + // 使用"/queue-admin"来代替 API头部，可随意命名 + //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 + target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 + pathRewrite: { + "^/queueadmin": "" // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） + }, + // 以下解决https 访问问题。上面的可以访问http + changeOrigin: true, + secure: false, + headers: { + Referer: "https://geo.datav.aliyun.com" + } + }, "/warnApi": { // target: "http://139.155.49.237:8286", //服务器接口 */ @@ -103,17 +104,17 @@ // 测试环境 // 'target': 'http://192.168.30.44:8800', // 接口域名 // 'target': 'http://192.168.30.146:8865', // 熊凯 - 'target': 'http://132.232.115.20:8862/datafilter-api/', // 熊凯 - - 'changeOrigin': true, //是否跨域 - 'pathRewrite': { - '^/datafilter-api': '' //需要rewrite重写的, + target: "http://132.232.115.20:8862/datafilter-api/", // 熊凯 + + changeOrigin: true, //是否跨域 + pathRewrite: { + "^/datafilter-api": "" //需要rewrite重写的, } } }, // Various Dev Server settings - host: "localhost", // can be overwritten by process.env.HOST + host: "192.168.30.113", // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: true, errorOverlay: true, diff --git a/config/index.js b/config/index.js index 5cebd62..f58eecb 100644 --- a/config/index.js +++ b/config/index.js @@ -10,19 +10,20 @@ assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { - '/queueadmin': { // 使用"/queue-admin"来代替 API头部，可随意命名 - //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 - target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 - pathRewrite: { - '^/queueadmin': '' // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） - }, - // 以下解决https 访问问题。上面的可以访问http - changeOrigin: true, - secure: false, - headers: { - Referer: 'https://geo.datav.aliyun.com' - } - }, + "/queueadmin": { + // 使用"/queue-admin"来代替 API头部，可随意命名 + //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 + target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 + pathRewrite: { + "^/queueadmin": "" // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） + }, + // 以下解决https 访问问题。上面的可以访问http + changeOrigin: true, + secure: false, + headers: { + Referer: "https://geo.datav.aliyun.com" + } + }, "/warnApi": { // target: "http://139.155.49.237:8286", //服务器接口 */ @@ -103,17 +104,17 @@ // 测试环境 // 'target': 'http://192.168.30.44:8800', // 接口域名 // 'target': 'http://192.168.30.146:8865', // 熊凯 - 'target': 'http://132.232.115.20:8862/datafilter-api/', // 熊凯 - - 'changeOrigin': true, //是否跨域 - 'pathRewrite': { - '^/datafilter-api': '' //需要rewrite重写的, + target: "http://132.232.115.20:8862/datafilter-api/", // 熊凯 + + changeOrigin: true, //是否跨域 + pathRewrite: { + "^/datafilter-api": "" //需要rewrite重写的, } } }, // Various Dev Server settings - host: "localhost", // can be overwritten by process.env.HOST + host: "192.168.30.113", // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: true, errorOverlay: true, diff --git a/src/assets/css/index.css b/src/assets/css/index.css index d84a333..f9181d1 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -107,6 +107,15 @@ --elinputdisabled: rgb(133, 131, 131); /* 项目设置不可选中栏的颜色 改为透明色 */ + + --lishisousuohead: #152636; + /* 历史搜索头部标题颜色 改为#CEE0FF */ + + --lishisousuobeibu: #0b141d; + /* 历史搜索背部颜色 改为#C0D5F8 */ + + --xinxititle: #fff; + /* 历史数据名字 白色变蓝色 #065CFE */ } .form-cascader .el-cascader-panel .el-radio { diff --git a/config/index.js b/config/index.js index 5cebd62..f58eecb 100644 --- a/config/index.js +++ b/config/index.js @@ -10,19 +10,20 @@ assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { - '/queueadmin': { // 使用"/queue-admin"来代替 API头部，可随意命名 - //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 - target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 - pathRewrite: { - '^/queueadmin': '' // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） - }, - // 以下解决https 访问问题。上面的可以访问http - changeOrigin: true, - secure: false, - headers: { - Referer: 'https://geo.datav.aliyun.com' - } - }, + "/queueadmin": { + // 使用"/queue-admin"来代替 API头部，可随意命名 + //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 + target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 + pathRewrite: { + "^/queueadmin": "" // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） + }, + // 以下解决https 访问问题。上面的可以访问http + changeOrigin: true, + secure: false, + headers: { + Referer: "https://geo.datav.aliyun.com" + } + }, "/warnApi": { // target: "http://139.155.49.237:8286", //服务器接口 */ @@ -103,17 +104,17 @@ // 测试环境 // 'target': 'http://192.168.30.44:8800', // 接口域名 // 'target': 'http://192.168.30.146:8865', // 熊凯 - 'target': 'http://132.232.115.20:8862/datafilter-api/', // 熊凯 - - 'changeOrigin': true, //是否跨域 - 'pathRewrite': { - '^/datafilter-api': '' //需要rewrite重写的, + target: "http://132.232.115.20:8862/datafilter-api/", // 熊凯 + + changeOrigin: true, //是否跨域 + pathRewrite: { + "^/datafilter-api": "" //需要rewrite重写的, } } }, // Various Dev Server settings - host: "localhost", // can be overwritten by process.env.HOST + host: "192.168.30.113", // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: true, errorOverlay: true, diff --git a/src/assets/css/index.css b/src/assets/css/index.css index d84a333..f9181d1 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -107,6 +107,15 @@ --elinputdisabled: rgb(133, 131, 131); /* 项目设置不可选中栏的颜色 改为透明色 */ + + --lishisousuohead: #152636; + /* 历史搜索头部标题颜色 改为#CEE0FF */ + + --lishisousuobeibu: #0b141d; + /* 历史搜索背部颜色 改为#C0D5F8 */ + + --xinxititle: #fff; + /* 历史数据名字 白色变蓝色 #065CFE */ } .form-cascader .el-cascader-panel .el-radio { diff --git a/src/components/index.vue b/src/components/index.vue index 933de25..311d9eb 100644 --- a/src/components/index.vue +++ b/src/components/index.vue @@ -82,7 +82,7 @@ - 新烽查询 + 监测数据查询 - 连接管理 - 连接管理 + 任务列表 - 数据浏览 - 时序预测 - 规则列表 @@ -404,6 +412,9 @@ root.style.setProperty("--xfcxbgc", "#c0d5f8"); root.style.setProperty("--elinputdisabled", "transparent"); root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)"); + root.style.setProperty("--lishisousuohead", "#CEE0FF"); + root.style.setProperty("--lishisousuobeibu", "#C0D5F8"); + root.style.setProperty("--xinxititle", "#065CFE"); this.flag = false; // ---------------------分界线----------------------------------// @@ -449,6 +460,9 @@ root.style.setProperty("--xfcxbgc", "#050c16"); root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)"); root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)"); + root.style.setProperty("--lishisousuohead", "#152636"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); + root.style.setProperty("--xinxititle", "#fff"); this.flag = true; } diff --git a/config/index.js b/config/index.js index 5cebd62..f58eecb 100644 --- a/config/index.js +++ b/config/index.js @@ -10,19 +10,20 @@ assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { - '/queueadmin': { // 使用"/queue-admin"来代替 API头部，可随意命名 - //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 - target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 - pathRewrite: { - '^/queueadmin': '' // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） - }, - // 以下解决https 访问问题。上面的可以访问http - changeOrigin: true, - secure: false, - headers: { - Referer: 'https://geo.datav.aliyun.com' - } - }, + "/queueadmin": { + // 使用"/queue-admin"来代替 API头部，可随意命名 + //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 + target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 + pathRewrite: { + "^/queueadmin": "" // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） + }, + // 以下解决https 访问问题。上面的可以访问http + changeOrigin: true, + secure: false, + headers: { + Referer: "https://geo.datav.aliyun.com" + } + }, "/warnApi": { // target: "http://139.155.49.237:8286", //服务器接口 */ @@ -103,17 +104,17 @@ // 测试环境 // 'target': 'http://192.168.30.44:8800', // 接口域名 // 'target': 'http://192.168.30.146:8865', // 熊凯 - 'target': 'http://132.232.115.20:8862/datafilter-api/', // 熊凯 - - 'changeOrigin': true, //是否跨域 - 'pathRewrite': { - '^/datafilter-api': '' //需要rewrite重写的, + target: "http://132.232.115.20:8862/datafilter-api/", // 熊凯 + + changeOrigin: true, //是否跨域 + pathRewrite: { + "^/datafilter-api": "" //需要rewrite重写的, } } }, // Various Dev Server settings - host: "localhost", // can be overwritten by process.env.HOST + host: "192.168.30.113", // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: true, errorOverlay: true, diff --git a/src/assets/css/index.css b/src/assets/css/index.css index d84a333..f9181d1 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -107,6 +107,15 @@ --elinputdisabled: rgb(133, 131, 131); /* 项目设置不可选中栏的颜色 改为透明色 */ + + --lishisousuohead: #152636; + /* 历史搜索头部标题颜色 改为#CEE0FF */ + + --lishisousuobeibu: #0b141d; + /* 历史搜索背部颜色 改为#C0D5F8 */ + + --xinxititle: #fff; + /* 历史数据名字 白色变蓝色 #065CFE */ } .form-cascader .el-cascader-panel .el-radio { diff --git a/src/components/index.vue b/src/components/index.vue index 933de25..311d9eb 100644 --- a/src/components/index.vue +++ b/src/components/index.vue @@ -82,7 +82,7 @@ - 新烽查询 + 监测数据查询 - 连接管理 - 连接管理 + 任务列表 - 数据浏览 - 时序预测 - 规则列表 @@ -404,6 +412,9 @@ root.style.setProperty("--xfcxbgc", "#c0d5f8"); root.style.setProperty("--elinputdisabled", "transparent"); root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)"); + root.style.setProperty("--lishisousuohead", "#CEE0FF"); + root.style.setProperty("--lishisousuobeibu", "#C0D5F8"); + root.style.setProperty("--xinxititle", "#065CFE"); this.flag = false; // ---------------------分界线----------------------------------// @@ -449,6 +460,9 @@ root.style.setProperty("--xfcxbgc", "#050c16"); root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)"); root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)"); + root.style.setProperty("--lishisousuohead", "#152636"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); + root.style.setProperty("--xinxititle", "#fff"); this.flag = true; } diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue index b042eeb..573c233 100644 --- a/src/components/site/previewOfSiteStatus.vue +++ b/src/components/site/previewOfSiteStatus.vue @@ -9,7 +9,72 @@ @click="fwClick" /> - + @@ -523,6 +599,9 @@ }, data: function() { return { + featureData: {}, + resPData: [], + featurePopVis: false, TimeBoxValue: [ this.moment() .subtract("days", 3) @@ -600,6 +679,7 @@ currentZoom: 5, switchStatusData: this.flag, // 重新定义数据 timer: {}, //定时器 + timer2: {}, // 顶部中间汇总A TopData1: "1866", TopData2: "933", @@ -659,13 +739,15 @@ // 项目设备总览A myChart: {}, XianYou: "", //现有设备总数 - DaJian: "", //搭建设备总数 + // DaJian: "", //搭建设备总数 // 项目设备总览B // 项目设备环比增长A myChart2: {}, // 项目设备环比增长B // 站点实时报警A WaringList: [], + areaList: [], // 项目设备省份地区统计 + NoBaoJingData: true, //有无报警数据，有就为false // 站点实时报警B map: "", @@ -677,15 +759,6 @@ }; }, methods: { - //根据行政区域编号去请求json转化为Feature再去定位 - async gotoAreaBycode(CODE) { - let response = await fetch( - "https://geo.datav.aliyun.com/areas/bound/geojson" + "?code=" + CODE - ); - - let data = await response.json(); - console.log(data); - }, //计算中心点 getCenterFromArray(clusterData) { var north = -90; @@ -735,7 +808,7 @@ } }) .then(response => { - console.log(response); + // console.log(response); if (response.data.code === 1) { this.showCluster(response.data.data); } @@ -743,7 +816,7 @@ }, //点击历史数据 historyData(stCode) { - console.log(stCode); + // console.log(stCode); this.currentSiteNo = stCode; this.dialogVisible = true; setTimeout(() => { @@ -766,9 +839,8 @@ // console.log(response); if (response.status === 200) { var qwe = response.data.data === "" ? [] : response.data.data; - + this.ProjectList = this.ProjectList.concat(qwe); - } else { message(response); } @@ -866,20 +938,15 @@ // 加载 项目设备总览 loadQuyuShebei() { this.$http - .post(this.nozzle.platEquipmentGetEquipStatistics, { + .post(this.nozzle.getEquipStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts( - response.data.data.title, - response.data.data.exiting, - response.data.data.tobebuilt - ); - this.XianYou = response.data.data.exitingsum; - this.DaJian = response.data.data.tobebuiltsum; + if (response.status === 200) { + this.XianYou = response.data.data.total; + this.loadRegionEcharts(response.data.data.data); } else { message(response); } @@ -888,23 +955,18 @@ message(response); }); }, - // 加载 项目设备环比增长 + // 加载 项目设备省份地区统计 loadQuYuSheBeiHuanBi() { this.$http - .post(this.nozzle.sysPlatformGetSiteStateStatistics, { + .post(this.nozzle.getAreaStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts2( - response.data.data.xdata, - response.data.data.offline, - response.data.data.warn, - response.data.data.malfunction, - response.data.data.alarm - ); + if (response.data.code === 1) { + // console.log(response); + this.areaList = response.data.data; } else { message(response); } @@ -946,19 +1008,21 @@ // 点击项目ZZJ ListClick(index) { this.ChecksplatformCode = this.ProjectList[index]["groupNo"]; - - //刷新联动地图上的点位按照项目实际的个数 - console.log(this.ChecksplatformCode) - this.initPointToMap(this.ChecksplatformCode) - if(this.ProjectList[index]["areaCode"]&&this.ProjectList[index]["groupNo"]!="") - this.gotoProgramArea(this.ProjectList[index]["areaCode"]) - else - { - this.fwClick() - if (this.vectorSourceArea) { - this.vectorSourceArea.clear(); + + //刷新联动地图上的点位按照项目实际的个数 + // console.log(this.ChecksplatformCode); + this.initPointToMap(this.ChecksplatformCode); + if ( + this.ProjectList[index]["areaCode"] && + this.ProjectList[index]["groupNo"] != "" + ) + this.gotoProgramArea(this.ProjectList[index]["areaCode"]); + else { + this.fwClick(); + if (this.vectorSourceArea) { + this.vectorSourceArea.clear(); + } } - } // 限制数组的长度不超过10个 // console.log(this.historyList.length); @@ -1006,16 +1070,15 @@ if (item1["groupName"] == item) { this.ChecksplatformCode = item1["groupNo"]; //地图联动响应的项目 - this.initPointToMap(this.ChecksplatformCode) - if(item1["areaCode"]&&item1["groupNo"]!="") - this.gotoProgramArea(item1["areaCode"]) - else - { - this.fwClick() - if (this.vectorSourceArea) { - this.vectorSourceArea.clear(); - } - } + this.initPointToMap(this.ChecksplatformCode); + if (item1["areaCode"] && item1["groupNo"] != "") + this.gotoProgramArea(item1["areaCode"]); + else { + this.fwClick(); + if (this.vectorSourceArea) { + this.vectorSourceArea.clear(); + } + } // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); // 根据平台渲染项目设备总览 @@ -1061,186 +1124,53 @@ return row; }, // 加载项目设备总览的ecahrts - loadRegionEcharts(SheBeiLeiXing, XianYouData, DaJianData) { + loadRegionEcharts(data) { + // console.log(data); // 基于准备好的dom，初始化echarts实例 this.myChart = this.$echarts.init( document.getElementById("previewOfSiteStatusCentent4eCharts") ); // 绘制图表 + this.myChart.clear(); - this.myChart.setOption({ - color: ["red"], + let option = { tooltip: { - trigger: "axis" + trigger: "item" }, - legend: { - x: "center", - data: ["现有设备", "搭建设备"], - show: false - }, - radar: [ + series: [ { - indicator: SheBeiLeiXing, - radius: 70, - shape: "circle", - name: { - formatter: "{value}", - textStyle: { - color: "red" + name: "类型", + type: "pie", + radius: "50%", + data: data, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)" } } } - ], - series: [ - { - type: "radar", - itemStyle: { normal: { areaStyle: { type: "default" } } }, - tooltip: { - trigger: "item" - }, - data: [ - { - name: "现有设备", - value: XianYouData, - areaStyle: { - normal: { - color: "rgb(255, 217, 0)" - } - }, - itemStyle: { - normal: { - color: "rgb(255, 217, 0)", - lineStyle: { - color: "rgb(255, 217, 0)" - }, - areaStyle: { - type: "default" - } - } - } - }, - { - name: "搭建设备", - value: DaJianData, - areaStyle: { - normal: { - color: "rgb(0, 119, 254)" // 选择项目颜色 - } - }, - itemStyle: { - normal: { - color: "rgb(0, 119, 254)", - lineStyle: { - color: "rgb(0, 119, 254)" - }, - areaStyle: { - type: "default" - } - } - } - } - ] - } ] - }); + }; + this.myChart.setOption(option); }, - // 加载项目设备环比增长的ecahrts - loadRegionEcharts2(XData, V1, V2, V3, V4) { - // 基于准备好的dom，初始化echarts实例 - this.myChart2 = this.$echarts.init( - document.getElementById("previewOfSiteStatusCentent5") - ); // 绘制图表 - this.myChart2.clear(); - this.myChart2.setOption({ - color: [ - "rgb(140,143,146)", - "rgb(255,214,0)", - "rgb(229,132,12)", - "rgb(211,22,22)" - ], - tooltip: { - trigger: "axis" - }, - legend: { - data: ["离线数量", "预警数量", "故障数量", "报警数量"], - textStyle: { - //图例文字的样式 - color: "rgb(0, 119, 254)", - fontSize: 12 - } - }, - grid: { - left: "3%", - right: "6%", - bottom: "3%", - containLabel: true - }, - xAxis: { - type: "category", - boundaryGap: false, - data: XData, - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - yAxis: { - type: "value", - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - series: [ - { - name: "离线数量", - type: "line", - data: V1, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "预警数量", - type: "line", - data: V2, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "故障数量", - type: "line", - data: V3, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "报警数量", - type: "line", - data: V4, - smooth: true, - symbol: "none" //取消折点圆圈 - } - ] - }); - }, + // 预警报警信息滚动 ScrollUp() { var box = document.getElementById("previewOfSiteStatusCentent6"); var con1 = document.getElementById("GisRightCententBox2UL"); + + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { + box.scrollTop = 0; + } else { + box.scrollTop++; + } + }, + ScrollUp2() { + var box = document.getElementById("previewOfSiteStatusCentent5"); + var con1 = document.getElementById("RightCententBox"); + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { box.scrollTop = 0; } else { @@ -1254,11 +1184,21 @@ this.$refs.tooltip[index].handleShowPopper(); } }, + mouseOver2(index) { + if (this.timer2) { + clearInterval(this.timer2); + this.$refs.tooltip2[index].handleShowPopper(); + } + }, //鼠标移出事件 mouseLeave(index) { this.$refs.tooltip[index].handleClosePopper(); this.timer = setInterval(this.ScrollUp, 100); }, + mouseLeave2(index) { + this.$refs.tooltip2[index].handleClosePopper(); + this.timer2 = setInterval(this.ScrollUp2, 100); + }, //按照项目选择去联动地图 initPointToMap1(projectNo) { let _this = this; @@ -1326,7 +1266,7 @@ } }) .then(response => { - console.log(response); + // console.log(response); if (response.data.code === 1) { let picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/"; @@ -1561,106 +1501,106 @@ // console.error(err); }); }, - async gotoProgramArea(areaCode) { + gotoProgramArea(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } - let response = await fetch( - "http://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" + /* let response = await fetch( + "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); - let dataJson = await response.json(); - /* this.$http - .get(this.nozzle.queueadmin+"/"+areaCode+".json") + let dataJson = await response.json(); */ + this.$http + .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { - console.log(response) + // console.log(response); let dataJson = response.data.features[0]; - console.log(dataJson) */ + // console.log(dataJson); - let areaFeature = new GeoJSON().readFeatures(dataJson); + let areaFeature = new GeoJSON().readFeatures(dataJson); - this.vectorSourceArea = new SourceVector({ - features: areaFeature - }); - - var vectorArea = new LayerVector({ - renderMode: "image", - maxResolution: 2, - zIndex: 2, - source: this.vectorSourceArea, - style: feature => { - return new Style({ - stroke: new Stroke({ - color: "#8A2BE2", - lineCap: "butt", - width: 3 - }) + this.vectorSourceArea = new SourceVector({ + features: areaFeature }); - } - }); - this.map.addLayer(vectorArea); - //定位过去 - //开始根据routeFeature定位 - /* console.log(areaFeature[0].getGeometry().getExtent()) + this.vectorArea = new LayerVector({ + renderMode: "image", + maxResolution: 2, + zIndex: 2, + source: this.vectorSourceArea, + style: feature => { + return new Style({ + stroke: new Stroke({ + color: "#8A2BE2", + lineCap: "butt", + width: 3 + }) + }); + } + }); + this.map.addLayer(this.vectorArea); + + //定位过去 + //开始根据routeFeature定位 + /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ - var extent = areaFeature[0].getGeometry().getExtent(); - this.map.getView().fit(extent, this.map.getSize()); - /* }) */ + var extent = areaFeature[0].getGeometry().getExtent(); + this.map.getView().fit(extent, this.map.getSize()); + }); }, - - gotoProgramArea1(areaCode) { + + gotoProgramArea1(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } - /* let response = await fetch( - "http://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" + /* let response = await fetch( + "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); let dataJson = await response.json(); */ - this.$http - .get(this.nozzle.queueadmin+"/"+areaCode+".json") + this.$http + .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { - console.log(response) + console.log(response); let dataJson = response.data.features[0]; - console.log(dataJson) + console.log(dataJson); - let areaFeature = new GeoJSON().readFeatures(dataJson); + let areaFeature = new GeoJSON().readFeatures(dataJson); - this.vectorSourceArea = new SourceVector({ - features: areaFeature - }); - - var vectorArea = new LayerVector({ - renderMode: "image", - maxResolution: 2, - zIndex: 2, - source: this.vectorSourceArea, - style: feature => { - return new Style({ - stroke: new Stroke({ - color: "#8A2BE2", - lineCap: "butt", - width: 3 - }) + this.vectorSourceArea = new SourceVector({ + features: areaFeature }); - } - }); - this.map.addLayer(vectorArea); - //定位过去 - //开始根据routeFeature定位 - /* console.log(areaFeature[0].getGeometry().getExtent()) + this.vectorArea = new LayerVector({ + renderMode: "image", + maxResolution: 2, + zIndex: 2, + source: this.vectorSourceArea, + style: feature => { + return new Style({ + stroke: new Stroke({ + color: "#8A2BE2", + lineCap: "butt", + width: 3 + }) + }); + } + }); + this.map.addLayer(this.vectorArea); + + //定位过去 + //开始根据routeFeature定位 + /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ - var extent = areaFeature[0].getGeometry().getExtent(); - this.map.getView().fit(extent, this.map.getSize()); - }) + var extent = areaFeature[0].getGeometry().getExtent(); + this.map.getView().fit(extent, this.map.getSize()); + }); }, //显示cluster聚簇界面 showCluster(clusterData) { @@ -1705,6 +1645,7 @@ feature.lat = cell.lat; feature.stName = cell.stName; feature.stCode = cell.stCode; + feature.tt = cell.tt; //加入ol.feautre几何属性 feature.wkt = resultwkt; //无聚簇类型图层也添加一遍 @@ -1788,10 +1729,8 @@ //飞行到指定的城市项目中心点 // this.flyToCity() //?要判断currentZoom加哪一个 - if (this.currentZoom >= 8) this.map.addLayer(this.vector); - else this.map.addLayer(this.layer); - - + if (this.currentZoom >= 8) this.map.addLayer(this.vector); + else this.map.addLayer(this.layer); }, getStyleOfCar(feature) { @@ -1874,18 +1813,18 @@ // this.map.addLayer(this.vector); - this.$http - .post(this.nozzle.listStationBase, { - data: { - /* platformCode:projectNo */ - } - }) - .then(response => { - console.log(response) - if (response.data.code === 1) { - this.showCluster(response.data.data); - } - }) + this.$http + .post(this.nozzle.listStationBase, { + data: { + /* platformCode:projectNo */ + } + }) + .then(response => { + // console.log(response); + if (response.data.code === 1) { + this.showCluster(response.data.data); + } + }); //鼠标监听 //鼠标点击事件 @@ -1945,9 +1884,17 @@ /* if(this.map.getView().getZoom()>10) */ this.map.removeLayer(this.layer); this.map.addLayer(this.vector); + //添加行政边框 + if (this.vectorArea) { + this.vectorArea.setVisible(true); + } } else if (zoom < 8 && this.currentZoom >= 8) { this.map.removeLayer(this.vector); this.map.addLayer(this.layer); + //清除行政边框 + if (this.vectorArea) { + this.vectorArea.setVisible(false); + } } else { } this.currentZoom = zoom; @@ -1956,6 +1903,7 @@ closepopup() { if (this.menu_overlay && this.menu_overlay != "") this.menu_overlay.setPosition(undefined); + this.featurePopVis = false; }, //openlayer属性框 showOlPanel(feature) { @@ -1968,27 +1916,25 @@ .then(resP => { console.log(resP); //开始展示属性字段 - let textContent = ""; + /* let textContent = ""; let closeDOM = - "X"; + "
X"; textContent = - "
" + + "
" + "详细信息" + - "
X
"; - textContent += - "
"; + "

"; + textContent += "
"; - //添加html拼接---缩放至 textContent += - `
` + "历史数据" + - "
"; + "
"; textContent += - '
' + + '
' + '
' + "名称" + "
" + @@ -1997,6 +1943,16 @@ "
" + "
"; + textContent += + '
' + + '
' + + "观测时间" + + "
" + + '
' + + feature.tt + + "
" + + "
"; + let data = {}; let currentData = resP.data.data; for (let kx = 0; kx < currentData.length; kx++) { @@ -2007,7 +1963,7 @@ textContent += '
'; for (let key in data) { textContent += - '
' + + '
' + '
' + key + "
" + @@ -2016,14 +1972,18 @@ "
" + "
"; } - textContent += "
"; + textContent += "
"; textContent = closeDOM + textContent; textContent += "
"; - //提取公共方法，放缩地图、显示属性等 - document.getElementById("popup").innerHTML = textContent; + */ + /* document.getElementById("popup").innerHTML = textContent; */ + + this.featureData = feature; + this.resPData = resP.data.data; + this.featurePopVis = true; this.menu_overlay.setPosition([feature.lon, feature.lat]); @@ -2770,10 +2730,10 @@ return this.flag; // 直接监听props里的status状态 } }, - created() { + /* created() { window.closepopup = this.closepopup; window.historyData = this.historyData; - }, + }, */ mounted: function() { // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); @@ -2781,7 +2741,7 @@ this.loadQuyuShebei(); // 根据平台渲染项目设备环比增长 this.loadQuYuSheBeiHuanBi(); - // 根据平台渲染站点实时报警信息 + // // 根据平台渲染站点实时报警信息 this.loadSiteBaoJing(); // 返回出项目的坐标以及缩放等级**************************GIS调用 @@ -2796,12 +2756,14 @@ this.$nextTick(function() { this.timer = setInterval(this.ScrollUp, 100); + this.timer2 = setInterval(this.ScrollUp2, 100); }); // 默认从本地session srotage里面读取历史搜索记录ZZJ this.getItem(); }, destroyed: function() { clearInterval(this.timer); + clearInterval(this.timer2); } }; @@ -2825,6 +2787,7 @@ width: 460px; z-index: 99999; position: relative; + border: 2px solid cornflowerblue; } .earthmap { width: 100%; @@ -2853,7 +2816,7 @@ } .triangle { - bottom: 101px; + bottom: 50%; left: -4px; border-top: 10px solid transparent; @@ -2866,6 +2829,18 @@ border-right: 20px solid transparent; border-left: 20px solid transparent; } +/* .popuphead { + background-color: rgb(206,224,255);border-bottom: 1px solid;border-bottom-color: gray; +} +.popupheada { + color:cornflowerblue ;position: absolute;top: 2px;right: 8px;cursor: pointer; +} +.xxxx { + color: cornflowerblue !important;font-size: 17px;font-weight: bold;margin-left: 9px; +} +.lssj { + color: cornflowerblue;position:absolute;font-size:15px;line-height:33px;margin-left: 22px;margin-top: -38px;width:69px;cursor: pointer;text-decoration:underline +} */ #previewOfSiteStatusLeftTop { /* position: absolute; */ /* left: 0; */ @@ -3226,7 +3201,7 @@ width: 100%; height: 24px; line-height: 24px; - color: rgb(255, 217, 0); + color: var(--yellow) !important; } .previewOfSiteStatusCentent4Font1P2 { float: left; @@ -3272,6 +3247,7 @@ #previewOfSiteStatusCentent5 { width: 100%; height: 100%; + overflow: auto; } /* 项目设备环比增长B */ /* 站点实时报警A */ @@ -3281,7 +3257,8 @@ /* background: rgba(7, 13, 19, 0.38); */ overflow: auto; } -#GisRightCententBox2UL { +#GisRightCententBox2UL, +#RightCententBox { width: 100%; height: auto; } @@ -3309,6 +3286,19 @@ font-size: 14px; color: var(--white); } + +.areaListNo { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} +.areaListName { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} .GIsRightWaringListType { width: 15%; float: left; @@ -3416,4 +3406,42 @@ top: 0; left: 420px; } +.xiangxixinxi { + color: var(--xinxititle) !important; + font-size: 17px; + font-weight: bold; + margin-left: 9px; +} +.lishishuju { + color: cornflowerblue; + position: absolute; + font-size: 15px; + line-height: 33px; + margin-left: 22px; + margin-top: -32px; + width: 69px; + cursor: pointer; + text-decoration: underline; +} +.lishisousuohead { + background-color: var(--lishisousuohead) !important; + border-bottom: 1px solid; + border-bottom-color: var(--lishisousuohead) !important; +} +.lishisousuobeibu { + background-color: var(--lishisousuobeibu) !important; +} +.mingcheng { + font-size: 14px; + line-height: 33px; + margin-left: 22px; + margin-top: 5px; + position: absolute; +} +.beibucolor { + width: 260px; + height: 33px; + color: var(--white) !important; + line-height: 33px; +} diff --git a/config/index.js b/config/index.js index 5cebd62..f58eecb 100644 --- a/config/index.js +++ b/config/index.js @@ -10,19 +10,20 @@ assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { - '/queueadmin': { // 使用"/queue-admin"来代替 API头部，可随意命名 - //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 - target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 - pathRewrite: { - '^/queueadmin': '' // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） - }, - // 以下解决https 访问问题。上面的可以访问http - changeOrigin: true, - secure: false, - headers: { - Referer: 'https://geo.datav.aliyun.com' - } - }, + "/queueadmin": { + // 使用"/queue-admin"来代替 API头部，可随意命名 + //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 + target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 + pathRewrite: { + "^/queueadmin": "" // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） + }, + // 以下解决https 访问问题。上面的可以访问http + changeOrigin: true, + secure: false, + headers: { + Referer: "https://geo.datav.aliyun.com" + } + }, "/warnApi": { // target: "http://139.155.49.237:8286", //服务器接口 */ @@ -103,17 +104,17 @@ // 测试环境 // 'target': 'http://192.168.30.44:8800', // 接口域名 // 'target': 'http://192.168.30.146:8865', // 熊凯 - 'target': 'http://132.232.115.20:8862/datafilter-api/', // 熊凯 - - 'changeOrigin': true, //是否跨域 - 'pathRewrite': { - '^/datafilter-api': '' //需要rewrite重写的, + target: "http://132.232.115.20:8862/datafilter-api/", // 熊凯 + + changeOrigin: true, //是否跨域 + pathRewrite: { + "^/datafilter-api": "" //需要rewrite重写的, } } }, // Various Dev Server settings - host: "localhost", // can be overwritten by process.env.HOST + host: "192.168.30.113", // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: true, errorOverlay: true, diff --git a/src/assets/css/index.css b/src/assets/css/index.css index d84a333..f9181d1 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -107,6 +107,15 @@ --elinputdisabled: rgb(133, 131, 131); /* 项目设置不可选中栏的颜色 改为透明色 */ + + --lishisousuohead: #152636; + /* 历史搜索头部标题颜色 改为#CEE0FF */ + + --lishisousuobeibu: #0b141d; + /* 历史搜索背部颜色 改为#C0D5F8 */ + + --xinxititle: #fff; + /* 历史数据名字 白色变蓝色 #065CFE */ } .form-cascader .el-cascader-panel .el-radio { diff --git a/src/components/index.vue b/src/components/index.vue index 933de25..311d9eb 100644 --- a/src/components/index.vue +++ b/src/components/index.vue @@ -82,7 +82,7 @@ - 新烽查询 + 监测数据查询 - 连接管理 - 连接管理 + 任务列表 - 数据浏览 - 时序预测 - 规则列表 @@ -404,6 +412,9 @@ root.style.setProperty("--xfcxbgc", "#c0d5f8"); root.style.setProperty("--elinputdisabled", "transparent"); root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)"); + root.style.setProperty("--lishisousuohead", "#CEE0FF"); + root.style.setProperty("--lishisousuobeibu", "#C0D5F8"); + root.style.setProperty("--xinxititle", "#065CFE"); this.flag = false; // ---------------------分界线----------------------------------// @@ -449,6 +460,9 @@ root.style.setProperty("--xfcxbgc", "#050c16"); root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)"); root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)"); + root.style.setProperty("--lishisousuohead", "#152636"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); + root.style.setProperty("--xinxititle", "#fff"); this.flag = true; } diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue index b042eeb..573c233 100644 --- a/src/components/site/previewOfSiteStatus.vue +++ b/src/components/site/previewOfSiteStatus.vue @@ -9,7 +9,72 @@ @click="fwClick" /> - + @@ -523,6 +599,9 @@ }, data: function() { return { + featureData: {}, + resPData: [], + featurePopVis: false, TimeBoxValue: [ this.moment() .subtract("days", 3) @@ -600,6 +679,7 @@ currentZoom: 5, switchStatusData: this.flag, // 重新定义数据 timer: {}, //定时器 + timer2: {}, // 顶部中间汇总A TopData1: "1866", TopData2: "933", @@ -659,13 +739,15 @@ // 项目设备总览A myChart: {}, XianYou: "", //现有设备总数 - DaJian: "", //搭建设备总数 + // DaJian: "", //搭建设备总数 // 项目设备总览B // 项目设备环比增长A myChart2: {}, // 项目设备环比增长B // 站点实时报警A WaringList: [], + areaList: [], // 项目设备省份地区统计 + NoBaoJingData: true, //有无报警数据，有就为false // 站点实时报警B map: "", @@ -677,15 +759,6 @@ }; }, methods: { - //根据行政区域编号去请求json转化为Feature再去定位 - async gotoAreaBycode(CODE) { - let response = await fetch( - "https://geo.datav.aliyun.com/areas/bound/geojson" + "?code=" + CODE - ); - - let data = await response.json(); - console.log(data); - }, //计算中心点 getCenterFromArray(clusterData) { var north = -90; @@ -735,7 +808,7 @@ } }) .then(response => { - console.log(response); + // console.log(response); if (response.data.code === 1) { this.showCluster(response.data.data); } @@ -743,7 +816,7 @@ }, //点击历史数据 historyData(stCode) { - console.log(stCode); + // console.log(stCode); this.currentSiteNo = stCode; this.dialogVisible = true; setTimeout(() => { @@ -766,9 +839,8 @@ // console.log(response); if (response.status === 200) { var qwe = response.data.data === "" ? [] : response.data.data; - + this.ProjectList = this.ProjectList.concat(qwe); - } else { message(response); } @@ -866,20 +938,15 @@ // 加载 项目设备总览 loadQuyuShebei() { this.$http - .post(this.nozzle.platEquipmentGetEquipStatistics, { + .post(this.nozzle.getEquipStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts( - response.data.data.title, - response.data.data.exiting, - response.data.data.tobebuilt - ); - this.XianYou = response.data.data.exitingsum; - this.DaJian = response.data.data.tobebuiltsum; + if (response.status === 200) { + this.XianYou = response.data.data.total; + this.loadRegionEcharts(response.data.data.data); } else { message(response); } @@ -888,23 +955,18 @@ message(response); }); }, - // 加载 项目设备环比增长 + // 加载 项目设备省份地区统计 loadQuYuSheBeiHuanBi() { this.$http - .post(this.nozzle.sysPlatformGetSiteStateStatistics, { + .post(this.nozzle.getAreaStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts2( - response.data.data.xdata, - response.data.data.offline, - response.data.data.warn, - response.data.data.malfunction, - response.data.data.alarm - ); + if (response.data.code === 1) { + // console.log(response); + this.areaList = response.data.data; } else { message(response); } @@ -946,19 +1008,21 @@ // 点击项目ZZJ ListClick(index) { this.ChecksplatformCode = this.ProjectList[index]["groupNo"]; - - //刷新联动地图上的点位按照项目实际的个数 - console.log(this.ChecksplatformCode) - this.initPointToMap(this.ChecksplatformCode) - if(this.ProjectList[index]["areaCode"]&&this.ProjectList[index]["groupNo"]!="") - this.gotoProgramArea(this.ProjectList[index]["areaCode"]) - else - { - this.fwClick() - if (this.vectorSourceArea) { - this.vectorSourceArea.clear(); + + //刷新联动地图上的点位按照项目实际的个数 + // console.log(this.ChecksplatformCode); + this.initPointToMap(this.ChecksplatformCode); + if ( + this.ProjectList[index]["areaCode"] && + this.ProjectList[index]["groupNo"] != "" + ) + this.gotoProgramArea(this.ProjectList[index]["areaCode"]); + else { + this.fwClick(); + if (this.vectorSourceArea) { + this.vectorSourceArea.clear(); + } } - } // 限制数组的长度不超过10个 // console.log(this.historyList.length); @@ -1006,16 +1070,15 @@ if (item1["groupName"] == item) { this.ChecksplatformCode = item1["groupNo"]; //地图联动响应的项目 - this.initPointToMap(this.ChecksplatformCode) - if(item1["areaCode"]&&item1["groupNo"]!="") - this.gotoProgramArea(item1["areaCode"]) - else - { - this.fwClick() - if (this.vectorSourceArea) { - this.vectorSourceArea.clear(); - } - } + this.initPointToMap(this.ChecksplatformCode); + if (item1["areaCode"] && item1["groupNo"] != "") + this.gotoProgramArea(item1["areaCode"]); + else { + this.fwClick(); + if (this.vectorSourceArea) { + this.vectorSourceArea.clear(); + } + } // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); // 根据平台渲染项目设备总览 @@ -1061,186 +1124,53 @@ return row; }, // 加载项目设备总览的ecahrts - loadRegionEcharts(SheBeiLeiXing, XianYouData, DaJianData) { + loadRegionEcharts(data) { + // console.log(data); // 基于准备好的dom，初始化echarts实例 this.myChart = this.$echarts.init( document.getElementById("previewOfSiteStatusCentent4eCharts") ); // 绘制图表 + this.myChart.clear(); - this.myChart.setOption({ - color: ["red"], + let option = { tooltip: { - trigger: "axis" + trigger: "item" }, - legend: { - x: "center", - data: ["现有设备", "搭建设备"], - show: false - }, - radar: [ + series: [ { - indicator: SheBeiLeiXing, - radius: 70, - shape: "circle", - name: { - formatter: "{value}", - textStyle: { - color: "red" + name: "类型", + type: "pie", + radius: "50%", + data: data, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)" } } } - ], - series: [ - { - type: "radar", - itemStyle: { normal: { areaStyle: { type: "default" } } }, - tooltip: { - trigger: "item" - }, - data: [ - { - name: "现有设备", - value: XianYouData, - areaStyle: { - normal: { - color: "rgb(255, 217, 0)" - } - }, - itemStyle: { - normal: { - color: "rgb(255, 217, 0)", - lineStyle: { - color: "rgb(255, 217, 0)" - }, - areaStyle: { - type: "default" - } - } - } - }, - { - name: "搭建设备", - value: DaJianData, - areaStyle: { - normal: { - color: "rgb(0, 119, 254)" // 选择项目颜色 - } - }, - itemStyle: { - normal: { - color: "rgb(0, 119, 254)", - lineStyle: { - color: "rgb(0, 119, 254)" - }, - areaStyle: { - type: "default" - } - } - } - } - ] - } ] - }); + }; + this.myChart.setOption(option); }, - // 加载项目设备环比增长的ecahrts - loadRegionEcharts2(XData, V1, V2, V3, V4) { - // 基于准备好的dom，初始化echarts实例 - this.myChart2 = this.$echarts.init( - document.getElementById("previewOfSiteStatusCentent5") - ); // 绘制图表 - this.myChart2.clear(); - this.myChart2.setOption({ - color: [ - "rgb(140,143,146)", - "rgb(255,214,0)", - "rgb(229,132,12)", - "rgb(211,22,22)" - ], - tooltip: { - trigger: "axis" - }, - legend: { - data: ["离线数量", "预警数量", "故障数量", "报警数量"], - textStyle: { - //图例文字的样式 - color: "rgb(0, 119, 254)", - fontSize: 12 - } - }, - grid: { - left: "3%", - right: "6%", - bottom: "3%", - containLabel: true - }, - xAxis: { - type: "category", - boundaryGap: false, - data: XData, - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - yAxis: { - type: "value", - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - series: [ - { - name: "离线数量", - type: "line", - data: V1, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "预警数量", - type: "line", - data: V2, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "故障数量", - type: "line", - data: V3, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "报警数量", - type: "line", - data: V4, - smooth: true, - symbol: "none" //取消折点圆圈 - } - ] - }); - }, + // 预警报警信息滚动 ScrollUp() { var box = document.getElementById("previewOfSiteStatusCentent6"); var con1 = document.getElementById("GisRightCententBox2UL"); + + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { + box.scrollTop = 0; + } else { + box.scrollTop++; + } + }, + ScrollUp2() { + var box = document.getElementById("previewOfSiteStatusCentent5"); + var con1 = document.getElementById("RightCententBox"); + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { box.scrollTop = 0; } else { @@ -1254,11 +1184,21 @@ this.$refs.tooltip[index].handleShowPopper(); } }, + mouseOver2(index) { + if (this.timer2) { + clearInterval(this.timer2); + this.$refs.tooltip2[index].handleShowPopper(); + } + }, //鼠标移出事件 mouseLeave(index) { this.$refs.tooltip[index].handleClosePopper(); this.timer = setInterval(this.ScrollUp, 100); }, + mouseLeave2(index) { + this.$refs.tooltip2[index].handleClosePopper(); + this.timer2 = setInterval(this.ScrollUp2, 100); + }, //按照项目选择去联动地图 initPointToMap1(projectNo) { let _this = this; @@ -1326,7 +1266,7 @@ } }) .then(response => { - console.log(response); + // console.log(response); if (response.data.code === 1) { let picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/"; @@ -1561,106 +1501,106 @@ // console.error(err); }); }, - async gotoProgramArea(areaCode) { + gotoProgramArea(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } - let response = await fetch( - "http://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" + /* let response = await fetch( + "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); - let dataJson = await response.json(); - /* this.$http - .get(this.nozzle.queueadmin+"/"+areaCode+".json") + let dataJson = await response.json(); */ + this.$http + .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { - console.log(response) + // console.log(response); let dataJson = response.data.features[0]; - console.log(dataJson) */ + // console.log(dataJson); - let areaFeature = new GeoJSON().readFeatures(dataJson); + let areaFeature = new GeoJSON().readFeatures(dataJson); - this.vectorSourceArea = new SourceVector({ - features: areaFeature - }); - - var vectorArea = new LayerVector({ - renderMode: "image", - maxResolution: 2, - zIndex: 2, - source: this.vectorSourceArea, - style: feature => { - return new Style({ - stroke: new Stroke({ - color: "#8A2BE2", - lineCap: "butt", - width: 3 - }) + this.vectorSourceArea = new SourceVector({ + features: areaFeature }); - } - }); - this.map.addLayer(vectorArea); - //定位过去 - //开始根据routeFeature定位 - /* console.log(areaFeature[0].getGeometry().getExtent()) + this.vectorArea = new LayerVector({ + renderMode: "image", + maxResolution: 2, + zIndex: 2, + source: this.vectorSourceArea, + style: feature => { + return new Style({ + stroke: new Stroke({ + color: "#8A2BE2", + lineCap: "butt", + width: 3 + }) + }); + } + }); + this.map.addLayer(this.vectorArea); + + //定位过去 + //开始根据routeFeature定位 + /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ - var extent = areaFeature[0].getGeometry().getExtent(); - this.map.getView().fit(extent, this.map.getSize()); - /* }) */ + var extent = areaFeature[0].getGeometry().getExtent(); + this.map.getView().fit(extent, this.map.getSize()); + }); }, - - gotoProgramArea1(areaCode) { + + gotoProgramArea1(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } - /* let response = await fetch( - "http://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" + /* let response = await fetch( + "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); let dataJson = await response.json(); */ - this.$http - .get(this.nozzle.queueadmin+"/"+areaCode+".json") + this.$http + .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { - console.log(response) + console.log(response); let dataJson = response.data.features[0]; - console.log(dataJson) + console.log(dataJson); - let areaFeature = new GeoJSON().readFeatures(dataJson); + let areaFeature = new GeoJSON().readFeatures(dataJson); - this.vectorSourceArea = new SourceVector({ - features: areaFeature - }); - - var vectorArea = new LayerVector({ - renderMode: "image", - maxResolution: 2, - zIndex: 2, - source: this.vectorSourceArea, - style: feature => { - return new Style({ - stroke: new Stroke({ - color: "#8A2BE2", - lineCap: "butt", - width: 3 - }) + this.vectorSourceArea = new SourceVector({ + features: areaFeature }); - } - }); - this.map.addLayer(vectorArea); - //定位过去 - //开始根据routeFeature定位 - /* console.log(areaFeature[0].getGeometry().getExtent()) + this.vectorArea = new LayerVector({ + renderMode: "image", + maxResolution: 2, + zIndex: 2, + source: this.vectorSourceArea, + style: feature => { + return new Style({ + stroke: new Stroke({ + color: "#8A2BE2", + lineCap: "butt", + width: 3 + }) + }); + } + }); + this.map.addLayer(this.vectorArea); + + //定位过去 + //开始根据routeFeature定位 + /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ - var extent = areaFeature[0].getGeometry().getExtent(); - this.map.getView().fit(extent, this.map.getSize()); - }) + var extent = areaFeature[0].getGeometry().getExtent(); + this.map.getView().fit(extent, this.map.getSize()); + }); }, //显示cluster聚簇界面 showCluster(clusterData) { @@ -1705,6 +1645,7 @@ feature.lat = cell.lat; feature.stName = cell.stName; feature.stCode = cell.stCode; + feature.tt = cell.tt; //加入ol.feautre几何属性 feature.wkt = resultwkt; //无聚簇类型图层也添加一遍 @@ -1788,10 +1729,8 @@ //飞行到指定的城市项目中心点 // this.flyToCity() //?要判断currentZoom加哪一个 - if (this.currentZoom >= 8) this.map.addLayer(this.vector); - else this.map.addLayer(this.layer); - - + if (this.currentZoom >= 8) this.map.addLayer(this.vector); + else this.map.addLayer(this.layer); }, getStyleOfCar(feature) { @@ -1874,18 +1813,18 @@ // this.map.addLayer(this.vector); - this.$http - .post(this.nozzle.listStationBase, { - data: { - /* platformCode:projectNo */ - } - }) - .then(response => { - console.log(response) - if (response.data.code === 1) { - this.showCluster(response.data.data); - } - }) + this.$http + .post(this.nozzle.listStationBase, { + data: { + /* platformCode:projectNo */ + } + }) + .then(response => { + // console.log(response); + if (response.data.code === 1) { + this.showCluster(response.data.data); + } + }); //鼠标监听 //鼠标点击事件 @@ -1945,9 +1884,17 @@ /* if(this.map.getView().getZoom()>10) */ this.map.removeLayer(this.layer); this.map.addLayer(this.vector); + //添加行政边框 + if (this.vectorArea) { + this.vectorArea.setVisible(true); + } } else if (zoom < 8 && this.currentZoom >= 8) { this.map.removeLayer(this.vector); this.map.addLayer(this.layer); + //清除行政边框 + if (this.vectorArea) { + this.vectorArea.setVisible(false); + } } else { } this.currentZoom = zoom; @@ -1956,6 +1903,7 @@ closepopup() { if (this.menu_overlay && this.menu_overlay != "") this.menu_overlay.setPosition(undefined); + this.featurePopVis = false; }, //openlayer属性框 showOlPanel(feature) { @@ -1968,27 +1916,25 @@ .then(resP => { console.log(resP); //开始展示属性字段 - let textContent = ""; + /* let textContent = ""; let closeDOM = - "X"; + "
X"; textContent = - "
" + + "
" + "详细信息" + - "
X
"; - textContent += - "
"; + "

"; + textContent += "
"; - //添加html拼接---缩放至 textContent += - `
` + "历史数据" + - "
"; + "
"; textContent += - '
' + + '
' + '
' + "名称" + "
" + @@ -1997,6 +1943,16 @@ "
" + "
"; + textContent += + '
' + + '
' + + "观测时间" + + "
" + + '
' + + feature.tt + + "
" + + "
"; + let data = {}; let currentData = resP.data.data; for (let kx = 0; kx < currentData.length; kx++) { @@ -2007,7 +1963,7 @@ textContent += '
'; for (let key in data) { textContent += - '
' + + '
' + '
' + key + "
" + @@ -2016,14 +1972,18 @@ "
" + "
"; } - textContent += "
"; + textContent += "
"; textContent = closeDOM + textContent; textContent += "
"; - //提取公共方法，放缩地图、显示属性等 - document.getElementById("popup").innerHTML = textContent; + */ + /* document.getElementById("popup").innerHTML = textContent; */ + + this.featureData = feature; + this.resPData = resP.data.data; + this.featurePopVis = true; this.menu_overlay.setPosition([feature.lon, feature.lat]); @@ -2770,10 +2730,10 @@ return this.flag; // 直接监听props里的status状态 } }, - created() { + /* created() { window.closepopup = this.closepopup; window.historyData = this.historyData; - }, + }, */ mounted: function() { // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); @@ -2781,7 +2741,7 @@ this.loadQuyuShebei(); // 根据平台渲染项目设备环比增长 this.loadQuYuSheBeiHuanBi(); - // 根据平台渲染站点实时报警信息 + // // 根据平台渲染站点实时报警信息 this.loadSiteBaoJing(); // 返回出项目的坐标以及缩放等级**************************GIS调用 @@ -2796,12 +2756,14 @@ this.$nextTick(function() { this.timer = setInterval(this.ScrollUp, 100); + this.timer2 = setInterval(this.ScrollUp2, 100); }); // 默认从本地session srotage里面读取历史搜索记录ZZJ this.getItem(); }, destroyed: function() { clearInterval(this.timer); + clearInterval(this.timer2); } }; @@ -2825,6 +2787,7 @@ width: 460px; z-index: 99999; position: relative; + border: 2px solid cornflowerblue; } .earthmap { width: 100%; @@ -2853,7 +2816,7 @@ } .triangle { - bottom: 101px; + bottom: 50%; left: -4px; border-top: 10px solid transparent; @@ -2866,6 +2829,18 @@ border-right: 20px solid transparent; border-left: 20px solid transparent; } +/* .popuphead { + background-color: rgb(206,224,255);border-bottom: 1px solid;border-bottom-color: gray; +} +.popupheada { + color:cornflowerblue ;position: absolute;top: 2px;right: 8px;cursor: pointer; +} +.xxxx { + color: cornflowerblue !important;font-size: 17px;font-weight: bold;margin-left: 9px; +} +.lssj { + color: cornflowerblue;position:absolute;font-size:15px;line-height:33px;margin-left: 22px;margin-top: -38px;width:69px;cursor: pointer;text-decoration:underline +} */ #previewOfSiteStatusLeftTop { /* position: absolute; */ /* left: 0; */ @@ -3226,7 +3201,7 @@ width: 100%; height: 24px; line-height: 24px; - color: rgb(255, 217, 0); + color: var(--yellow) !important; } .previewOfSiteStatusCentent4Font1P2 { float: left; @@ -3272,6 +3247,7 @@ #previewOfSiteStatusCentent5 { width: 100%; height: 100%; + overflow: auto; } /* 项目设备环比增长B */ /* 站点实时报警A */ @@ -3281,7 +3257,8 @@ /* background: rgba(7, 13, 19, 0.38); */ overflow: auto; } -#GisRightCententBox2UL { +#GisRightCententBox2UL, +#RightCententBox { width: 100%; height: auto; } @@ -3309,6 +3286,19 @@ font-size: 14px; color: var(--white); } + +.areaListNo { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} +.areaListName { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} .GIsRightWaringListType { width: 15%; float: left; @@ -3416,4 +3406,42 @@ top: 0; left: 420px; } +.xiangxixinxi { + color: var(--xinxititle) !important; + font-size: 17px; + font-weight: bold; + margin-left: 9px; +} +.lishishuju { + color: cornflowerblue; + position: absolute; + font-size: 15px; + line-height: 33px; + margin-left: 22px; + margin-top: -32px; + width: 69px; + cursor: pointer; + text-decoration: underline; +} +.lishisousuohead { + background-color: var(--lishisousuohead) !important; + border-bottom: 1px solid; + border-bottom-color: var(--lishisousuohead) !important; +} +.lishisousuobeibu { + background-color: var(--lishisousuobeibu) !important; +} +.mingcheng { + font-size: 14px; + line-height: 33px; + margin-left: 22px; + margin-top: 5px; + position: absolute; +} +.beibucolor { + width: 260px; + height: 33px; + color: var(--white) !important; + line-height: 33px; +} diff --git a/src/main.js b/src/main.js index 2e3c8fa..57f0931 100644 --- a/src/main.js +++ b/src/main.js @@ -9,9 +9,9 @@ import "@/assets/css/index.css"; import "@/assets/css/skincolor.scss"; -import Avue from '@smallwei/avue'; +import Avue from "@smallwei/avue"; // import '@smallwei/avue/lib/theme-chalk/index.css'; -import '@smallwei/avue/lib/index.css'; +import "@smallwei/avue/lib/index.css"; Vue.use(Avue); Vue.config.productionTip = false; @@ -19,6 +19,7 @@ let echarts = require("echarts/lib/echarts"); // 引入折线图/柱状图等组件 require("echarts/lib/chart/line"); +require("echarts/lib/chart/pie"); require("echarts/lib/chart/radar"); // 引入提示框和title组件，图例 require("echarts/lib/component/title"); @@ -37,7 +38,7 @@ import "./assets/css/common.css"; import "./util/interface"; import "../static/font/font.css"; -import './assets/iconfont/iconfont.css'; +import "./assets/iconfont/iconfont.css"; import nozzle from "./util/interface"; Vue.prototype.nozzle = nozzle; @@ -51,7 +52,7 @@ import initRules from "@/util/initRules"; // `初始化验证规则 import validate from "@/util/validate"; // 公共验证方法 // 当前系统模式 -import config from './config' +import config from "./config"; Vue.prototype.$config = config; // 设置为false 以阻止 VUE 在启动时生成生产提示 diff --git a/config/index.js b/config/index.js index 5cebd62..f58eecb 100644 --- a/config/index.js +++ b/config/index.js @@ -10,19 +10,20 @@ assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { - '/queueadmin': { // 使用"/queue-admin"来代替 API头部，可随意命名 - //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 - target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 - pathRewrite: { - '^/queueadmin': '' // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） - }, - // 以下解决https 访问问题。上面的可以访问http - changeOrigin: true, - secure: false, - headers: { - Referer: 'https://geo.datav.aliyun.com' - } - }, + "/queueadmin": { + // 使用"/queue-admin"来代替 API头部，可随意命名 + //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 + target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 + pathRewrite: { + "^/queueadmin": "" // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） + }, + // 以下解决https 访问问题。上面的可以访问http + changeOrigin: true, + secure: false, + headers: { + Referer: "https://geo.datav.aliyun.com" + } + }, "/warnApi": { // target: "http://139.155.49.237:8286", //服务器接口 */ @@ -103,17 +104,17 @@ // 测试环境 // 'target': 'http://192.168.30.44:8800', // 接口域名 // 'target': 'http://192.168.30.146:8865', // 熊凯 - 'target': 'http://132.232.115.20:8862/datafilter-api/', // 熊凯 - - 'changeOrigin': true, //是否跨域 - 'pathRewrite': { - '^/datafilter-api': '' //需要rewrite重写的, + target: "http://132.232.115.20:8862/datafilter-api/", // 熊凯 + + changeOrigin: true, //是否跨域 + pathRewrite: { + "^/datafilter-api": "" //需要rewrite重写的, } } }, // Various Dev Server settings - host: "localhost", // can be overwritten by process.env.HOST + host: "192.168.30.113", // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: true, errorOverlay: true, diff --git a/src/assets/css/index.css b/src/assets/css/index.css index d84a333..f9181d1 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -107,6 +107,15 @@ --elinputdisabled: rgb(133, 131, 131); /* 项目设置不可选中栏的颜色 改为透明色 */ + + --lishisousuohead: #152636; + /* 历史搜索头部标题颜色 改为#CEE0FF */ + + --lishisousuobeibu: #0b141d; + /* 历史搜索背部颜色 改为#C0D5F8 */ + + --xinxititle: #fff; + /* 历史数据名字 白色变蓝色 #065CFE */ } .form-cascader .el-cascader-panel .el-radio { diff --git a/src/components/index.vue b/src/components/index.vue index 933de25..311d9eb 100644 --- a/src/components/index.vue +++ b/src/components/index.vue @@ -82,7 +82,7 @@ - 新烽查询 + 监测数据查询 - 连接管理 - 连接管理 + 任务列表 - 数据浏览 - 时序预测 - 规则列表 @@ -404,6 +412,9 @@ root.style.setProperty("--xfcxbgc", "#c0d5f8"); root.style.setProperty("--elinputdisabled", "transparent"); root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)"); + root.style.setProperty("--lishisousuohead", "#CEE0FF"); + root.style.setProperty("--lishisousuobeibu", "#C0D5F8"); + root.style.setProperty("--xinxititle", "#065CFE"); this.flag = false; // ---------------------分界线----------------------------------// @@ -449,6 +460,9 @@ root.style.setProperty("--xfcxbgc", "#050c16"); root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)"); root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)"); + root.style.setProperty("--lishisousuohead", "#152636"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); + root.style.setProperty("--xinxititle", "#fff"); this.flag = true; } diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue index b042eeb..573c233 100644 --- a/src/components/site/previewOfSiteStatus.vue +++ b/src/components/site/previewOfSiteStatus.vue @@ -9,7 +9,72 @@ @click="fwClick" /> - + @@ -523,6 +599,9 @@ }, data: function() { return { + featureData: {}, + resPData: [], + featurePopVis: false, TimeBoxValue: [ this.moment() .subtract("days", 3) @@ -600,6 +679,7 @@ currentZoom: 5, switchStatusData: this.flag, // 重新定义数据 timer: {}, //定时器 + timer2: {}, // 顶部中间汇总A TopData1: "1866", TopData2: "933", @@ -659,13 +739,15 @@ // 项目设备总览A myChart: {}, XianYou: "", //现有设备总数 - DaJian: "", //搭建设备总数 + // DaJian: "", //搭建设备总数 // 项目设备总览B // 项目设备环比增长A myChart2: {}, // 项目设备环比增长B // 站点实时报警A WaringList: [], + areaList: [], // 项目设备省份地区统计 + NoBaoJingData: true, //有无报警数据，有就为false // 站点实时报警B map: "", @@ -677,15 +759,6 @@ }; }, methods: { - //根据行政区域编号去请求json转化为Feature再去定位 - async gotoAreaBycode(CODE) { - let response = await fetch( - "https://geo.datav.aliyun.com/areas/bound/geojson" + "?code=" + CODE - ); - - let data = await response.json(); - console.log(data); - }, //计算中心点 getCenterFromArray(clusterData) { var north = -90; @@ -735,7 +808,7 @@ } }) .then(response => { - console.log(response); + // console.log(response); if (response.data.code === 1) { this.showCluster(response.data.data); } @@ -743,7 +816,7 @@ }, //点击历史数据 historyData(stCode) { - console.log(stCode); + // console.log(stCode); this.currentSiteNo = stCode; this.dialogVisible = true; setTimeout(() => { @@ -766,9 +839,8 @@ // console.log(response); if (response.status === 200) { var qwe = response.data.data === "" ? [] : response.data.data; - + this.ProjectList = this.ProjectList.concat(qwe); - } else { message(response); } @@ -866,20 +938,15 @@ // 加载 项目设备总览 loadQuyuShebei() { this.$http - .post(this.nozzle.platEquipmentGetEquipStatistics, { + .post(this.nozzle.getEquipStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts( - response.data.data.title, - response.data.data.exiting, - response.data.data.tobebuilt - ); - this.XianYou = response.data.data.exitingsum; - this.DaJian = response.data.data.tobebuiltsum; + if (response.status === 200) { + this.XianYou = response.data.data.total; + this.loadRegionEcharts(response.data.data.data); } else { message(response); } @@ -888,23 +955,18 @@ message(response); }); }, - // 加载 项目设备环比增长 + // 加载 项目设备省份地区统计 loadQuYuSheBeiHuanBi() { this.$http - .post(this.nozzle.sysPlatformGetSiteStateStatistics, { + .post(this.nozzle.getAreaStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts2( - response.data.data.xdata, - response.data.data.offline, - response.data.data.warn, - response.data.data.malfunction, - response.data.data.alarm - ); + if (response.data.code === 1) { + // console.log(response); + this.areaList = response.data.data; } else { message(response); } @@ -946,19 +1008,21 @@ // 点击项目ZZJ ListClick(index) { this.ChecksplatformCode = this.ProjectList[index]["groupNo"]; - - //刷新联动地图上的点位按照项目实际的个数 - console.log(this.ChecksplatformCode) - this.initPointToMap(this.ChecksplatformCode) - if(this.ProjectList[index]["areaCode"]&&this.ProjectList[index]["groupNo"]!="") - this.gotoProgramArea(this.ProjectList[index]["areaCode"]) - else - { - this.fwClick() - if (this.vectorSourceArea) { - this.vectorSourceArea.clear(); + + //刷新联动地图上的点位按照项目实际的个数 + // console.log(this.ChecksplatformCode); + this.initPointToMap(this.ChecksplatformCode); + if ( + this.ProjectList[index]["areaCode"] && + this.ProjectList[index]["groupNo"] != "" + ) + this.gotoProgramArea(this.ProjectList[index]["areaCode"]); + else { + this.fwClick(); + if (this.vectorSourceArea) { + this.vectorSourceArea.clear(); + } } - } // 限制数组的长度不超过10个 // console.log(this.historyList.length); @@ -1006,16 +1070,15 @@ if (item1["groupName"] == item) { this.ChecksplatformCode = item1["groupNo"]; //地图联动响应的项目 - this.initPointToMap(this.ChecksplatformCode) - if(item1["areaCode"]&&item1["groupNo"]!="") - this.gotoProgramArea(item1["areaCode"]) - else - { - this.fwClick() - if (this.vectorSourceArea) { - this.vectorSourceArea.clear(); - } - } + this.initPointToMap(this.ChecksplatformCode); + if (item1["areaCode"] && item1["groupNo"] != "") + this.gotoProgramArea(item1["areaCode"]); + else { + this.fwClick(); + if (this.vectorSourceArea) { + this.vectorSourceArea.clear(); + } + } // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); // 根据平台渲染项目设备总览 @@ -1061,186 +1124,53 @@ return row; }, // 加载项目设备总览的ecahrts - loadRegionEcharts(SheBeiLeiXing, XianYouData, DaJianData) { + loadRegionEcharts(data) { + // console.log(data); // 基于准备好的dom，初始化echarts实例 this.myChart = this.$echarts.init( document.getElementById("previewOfSiteStatusCentent4eCharts") ); // 绘制图表 + this.myChart.clear(); - this.myChart.setOption({ - color: ["red"], + let option = { tooltip: { - trigger: "axis" + trigger: "item" }, - legend: { - x: "center", - data: ["现有设备", "搭建设备"], - show: false - }, - radar: [ + series: [ { - indicator: SheBeiLeiXing, - radius: 70, - shape: "circle", - name: { - formatter: "{value}", - textStyle: { - color: "red" + name: "类型", + type: "pie", + radius: "50%", + data: data, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)" } } } - ], - series: [ - { - type: "radar", - itemStyle: { normal: { areaStyle: { type: "default" } } }, - tooltip: { - trigger: "item" - }, - data: [ - { - name: "现有设备", - value: XianYouData, - areaStyle: { - normal: { - color: "rgb(255, 217, 0)" - } - }, - itemStyle: { - normal: { - color: "rgb(255, 217, 0)", - lineStyle: { - color: "rgb(255, 217, 0)" - }, - areaStyle: { - type: "default" - } - } - } - }, - { - name: "搭建设备", - value: DaJianData, - areaStyle: { - normal: { - color: "rgb(0, 119, 254)" // 选择项目颜色 - } - }, - itemStyle: { - normal: { - color: "rgb(0, 119, 254)", - lineStyle: { - color: "rgb(0, 119, 254)" - }, - areaStyle: { - type: "default" - } - } - } - } - ] - } ] - }); + }; + this.myChart.setOption(option); }, - // 加载项目设备环比增长的ecahrts - loadRegionEcharts2(XData, V1, V2, V3, V4) { - // 基于准备好的dom，初始化echarts实例 - this.myChart2 = this.$echarts.init( - document.getElementById("previewOfSiteStatusCentent5") - ); // 绘制图表 - this.myChart2.clear(); - this.myChart2.setOption({ - color: [ - "rgb(140,143,146)", - "rgb(255,214,0)", - "rgb(229,132,12)", - "rgb(211,22,22)" - ], - tooltip: { - trigger: "axis" - }, - legend: { - data: ["离线数量", "预警数量", "故障数量", "报警数量"], - textStyle: { - //图例文字的样式 - color: "rgb(0, 119, 254)", - fontSize: 12 - } - }, - grid: { - left: "3%", - right: "6%", - bottom: "3%", - containLabel: true - }, - xAxis: { - type: "category", - boundaryGap: false, - data: XData, - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - yAxis: { - type: "value", - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - series: [ - { - name: "离线数量", - type: "line", - data: V1, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "预警数量", - type: "line", - data: V2, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "故障数量", - type: "line", - data: V3, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "报警数量", - type: "line", - data: V4, - smooth: true, - symbol: "none" //取消折点圆圈 - } - ] - }); - }, + // 预警报警信息滚动 ScrollUp() { var box = document.getElementById("previewOfSiteStatusCentent6"); var con1 = document.getElementById("GisRightCententBox2UL"); + + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { + box.scrollTop = 0; + } else { + box.scrollTop++; + } + }, + ScrollUp2() { + var box = document.getElementById("previewOfSiteStatusCentent5"); + var con1 = document.getElementById("RightCententBox"); + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { box.scrollTop = 0; } else { @@ -1254,11 +1184,21 @@ this.$refs.tooltip[index].handleShowPopper(); } }, + mouseOver2(index) { + if (this.timer2) { + clearInterval(this.timer2); + this.$refs.tooltip2[index].handleShowPopper(); + } + }, //鼠标移出事件 mouseLeave(index) { this.$refs.tooltip[index].handleClosePopper(); this.timer = setInterval(this.ScrollUp, 100); }, + mouseLeave2(index) { + this.$refs.tooltip2[index].handleClosePopper(); + this.timer2 = setInterval(this.ScrollUp2, 100); + }, //按照项目选择去联动地图 initPointToMap1(projectNo) { let _this = this; @@ -1326,7 +1266,7 @@ } }) .then(response => { - console.log(response); + // console.log(response); if (response.data.code === 1) { let picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/"; @@ -1561,106 +1501,106 @@ // console.error(err); }); }, - async gotoProgramArea(areaCode) { + gotoProgramArea(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } - let response = await fetch( - "http://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" + /* let response = await fetch( + "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); - let dataJson = await response.json(); - /* this.$http - .get(this.nozzle.queueadmin+"/"+areaCode+".json") + let dataJson = await response.json(); */ + this.$http + .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { - console.log(response) + // console.log(response); let dataJson = response.data.features[0]; - console.log(dataJson) */ + // console.log(dataJson); - let areaFeature = new GeoJSON().readFeatures(dataJson); + let areaFeature = new GeoJSON().readFeatures(dataJson); - this.vectorSourceArea = new SourceVector({ - features: areaFeature - }); - - var vectorArea = new LayerVector({ - renderMode: "image", - maxResolution: 2, - zIndex: 2, - source: this.vectorSourceArea, - style: feature => { - return new Style({ - stroke: new Stroke({ - color: "#8A2BE2", - lineCap: "butt", - width: 3 - }) + this.vectorSourceArea = new SourceVector({ + features: areaFeature }); - } - }); - this.map.addLayer(vectorArea); - //定位过去 - //开始根据routeFeature定位 - /* console.log(areaFeature[0].getGeometry().getExtent()) + this.vectorArea = new LayerVector({ + renderMode: "image", + maxResolution: 2, + zIndex: 2, + source: this.vectorSourceArea, + style: feature => { + return new Style({ + stroke: new Stroke({ + color: "#8A2BE2", + lineCap: "butt", + width: 3 + }) + }); + } + }); + this.map.addLayer(this.vectorArea); + + //定位过去 + //开始根据routeFeature定位 + /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ - var extent = areaFeature[0].getGeometry().getExtent(); - this.map.getView().fit(extent, this.map.getSize()); - /* }) */ + var extent = areaFeature[0].getGeometry().getExtent(); + this.map.getView().fit(extent, this.map.getSize()); + }); }, - - gotoProgramArea1(areaCode) { + + gotoProgramArea1(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } - /* let response = await fetch( - "http://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" + /* let response = await fetch( + "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); let dataJson = await response.json(); */ - this.$http - .get(this.nozzle.queueadmin+"/"+areaCode+".json") + this.$http + .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { - console.log(response) + console.log(response); let dataJson = response.data.features[0]; - console.log(dataJson) + console.log(dataJson); - let areaFeature = new GeoJSON().readFeatures(dataJson); + let areaFeature = new GeoJSON().readFeatures(dataJson); - this.vectorSourceArea = new SourceVector({ - features: areaFeature - }); - - var vectorArea = new LayerVector({ - renderMode: "image", - maxResolution: 2, - zIndex: 2, - source: this.vectorSourceArea, - style: feature => { - return new Style({ - stroke: new Stroke({ - color: "#8A2BE2", - lineCap: "butt", - width: 3 - }) + this.vectorSourceArea = new SourceVector({ + features: areaFeature }); - } - }); - this.map.addLayer(vectorArea); - //定位过去 - //开始根据routeFeature定位 - /* console.log(areaFeature[0].getGeometry().getExtent()) + this.vectorArea = new LayerVector({ + renderMode: "image", + maxResolution: 2, + zIndex: 2, + source: this.vectorSourceArea, + style: feature => { + return new Style({ + stroke: new Stroke({ + color: "#8A2BE2", + lineCap: "butt", + width: 3 + }) + }); + } + }); + this.map.addLayer(this.vectorArea); + + //定位过去 + //开始根据routeFeature定位 + /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ - var extent = areaFeature[0].getGeometry().getExtent(); - this.map.getView().fit(extent, this.map.getSize()); - }) + var extent = areaFeature[0].getGeometry().getExtent(); + this.map.getView().fit(extent, this.map.getSize()); + }); }, //显示cluster聚簇界面 showCluster(clusterData) { @@ -1705,6 +1645,7 @@ feature.lat = cell.lat; feature.stName = cell.stName; feature.stCode = cell.stCode; + feature.tt = cell.tt; //加入ol.feautre几何属性 feature.wkt = resultwkt; //无聚簇类型图层也添加一遍 @@ -1788,10 +1729,8 @@ //飞行到指定的城市项目中心点 // this.flyToCity() //?要判断currentZoom加哪一个 - if (this.currentZoom >= 8) this.map.addLayer(this.vector); - else this.map.addLayer(this.layer); - - + if (this.currentZoom >= 8) this.map.addLayer(this.vector); + else this.map.addLayer(this.layer); }, getStyleOfCar(feature) { @@ -1874,18 +1813,18 @@ // this.map.addLayer(this.vector); - this.$http - .post(this.nozzle.listStationBase, { - data: { - /* platformCode:projectNo */ - } - }) - .then(response => { - console.log(response) - if (response.data.code === 1) { - this.showCluster(response.data.data); - } - }) + this.$http + .post(this.nozzle.listStationBase, { + data: { + /* platformCode:projectNo */ + } + }) + .then(response => { + // console.log(response); + if (response.data.code === 1) { + this.showCluster(response.data.data); + } + }); //鼠标监听 //鼠标点击事件 @@ -1945,9 +1884,17 @@ /* if(this.map.getView().getZoom()>10) */ this.map.removeLayer(this.layer); this.map.addLayer(this.vector); + //添加行政边框 + if (this.vectorArea) { + this.vectorArea.setVisible(true); + } } else if (zoom < 8 && this.currentZoom >= 8) { this.map.removeLayer(this.vector); this.map.addLayer(this.layer); + //清除行政边框 + if (this.vectorArea) { + this.vectorArea.setVisible(false); + } } else { } this.currentZoom = zoom; @@ -1956,6 +1903,7 @@ closepopup() { if (this.menu_overlay && this.menu_overlay != "") this.menu_overlay.setPosition(undefined); + this.featurePopVis = false; }, //openlayer属性框 showOlPanel(feature) { @@ -1968,27 +1916,25 @@ .then(resP => { console.log(resP); //开始展示属性字段 - let textContent = ""; + /* let textContent = ""; let closeDOM = - "X"; + "
X"; textContent = - "
" + + "
" + "详细信息" + - "
X
"; - textContent += - "
"; + "

"; + textContent += "
"; - //添加html拼接---缩放至 textContent += - `
` + "历史数据" + - "
"; + "
"; textContent += - '
' + + '
' + '
' + "名称" + "
" + @@ -1997,6 +1943,16 @@ "
" + "
"; + textContent += + '
' + + '
' + + "观测时间" + + "
" + + '
' + + feature.tt + + "
" + + "
"; + let data = {}; let currentData = resP.data.data; for (let kx = 0; kx < currentData.length; kx++) { @@ -2007,7 +1963,7 @@ textContent += '
'; for (let key in data) { textContent += - '
' + + '
' + '
' + key + "
" + @@ -2016,14 +1972,18 @@ "
" + "
"; } - textContent += "
"; + textContent += "
"; textContent = closeDOM + textContent; textContent += "
"; - //提取公共方法，放缩地图、显示属性等 - document.getElementById("popup").innerHTML = textContent; + */ + /* document.getElementById("popup").innerHTML = textContent; */ + + this.featureData = feature; + this.resPData = resP.data.data; + this.featurePopVis = true; this.menu_overlay.setPosition([feature.lon, feature.lat]); @@ -2770,10 +2730,10 @@ return this.flag; // 直接监听props里的status状态 } }, - created() { + /* created() { window.closepopup = this.closepopup; window.historyData = this.historyData; - }, + }, */ mounted: function() { // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); @@ -2781,7 +2741,7 @@ this.loadQuyuShebei(); // 根据平台渲染项目设备环比增长 this.loadQuYuSheBeiHuanBi(); - // 根据平台渲染站点实时报警信息 + // // 根据平台渲染站点实时报警信息 this.loadSiteBaoJing(); // 返回出项目的坐标以及缩放等级**************************GIS调用 @@ -2796,12 +2756,14 @@ this.$nextTick(function() { this.timer = setInterval(this.ScrollUp, 100); + this.timer2 = setInterval(this.ScrollUp2, 100); }); // 默认从本地session srotage里面读取历史搜索记录ZZJ this.getItem(); }, destroyed: function() { clearInterval(this.timer); + clearInterval(this.timer2); } }; @@ -2825,6 +2787,7 @@ width: 460px; z-index: 99999; position: relative; + border: 2px solid cornflowerblue; } .earthmap { width: 100%; @@ -2853,7 +2816,7 @@ } .triangle { - bottom: 101px; + bottom: 50%; left: -4px; border-top: 10px solid transparent; @@ -2866,6 +2829,18 @@ border-right: 20px solid transparent; border-left: 20px solid transparent; } +/* .popuphead { + background-color: rgb(206,224,255);border-bottom: 1px solid;border-bottom-color: gray; +} +.popupheada { + color:cornflowerblue ;position: absolute;top: 2px;right: 8px;cursor: pointer; +} +.xxxx { + color: cornflowerblue !important;font-size: 17px;font-weight: bold;margin-left: 9px; +} +.lssj { + color: cornflowerblue;position:absolute;font-size:15px;line-height:33px;margin-left: 22px;margin-top: -38px;width:69px;cursor: pointer;text-decoration:underline +} */ #previewOfSiteStatusLeftTop { /* position: absolute; */ /* left: 0; */ @@ -3226,7 +3201,7 @@ width: 100%; height: 24px; line-height: 24px; - color: rgb(255, 217, 0); + color: var(--yellow) !important; } .previewOfSiteStatusCentent4Font1P2 { float: left; @@ -3272,6 +3247,7 @@ #previewOfSiteStatusCentent5 { width: 100%; height: 100%; + overflow: auto; } /* 项目设备环比增长B */ /* 站点实时报警A */ @@ -3281,7 +3257,8 @@ /* background: rgba(7, 13, 19, 0.38); */ overflow: auto; } -#GisRightCententBox2UL { +#GisRightCententBox2UL, +#RightCententBox { width: 100%; height: auto; } @@ -3309,6 +3286,19 @@ font-size: 14px; color: var(--white); } + +.areaListNo { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} +.areaListName { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} .GIsRightWaringListType { width: 15%; float: left; @@ -3416,4 +3406,42 @@ top: 0; left: 420px; } +.xiangxixinxi { + color: var(--xinxititle) !important; + font-size: 17px; + font-weight: bold; + margin-left: 9px; +} +.lishishuju { + color: cornflowerblue; + position: absolute; + font-size: 15px; + line-height: 33px; + margin-left: 22px; + margin-top: -32px; + width: 69px; + cursor: pointer; + text-decoration: underline; +} +.lishisousuohead { + background-color: var(--lishisousuohead) !important; + border-bottom: 1px solid; + border-bottom-color: var(--lishisousuohead) !important; +} +.lishisousuobeibu { + background-color: var(--lishisousuobeibu) !important; +} +.mingcheng { + font-size: 14px; + line-height: 33px; + margin-left: 22px; + margin-top: 5px; + position: absolute; +} +.beibucolor { + width: 260px; + height: 33px; + color: var(--white) !important; + line-height: 33px; +} diff --git a/src/main.js b/src/main.js index 2e3c8fa..57f0931 100644 --- a/src/main.js +++ b/src/main.js @@ -9,9 +9,9 @@ import "@/assets/css/index.css"; import "@/assets/css/skincolor.scss"; -import Avue from '@smallwei/avue'; +import Avue from "@smallwei/avue"; // import '@smallwei/avue/lib/theme-chalk/index.css'; -import '@smallwei/avue/lib/index.css'; +import "@smallwei/avue/lib/index.css"; Vue.use(Avue); Vue.config.productionTip = false; @@ -19,6 +19,7 @@ let echarts = require("echarts/lib/echarts"); // 引入折线图/柱状图等组件 require("echarts/lib/chart/line"); +require("echarts/lib/chart/pie"); require("echarts/lib/chart/radar"); // 引入提示框和title组件，图例 require("echarts/lib/component/title"); @@ -37,7 +38,7 @@ import "./assets/css/common.css"; import "./util/interface"; import "../static/font/font.css"; -import './assets/iconfont/iconfont.css'; +import "./assets/iconfont/iconfont.css"; import nozzle from "./util/interface"; Vue.prototype.nozzle = nozzle; @@ -51,7 +52,7 @@ import initRules from "@/util/initRules"; // `初始化验证规则 import validate from "@/util/validate"; // 公共验证方法 // 当前系统模式 -import config from './config' +import config from "./config"; Vue.prototype.$config = config; // 设置为false 以阻止 VUE 在启动时生成生产提示 diff --git a/src/util/projectSet.js b/src/util/projectSet.js index a6dd7e9..9c61625 100644 --- a/src/util/projectSet.js +++ b/src/util/projectSet.js @@ -6,6 +6,9 @@ let host = "/projectApi"; let nozzle = { + getEquipStatistics: "/sys/equipinfo/getEquipStatistics", //项目设备总览 + getAreaStatistics: "/sys/stationbase/getAreaStatistics", //项目设备省份地区统计 + statement: "/statistical/statement", //数据分析//数据总览 service: "/statistical/service", //数据分析//数据总览 Conn: "/statistical/Conn", //数据分析/统计报表 @@ -41,7 +44,7 @@ listStationBase: "/sys/stationbase/listStationBase", //所有站点 getTempData: "/sys/stationbase/getTempData", //单个站点 - sysPlatformGetAllSiteCount: "/sys/sysplatform/getAllSiteCount", //站点状况预览图-----获取所有平台站点数目统计 + sysPlatformGetAllSiteCount: "/sys/sysplatform/getAllSiteCount" //站点状况预览图-----获取所有平台站点数目统计 }; for (let item in nozzle) { diff --git a/config/index.js b/config/index.js index 5cebd62..f58eecb 100644 --- a/config/index.js +++ b/config/index.js @@ -10,19 +10,20 @@ assetsSubDirectory: "static", assetsPublicPath: "/", proxyTable: { - '/queueadmin': { // 使用"/queue-admin"来代替 API头部，可随意命名 - //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 - target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 - pathRewrite: { - '^/queueadmin': '' // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） - }, - // 以下解决https 访问问题。上面的可以访问http - changeOrigin: true, - secure: false, - headers: { - Referer: 'https://geo.datav.aliyun.com' - } - }, + "/queueadmin": { + // 使用"/queue-admin"来代替 API头部，可随意命名 + //target: 'http://192.168.11.12:8080', // 源地址 本地开发的API头部 + target: "https://geo.datav.aliyun.com", // 配置到服务器后端的API头部 + pathRewrite: { + "^/queueadmin": "" // 路径重写，第一个与上面相同，第二个/queue-admin 为server.context-path（服务器的上下文） + }, + // 以下解决https 访问问题。上面的可以访问http + changeOrigin: true, + secure: false, + headers: { + Referer: "https://geo.datav.aliyun.com" + } + }, "/warnApi": { // target: "http://139.155.49.237:8286", //服务器接口 */ @@ -103,17 +104,17 @@ // 测试环境 // 'target': 'http://192.168.30.44:8800', // 接口域名 // 'target': 'http://192.168.30.146:8865', // 熊凯 - 'target': 'http://132.232.115.20:8862/datafilter-api/', // 熊凯 - - 'changeOrigin': true, //是否跨域 - 'pathRewrite': { - '^/datafilter-api': '' //需要rewrite重写的, + target: "http://132.232.115.20:8862/datafilter-api/", // 熊凯 + + changeOrigin: true, //是否跨域 + pathRewrite: { + "^/datafilter-api": "" //需要rewrite重写的, } } }, // Various Dev Server settings - host: "localhost", // can be overwritten by process.env.HOST + host: "192.168.30.113", // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: true, errorOverlay: true, diff --git a/src/assets/css/index.css b/src/assets/css/index.css index d84a333..f9181d1 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -107,6 +107,15 @@ --elinputdisabled: rgb(133, 131, 131); /* 项目设置不可选中栏的颜色 改为透明色 */ + + --lishisousuohead: #152636; + /* 历史搜索头部标题颜色 改为#CEE0FF */ + + --lishisousuobeibu: #0b141d; + /* 历史搜索背部颜色 改为#C0D5F8 */ + + --xinxititle: #fff; + /* 历史数据名字 白色变蓝色 #065CFE */ } .form-cascader .el-cascader-panel .el-radio { diff --git a/src/components/index.vue b/src/components/index.vue index 933de25..311d9eb 100644 --- a/src/components/index.vue +++ b/src/components/index.vue @@ -82,7 +82,7 @@ - 新烽查询 + 监测数据查询 - 连接管理 - 连接管理 + 任务列表 - 数据浏览 - 时序预测 - 规则列表 @@ -404,6 +412,9 @@ root.style.setProperty("--xfcxbgc", "#c0d5f8"); root.style.setProperty("--elinputdisabled", "transparent"); root.style.setProperty("--btnbgc", "rgba(0, 0, 0, 0.171)"); + root.style.setProperty("--lishisousuohead", "#CEE0FF"); + root.style.setProperty("--lishisousuobeibu", "#C0D5F8"); + root.style.setProperty("--xinxititle", "#065CFE"); this.flag = false; // ---------------------分界线----------------------------------// @@ -449,6 +460,9 @@ root.style.setProperty("--xfcxbgc", "#050c16"); root.style.setProperty("--elinputdisabled", "rgb(133, 131, 131)"); root.style.setProperty("--btnbgc", "rgba(253, 253, 253, 0.071)"); + root.style.setProperty("--lishisousuohead", "#152636"); + root.style.setProperty("--lishisousuobeibu", "#0b141d"); + root.style.setProperty("--xinxititle", "#fff"); this.flag = true; } diff --git a/src/components/site/previewOfSiteStatus.vue b/src/components/site/previewOfSiteStatus.vue index b042eeb..573c233 100644 --- a/src/components/site/previewOfSiteStatus.vue +++ b/src/components/site/previewOfSiteStatus.vue @@ -9,7 +9,72 @@ @click="fwClick" /> - + @@ -523,6 +599,9 @@ }, data: function() { return { + featureData: {}, + resPData: [], + featurePopVis: false, TimeBoxValue: [ this.moment() .subtract("days", 3) @@ -600,6 +679,7 @@ currentZoom: 5, switchStatusData: this.flag, // 重新定义数据 timer: {}, //定时器 + timer2: {}, // 顶部中间汇总A TopData1: "1866", TopData2: "933", @@ -659,13 +739,15 @@ // 项目设备总览A myChart: {}, XianYou: "", //现有设备总数 - DaJian: "", //搭建设备总数 + // DaJian: "", //搭建设备总数 // 项目设备总览B // 项目设备环比增长A myChart2: {}, // 项目设备环比增长B // 站点实时报警A WaringList: [], + areaList: [], // 项目设备省份地区统计 + NoBaoJingData: true, //有无报警数据，有就为false // 站点实时报警B map: "", @@ -677,15 +759,6 @@ }; }, methods: { - //根据行政区域编号去请求json转化为Feature再去定位 - async gotoAreaBycode(CODE) { - let response = await fetch( - "https://geo.datav.aliyun.com/areas/bound/geojson" + "?code=" + CODE - ); - - let data = await response.json(); - console.log(data); - }, //计算中心点 getCenterFromArray(clusterData) { var north = -90; @@ -735,7 +808,7 @@ } }) .then(response => { - console.log(response); + // console.log(response); if (response.data.code === 1) { this.showCluster(response.data.data); } @@ -743,7 +816,7 @@ }, //点击历史数据 historyData(stCode) { - console.log(stCode); + // console.log(stCode); this.currentSiteNo = stCode; this.dialogVisible = true; setTimeout(() => { @@ -766,9 +839,8 @@ // console.log(response); if (response.status === 200) { var qwe = response.data.data === "" ? [] : response.data.data; - + this.ProjectList = this.ProjectList.concat(qwe); - } else { message(response); } @@ -866,20 +938,15 @@ // 加载 项目设备总览 loadQuyuShebei() { this.$http - .post(this.nozzle.platEquipmentGetEquipStatistics, { + .post(this.nozzle.getEquipStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts( - response.data.data.title, - response.data.data.exiting, - response.data.data.tobebuilt - ); - this.XianYou = response.data.data.exitingsum; - this.DaJian = response.data.data.tobebuiltsum; + if (response.status === 200) { + this.XianYou = response.data.data.total; + this.loadRegionEcharts(response.data.data.data); } else { message(response); } @@ -888,23 +955,18 @@ message(response); }); }, - // 加载 项目设备环比增长 + // 加载 项目设备省份地区统计 loadQuYuSheBeiHuanBi() { this.$http - .post(this.nozzle.sysPlatformGetSiteStateStatistics, { + .post(this.nozzle.getAreaStatistics, { data: { - platform: this.ChecksplatformCode + platformCode: this.ChecksplatformCode } }) .then(response => { - if (response.data.code === 200) { - this.loadRegionEcharts2( - response.data.data.xdata, - response.data.data.offline, - response.data.data.warn, - response.data.data.malfunction, - response.data.data.alarm - ); + if (response.data.code === 1) { + // console.log(response); + this.areaList = response.data.data; } else { message(response); } @@ -946,19 +1008,21 @@ // 点击项目ZZJ ListClick(index) { this.ChecksplatformCode = this.ProjectList[index]["groupNo"]; - - //刷新联动地图上的点位按照项目实际的个数 - console.log(this.ChecksplatformCode) - this.initPointToMap(this.ChecksplatformCode) - if(this.ProjectList[index]["areaCode"]&&this.ProjectList[index]["groupNo"]!="") - this.gotoProgramArea(this.ProjectList[index]["areaCode"]) - else - { - this.fwClick() - if (this.vectorSourceArea) { - this.vectorSourceArea.clear(); + + //刷新联动地图上的点位按照项目实际的个数 + // console.log(this.ChecksplatformCode); + this.initPointToMap(this.ChecksplatformCode); + if ( + this.ProjectList[index]["areaCode"] && + this.ProjectList[index]["groupNo"] != "" + ) + this.gotoProgramArea(this.ProjectList[index]["areaCode"]); + else { + this.fwClick(); + if (this.vectorSourceArea) { + this.vectorSourceArea.clear(); + } } - } // 限制数组的长度不超过10个 // console.log(this.historyList.length); @@ -1006,16 +1070,15 @@ if (item1["groupName"] == item) { this.ChecksplatformCode = item1["groupNo"]; //地图联动响应的项目 - this.initPointToMap(this.ChecksplatformCode) - if(item1["areaCode"]&&item1["groupNo"]!="") - this.gotoProgramArea(item1["areaCode"]) - else - { - this.fwClick() - if (this.vectorSourceArea) { - this.vectorSourceArea.clear(); - } - } + this.initPointToMap(this.ChecksplatformCode); + if (item1["areaCode"] && item1["groupNo"] != "") + this.gotoProgramArea(item1["areaCode"]); + else { + this.fwClick(); + if (this.vectorSourceArea) { + this.vectorSourceArea.clear(); + } + } // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); // 根据平台渲染项目设备总览 @@ -1061,186 +1124,53 @@ return row; }, // 加载项目设备总览的ecahrts - loadRegionEcharts(SheBeiLeiXing, XianYouData, DaJianData) { + loadRegionEcharts(data) { + // console.log(data); // 基于准备好的dom，初始化echarts实例 this.myChart = this.$echarts.init( document.getElementById("previewOfSiteStatusCentent4eCharts") ); // 绘制图表 + this.myChart.clear(); - this.myChart.setOption({ - color: ["red"], + let option = { tooltip: { - trigger: "axis" + trigger: "item" }, - legend: { - x: "center", - data: ["现有设备", "搭建设备"], - show: false - }, - radar: [ + series: [ { - indicator: SheBeiLeiXing, - radius: 70, - shape: "circle", - name: { - formatter: "{value}", - textStyle: { - color: "red" + name: "类型", + type: "pie", + radius: "50%", + data: data, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: "rgba(0, 0, 0, 0.5)" } } } - ], - series: [ - { - type: "radar", - itemStyle: { normal: { areaStyle: { type: "default" } } }, - tooltip: { - trigger: "item" - }, - data: [ - { - name: "现有设备", - value: XianYouData, - areaStyle: { - normal: { - color: "rgb(255, 217, 0)" - } - }, - itemStyle: { - normal: { - color: "rgb(255, 217, 0)", - lineStyle: { - color: "rgb(255, 217, 0)" - }, - areaStyle: { - type: "default" - } - } - } - }, - { - name: "搭建设备", - value: DaJianData, - areaStyle: { - normal: { - color: "rgb(0, 119, 254)" // 选择项目颜色 - } - }, - itemStyle: { - normal: { - color: "rgb(0, 119, 254)", - lineStyle: { - color: "rgb(0, 119, 254)" - }, - areaStyle: { - type: "default" - } - } - } - } - ] - } ] - }); + }; + this.myChart.setOption(option); }, - // 加载项目设备环比增长的ecahrts - loadRegionEcharts2(XData, V1, V2, V3, V4) { - // 基于准备好的dom，初始化echarts实例 - this.myChart2 = this.$echarts.init( - document.getElementById("previewOfSiteStatusCentent5") - ); // 绘制图表 - this.myChart2.clear(); - this.myChart2.setOption({ - color: [ - "rgb(140,143,146)", - "rgb(255,214,0)", - "rgb(229,132,12)", - "rgb(211,22,22)" - ], - tooltip: { - trigger: "axis" - }, - legend: { - data: ["离线数量", "预警数量", "故障数量", "报警数量"], - textStyle: { - //图例文字的样式 - color: "rgb(0, 119, 254)", - fontSize: 12 - } - }, - grid: { - left: "3%", - right: "6%", - bottom: "3%", - containLabel: true - }, - xAxis: { - type: "category", - boundaryGap: false, - data: XData, - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - yAxis: { - type: "value", - axisLabel: { - formatter: "{value}", - textStyle: { - //改变刻度字体样式 - color: "rgb(0, 119, 254)" - }, - fontSize: 12 //字体大小 - }, - splitLine: { - show: false - } - }, - series: [ - { - name: "离线数量", - type: "line", - data: V1, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "预警数量", - type: "line", - data: V2, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "故障数量", - type: "line", - data: V3, - smooth: true, - symbol: "none" //取消折点圆圈 - }, - { - name: "报警数量", - type: "line", - data: V4, - smooth: true, - symbol: "none" //取消折点圆圈 - } - ] - }); - }, + // 预警报警信息滚动 ScrollUp() { var box = document.getElementById("previewOfSiteStatusCentent6"); var con1 = document.getElementById("GisRightCententBox2UL"); + + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { + box.scrollTop = 0; + } else { + box.scrollTop++; + } + }, + ScrollUp2() { + var box = document.getElementById("previewOfSiteStatusCentent5"); + var con1 = document.getElementById("RightCententBox"); + if (box.scrollTop >= con1.scrollHeight - box.offsetHeight) { box.scrollTop = 0; } else { @@ -1254,11 +1184,21 @@ this.$refs.tooltip[index].handleShowPopper(); } }, + mouseOver2(index) { + if (this.timer2) { + clearInterval(this.timer2); + this.$refs.tooltip2[index].handleShowPopper(); + } + }, //鼠标移出事件 mouseLeave(index) { this.$refs.tooltip[index].handleClosePopper(); this.timer = setInterval(this.ScrollUp, 100); }, + mouseLeave2(index) { + this.$refs.tooltip2[index].handleClosePopper(); + this.timer2 = setInterval(this.ScrollUp2, 100); + }, //按照项目选择去联动地图 initPointToMap1(projectNo) { let _this = this; @@ -1326,7 +1266,7 @@ } }) .then(response => { - console.log(response); + // console.log(response); if (response.data.code === 1) { let picBaseUrl = "https://static.arcgis.com/images/Symbols/Shapes/"; @@ -1561,106 +1501,106 @@ // console.error(err); }); }, - async gotoProgramArea(areaCode) { + gotoProgramArea(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } - let response = await fetch( - "http://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" + /* let response = await fetch( + "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); - let dataJson = await response.json(); - /* this.$http - .get(this.nozzle.queueadmin+"/"+areaCode+".json") + let dataJson = await response.json(); */ + this.$http + .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { - console.log(response) + // console.log(response); let dataJson = response.data.features[0]; - console.log(dataJson) */ + // console.log(dataJson); - let areaFeature = new GeoJSON().readFeatures(dataJson); + let areaFeature = new GeoJSON().readFeatures(dataJson); - this.vectorSourceArea = new SourceVector({ - features: areaFeature - }); - - var vectorArea = new LayerVector({ - renderMode: "image", - maxResolution: 2, - zIndex: 2, - source: this.vectorSourceArea, - style: feature => { - return new Style({ - stroke: new Stroke({ - color: "#8A2BE2", - lineCap: "butt", - width: 3 - }) + this.vectorSourceArea = new SourceVector({ + features: areaFeature }); - } - }); - this.map.addLayer(vectorArea); - //定位过去 - //开始根据routeFeature定位 - /* console.log(areaFeature[0].getGeometry().getExtent()) + this.vectorArea = new LayerVector({ + renderMode: "image", + maxResolution: 2, + zIndex: 2, + source: this.vectorSourceArea, + style: feature => { + return new Style({ + stroke: new Stroke({ + color: "#8A2BE2", + lineCap: "butt", + width: 3 + }) + }); + } + }); + this.map.addLayer(this.vectorArea); + + //定位过去 + //开始根据routeFeature定位 + /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ - var extent = areaFeature[0].getGeometry().getExtent(); - this.map.getView().fit(extent, this.map.getSize()); - /* }) */ + var extent = areaFeature[0].getGeometry().getExtent(); + this.map.getView().fit(extent, this.map.getSize()); + }); }, - - gotoProgramArea1(areaCode) { + + gotoProgramArea1(areaCode) { //初始化项目行政区域边框 // Create layer if (this.vectorSourceArea) { this.vectorSourceArea.clear(); } - /* let response = await fetch( - "http://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" + /* let response = await fetch( + "https://geo.datav.aliyun.com/areas_v2/bound/" + areaCode + ".json" ); let dataJson = await response.json(); */ - this.$http - .get(this.nozzle.queueadmin+"/"+areaCode+".json") + this.$http + .get(this.nozzle.queueadmin + "/" + areaCode + ".json") .then(response => { - console.log(response) + console.log(response); let dataJson = response.data.features[0]; - console.log(dataJson) + console.log(dataJson); - let areaFeature = new GeoJSON().readFeatures(dataJson); + let areaFeature = new GeoJSON().readFeatures(dataJson); - this.vectorSourceArea = new SourceVector({ - features: areaFeature - }); - - var vectorArea = new LayerVector({ - renderMode: "image", - maxResolution: 2, - zIndex: 2, - source: this.vectorSourceArea, - style: feature => { - return new Style({ - stroke: new Stroke({ - color: "#8A2BE2", - lineCap: "butt", - width: 3 - }) + this.vectorSourceArea = new SourceVector({ + features: areaFeature }); - } - }); - this.map.addLayer(vectorArea); - //定位过去 - //开始根据routeFeature定位 - /* console.log(areaFeature[0].getGeometry().getExtent()) + this.vectorArea = new LayerVector({ + renderMode: "image", + maxResolution: 2, + zIndex: 2, + source: this.vectorSourceArea, + style: feature => { + return new Style({ + stroke: new Stroke({ + color: "#8A2BE2", + lineCap: "butt", + width: 3 + }) + }); + } + }); + this.map.addLayer(this.vectorArea); + + //定位过去 + //开始根据routeFeature定位 + /* console.log(areaFeature[0].getGeometry().getExtent()) console.log(areaFeature[0].geometryChangeKey_.target.extent_) */ - var extent = areaFeature[0].getGeometry().getExtent(); - this.map.getView().fit(extent, this.map.getSize()); - }) + var extent = areaFeature[0].getGeometry().getExtent(); + this.map.getView().fit(extent, this.map.getSize()); + }); }, //显示cluster聚簇界面 showCluster(clusterData) { @@ -1705,6 +1645,7 @@ feature.lat = cell.lat; feature.stName = cell.stName; feature.stCode = cell.stCode; + feature.tt = cell.tt; //加入ol.feautre几何属性 feature.wkt = resultwkt; //无聚簇类型图层也添加一遍 @@ -1788,10 +1729,8 @@ //飞行到指定的城市项目中心点 // this.flyToCity() //?要判断currentZoom加哪一个 - if (this.currentZoom >= 8) this.map.addLayer(this.vector); - else this.map.addLayer(this.layer); - - + if (this.currentZoom >= 8) this.map.addLayer(this.vector); + else this.map.addLayer(this.layer); }, getStyleOfCar(feature) { @@ -1874,18 +1813,18 @@ // this.map.addLayer(this.vector); - this.$http - .post(this.nozzle.listStationBase, { - data: { - /* platformCode:projectNo */ - } - }) - .then(response => { - console.log(response) - if (response.data.code === 1) { - this.showCluster(response.data.data); - } - }) + this.$http + .post(this.nozzle.listStationBase, { + data: { + /* platformCode:projectNo */ + } + }) + .then(response => { + // console.log(response); + if (response.data.code === 1) { + this.showCluster(response.data.data); + } + }); //鼠标监听 //鼠标点击事件 @@ -1945,9 +1884,17 @@ /* if(this.map.getView().getZoom()>10) */ this.map.removeLayer(this.layer); this.map.addLayer(this.vector); + //添加行政边框 + if (this.vectorArea) { + this.vectorArea.setVisible(true); + } } else if (zoom < 8 && this.currentZoom >= 8) { this.map.removeLayer(this.vector); this.map.addLayer(this.layer); + //清除行政边框 + if (this.vectorArea) { + this.vectorArea.setVisible(false); + } } else { } this.currentZoom = zoom; @@ -1956,6 +1903,7 @@ closepopup() { if (this.menu_overlay && this.menu_overlay != "") this.menu_overlay.setPosition(undefined); + this.featurePopVis = false; }, //openlayer属性框 showOlPanel(feature) { @@ -1968,27 +1916,25 @@ .then(resP => { console.log(resP); //开始展示属性字段 - let textContent = ""; + /* let textContent = ""; let closeDOM = - "X"; + "
X"; textContent = - "
" + + "
" + "详细信息" + - "
X
"; - textContent += - "
"; + "

"; + textContent += "
"; - //添加html拼接---缩放至 textContent += - `
` + "历史数据" + - "
"; + "
"; textContent += - '
' + + '
' + '
' + "名称" + "
" + @@ -1997,6 +1943,16 @@ "
" + "
"; + textContent += + '
' + + '
' + + "观测时间" + + "
" + + '
' + + feature.tt + + "
" + + "
"; + let data = {}; let currentData = resP.data.data; for (let kx = 0; kx < currentData.length; kx++) { @@ -2007,7 +1963,7 @@ textContent += '
'; for (let key in data) { textContent += - '
' + + '
' + '
' + key + "
" + @@ -2016,14 +1972,18 @@ "
" + "
"; } - textContent += "
"; + textContent += "
"; textContent = closeDOM + textContent; textContent += "
"; - //提取公共方法，放缩地图、显示属性等 - document.getElementById("popup").innerHTML = textContent; + */ + /* document.getElementById("popup").innerHTML = textContent; */ + + this.featureData = feature; + this.resPData = resP.data.data; + this.featurePopVis = true; this.menu_overlay.setPosition([feature.lon, feature.lat]); @@ -2770,10 +2730,10 @@ return this.flag; // 直接监听props里的status状态 } }, - created() { + /* created() { window.closepopup = this.closepopup; window.historyData = this.historyData; - }, + }, */ mounted: function() { // 根据平台渲染站点数量统计及状态统计 this.loadSiteNumForOroject(); @@ -2781,7 +2741,7 @@ this.loadQuyuShebei(); // 根据平台渲染项目设备环比增长 this.loadQuYuSheBeiHuanBi(); - // 根据平台渲染站点实时报警信息 + // // 根据平台渲染站点实时报警信息 this.loadSiteBaoJing(); // 返回出项目的坐标以及缩放等级**************************GIS调用 @@ -2796,12 +2756,14 @@ this.$nextTick(function() { this.timer = setInterval(this.ScrollUp, 100); + this.timer2 = setInterval(this.ScrollUp2, 100); }); // 默认从本地session srotage里面读取历史搜索记录ZZJ this.getItem(); }, destroyed: function() { clearInterval(this.timer); + clearInterval(this.timer2); } }; @@ -2825,6 +2787,7 @@ width: 460px; z-index: 99999; position: relative; + border: 2px solid cornflowerblue; } .earthmap { width: 100%; @@ -2853,7 +2816,7 @@ } .triangle { - bottom: 101px; + bottom: 50%; left: -4px; border-top: 10px solid transparent; @@ -2866,6 +2829,18 @@ border-right: 20px solid transparent; border-left: 20px solid transparent; } +/* .popuphead { + background-color: rgb(206,224,255);border-bottom: 1px solid;border-bottom-color: gray; +} +.popupheada { + color:cornflowerblue ;position: absolute;top: 2px;right: 8px;cursor: pointer; +} +.xxxx { + color: cornflowerblue !important;font-size: 17px;font-weight: bold;margin-left: 9px; +} +.lssj { + color: cornflowerblue;position:absolute;font-size:15px;line-height:33px;margin-left: 22px;margin-top: -38px;width:69px;cursor: pointer;text-decoration:underline +} */ #previewOfSiteStatusLeftTop { /* position: absolute; */ /* left: 0; */ @@ -3226,7 +3201,7 @@ width: 100%; height: 24px; line-height: 24px; - color: rgb(255, 217, 0); + color: var(--yellow) !important; } .previewOfSiteStatusCentent4Font1P2 { float: left; @@ -3272,6 +3247,7 @@ #previewOfSiteStatusCentent5 { width: 100%; height: 100%; + overflow: auto; } /* 项目设备环比增长B */ /* 站点实时报警A */ @@ -3281,7 +3257,8 @@ /* background: rgba(7, 13, 19, 0.38); */ overflow: auto; } -#GisRightCententBox2UL { +#GisRightCententBox2UL, +#RightCententBox { width: 100%; height: auto; } @@ -3309,6 +3286,19 @@ font-size: 14px; color: var(--white); } + +.areaListNo { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} +.areaListName { + width: 50%; + float: left; + font-size: 14px; + color: var(--white); +} .GIsRightWaringListType { width: 15%; float: left; @@ -3416,4 +3406,42 @@ top: 0; left: 420px; } +.xiangxixinxi { + color: var(--xinxititle) !important; + font-size: 17px; + font-weight: bold; + margin-left: 9px; +} +.lishishuju { + color: cornflowerblue; + position: absolute; + font-size: 15px; + line-height: 33px; + margin-left: 22px; + margin-top: -32px; + width: 69px; + cursor: pointer; + text-decoration: underline; +} +.lishisousuohead { + background-color: var(--lishisousuohead) !important; + border-bottom: 1px solid; + border-bottom-color: var(--lishisousuohead) !important; +} +.lishisousuobeibu { + background-color: var(--lishisousuobeibu) !important; +} +.mingcheng { + font-size: 14px; + line-height: 33px; + margin-left: 22px; + margin-top: 5px; + position: absolute; +} +.beibucolor { + width: 260px; + height: 33px; + color: var(--white) !important; + line-height: 33px; +} diff --git a/src/main.js b/src/main.js index 2e3c8fa..57f0931 100644 --- a/src/main.js +++ b/src/main.js @@ -9,9 +9,9 @@ import "@/assets/css/index.css"; import "@/assets/css/skincolor.scss"; -import Avue from '@smallwei/avue'; +import Avue from "@smallwei/avue"; // import '@smallwei/avue/lib/theme-chalk/index.css'; -import '@smallwei/avue/lib/index.css'; +import "@smallwei/avue/lib/index.css"; Vue.use(Avue); Vue.config.productionTip = false; @@ -19,6 +19,7 @@ let echarts = require("echarts/lib/echarts"); // 引入折线图/柱状图等组件 require("echarts/lib/chart/line"); +require("echarts/lib/chart/pie"); require("echarts/lib/chart/radar"); // 引入提示框和title组件，图例 require("echarts/lib/component/title"); @@ -37,7 +38,7 @@ import "./assets/css/common.css"; import "./util/interface"; import "../static/font/font.css"; -import './assets/iconfont/iconfont.css'; +import "./assets/iconfont/iconfont.css"; import nozzle from "./util/interface"; Vue.prototype.nozzle = nozzle; @@ -51,7 +52,7 @@ import initRules from "@/util/initRules"; // `初始化验证规则 import validate from "@/util/validate"; // 公共验证方法 // 当前系统模式 -import config from './config' +import config from "./config"; Vue.prototype.$config = config; // 设置为false 以阻止 VUE 在启动时生成生产提示 diff --git a/src/util/projectSet.js b/src/util/projectSet.js index a6dd7e9..9c61625 100644 --- a/src/util/projectSet.js +++ b/src/util/projectSet.js @@ -6,6 +6,9 @@ let host = "/projectApi"; let nozzle = { + getEquipStatistics: "/sys/equipinfo/getEquipStatistics", //项目设备总览 + getAreaStatistics: "/sys/stationbase/getAreaStatistics", //项目设备省份地区统计 + statement: "/statistical/statement", //数据分析//数据总览 service: "/statistical/service", //数据分析//数据总览 Conn: "/statistical/Conn", //数据分析/统计报表 @@ -41,7 +44,7 @@ listStationBase: "/sys/stationbase/listStationBase", //所有站点 getTempData: "/sys/stationbase/getTempData", //单个站点 - sysPlatformGetAllSiteCount: "/sys/sysplatform/getAllSiteCount", //站点状况预览图-----获取所有平台站点数目统计 + sysPlatformGetAllSiteCount: "/sys/sysplatform/getAllSiteCount" //站点状况预览图-----获取所有平台站点数目统计 }; for (let item in nozzle) { diff --git a/static/img/fw_btn.png b/static/img/fw_btn.png index 1e34e10..5718d12 100644 --- a/static/img/fw_btn.png +++ b/static/img/fw_btn.png Binary files differ