diff --git a/.env.development b/.env.development index b3e49ab5f..2ad1156bb 100644 --- a/.env.development +++ b/.env.development @@ -1,6 +1,6 @@ NODE_ENV=development -# VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api -VUE_APP_API_SERVER = http://192.168.1.140/api +VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api +# VUE_APP_API_SERVER = http://192.168.1.140/api # VUE_APP_API_SERVER = http://192.168.51.36:8080/api # VUE_APP_API_SERVER = https://epmet-dev.elinkservice.cn/api VUE_APP_NODE_ENV=dev diff --git a/.env.production.sit b/.env.production.sit index b0c600ea6..de86de77c 100644 --- a/.env.production.sit +++ b/.env.production.sit @@ -1,5 +1,5 @@ NODE_ENV=production -# VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api -VUE_APP_API_SERVER = http://192.168.1.140/api +VUE_APP_API_SERVER = https://epmet-test.elinkservice.cn/api +# VUE_APP_API_SERVER = http://192.168.1.140/api VUE_APP_NODE_ENV=prod:sit VUE_APP_PUBLIC_PATH=epmet-oper \ No newline at end of file diff --git a/public/index.html b/public/index.html index be512c579..ef957a4cf 100644 --- a/public/index.html +++ b/public/index.html @@ -36,9 +36,9 @@ <% if (process.env.VUE_APP_NODE_ENV==='dev' ) { %> <% } %> diff --git a/src/assets/img/shuju/weiwanjie.png b/src/assets/img/shuju/weiwanjie.png new file mode 100644 index 000000000..582766fbf Binary files /dev/null and b/src/assets/img/shuju/weiwanjie.png differ diff --git a/src/assets/img/shuju/yiwanjie.png b/src/assets/img/shuju/yiwanjie.png new file mode 100644 index 000000000..fe6cafec3 Binary files /dev/null and b/src/assets/img/shuju/yiwanjie.png differ diff --git a/src/assets/scss/modules/visual/processAnalyze.scss b/src/assets/scss/modules/visual/processAnalyze.scss index cb6eb627f..82b0e3119 100644 --- a/src/assets/scss/modules/visual/processAnalyze.scss +++ b/src/assets/scss/modules/visual/processAnalyze.scss @@ -63,7 +63,7 @@ .g-cpt-resi { display: flex; flex-direction: row; - height: calc(100vh - 170px); + height: calc(100vh - 180px); .g-l { flex-shrink: 0; @@ -87,8 +87,8 @@ .g-r { text-align: center; - margin: 20px 19px 20px; - width: calc(100vw - 40px - 800px); + margin: 20px 10px 20px; + width: calc(100vw - 700px); height: calc(100vh - 180px - 20px); } } @@ -172,10 +172,67 @@ } .g-r { - .m-map { + .r-map { position: relative; - height: 100%; + height: calc(100vh - 180px - 20px - 70px); width: 100%; + + .map { + height: 100%; + width: 100%; + } + + .r-status { + position: absolute; + bottom: 0; + right: 0; + display: flex; + + .status { + height: 30px; + width: 70px; + line-height: 30px; + font-size: 12px; + font-family: PingFang SC; + font-weight: 400; + color: #d2e7ff; + background-color: #1146c2; + } + + .status-closed { + border-radius: 5px 0 0 0; + } + + .status-pending { + } + .sel-status { + background-color: #082586; + } + } + } + + .r-legend { + display: flex; + justify-content: center; + margin-top: 14px; + align-items: center; + + > img { + margin-left: 58px; + height: 35px; + width: 40px; + } + + > span { + margin-left: 3px; + font-size: 16px; + font-family: PingFang SC; + font-weight: 400; + color: #d2e7ff; + } + } + .r-legend:hover { + cursor: pointer; } } diff --git a/src/assets/scss/modules/visual/typeAnalyze.scss b/src/assets/scss/modules/visual/typeAnalyze.scss new file mode 100644 index 000000000..a5c3918e1 --- /dev/null +++ b/src/assets/scss/modules/visual/typeAnalyze.scss @@ -0,0 +1,135 @@ +@import '../../c/config'; +@import '../../c/function'; +@import './c/common'; + +.title { + padding: 10px; + font-size: 22px; + font-family: PingFang SC; + font-weight: 800; + color: #ffffff; + display: flex; + align-items: center; + position: relative; + + img { + display: block; + margin-right: 5px; + } + span { + display: block; + } + + .second-select { + margin: 0 10px 0 40px; + + ::v-deep .el-input { + width: 140px; + height: 36px; + .el-input__inner { + height: 100%; + padding: 0 10px; + color: #fff; + line-height: 36px; + background: #06186d; + border: 1px solid #1a64cc; + } + .el-icon-arrow-up:before { + content: '\e78f'; + } + } + ::v-deep .el-date-editor { + .el-input__prefix { + left: unset; + right: 5px; + } + } + } + + .cascader { + ::v-deep .el-input { + width: 220px; + } + } + .status-select { + position: absolute; + top: 20px; + right: 10px; + } + .second-select:last-child { + margin-left: 0; + } +} + +.g-cpt-resi { + display: flex; + flex-direction: row; + // flex-wrap: wrap; + // justify-content: center; + height: calc(100vh - 130px); + + .g-l { + flex-shrink: 0; + width: 600px; + height: calc(100vh - 190px); + } + + .g-r { + text-align: center; + margin: 40px 19px 20px; + width: calc(100vw - 60px - 600px); + height: calc(100vh - 140px - 20px); + } +} + +.g-r { + .tb { + position: relative; + height: calc(100vh - 220px); + overflow-y: auto; + @include scrollBar; + + .m-pagination { + position: absolute; + box-sizing: border-box; + right: 0; + bottom: 0; + + width: 100%; + height: 40px; + display: flex; + justify-content: flex-end; + + /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { + background: #0266d1; + color: #000d3f; + } + + /deep/ .el-pagination .el-pager li { + background: #002e74; + } + + /deep/ .el-pagination .btn-prev { + background: #002e74; + } + + /deep/ .el-pagination .btn-next { + background: #002e74; + } + } + } +} + +.echart-wr { + margin-left: 30px; + // margin-top: 100px; + text-align: center; + position: relative; + width: 500px; + height: 100%; + box-sizing: border-box; + .echart-org { + width: 100%; + height: 90%; + } +} diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue index beae8fdc8..88fe8925d 100644 --- a/src/views/modules/visual/communityGovern/processAnalyze.vue +++ b/src/views/modules/visual/communityGovern/processAnalyze.vue @@ -54,11 +54,29 @@
+
+ +
+
已完结
+
未完结
+
+
+ + + 已完结 + + 未完结 +
- - +
@@ -66,6 +84,7 @@ + + diff --git a/src/views/modules/visual/communityGovern/typePieOption.js b/src/views/modules/visual/communityGovern/typePieOption.js new file mode 100644 index 000000000..64b6ad984 --- /dev/null +++ b/src/views/modules/visual/communityGovern/typePieOption.js @@ -0,0 +1,179 @@ + +export function pieOption (_charts) { +const center= ['50%', '250px'] + return { + title: { + text: '0', + top: 220, + left: 'center', + textStyle: { + width: '100%', + fontSize: 32, + color: '#FFFFFF', + fontWeight: 400 + }, + itemGap: 5, + subtext: '总数', + subtextStyle: { + fontSize: 20, + color: '#fff', + fontWeight: 400 + } + }, + tooltip: { + show: false + }, + legend: { + top: 500, + bottom: 0, + itemWidth: 20, + itemHeight: 10, + textStyle: { + color: '#D2E7FF', + fontSize: 16, + lineHeight: 20, + }, + + }, + series: [ + // 外侧圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 0, + hoverAnimation: false, + // tooltip: { + // }, + center: center, + radius: ['55%', '55.3%'], + label: { + show: false + }, + labelLine: { + show: false + }, + data: [{ + value: 360, + itemStyle: { + color: 'rgba(40, 101, 250, 0)', + width:0, + borderColor: 'rgba(40, 101, 250, 0.5)', + borderWidth: 1, + borderType: 'dotted' + } + } + ] + }, + + // 突出的 + { + hoverAnimation: false, + // name: 'Access From', + type: 'pie', + center: center, + radius: ['40%', '60%'], + avoidLabelOverlap: false, + // top: top + '%', + // height: '80%', + selectedMode: 'single', + left: 'center', + width: 400, + label: { + // show: false, + position: 'outside', + alignTo: 'edge', + // formatter: '{a|{c}}\n\n{name|{b}}', + formatter: '{a|{c}}\n{r|}\n{name|{b}}', + minMargin: 5, + edgeDistance: 1, + lineHeight: 15, + color: '#fff', + fontSize: 12, + // distanceToLabelLine: -60, + rich: { + name: { + padding: [0, 6, 0, 6] + }, + a: { + fontSize: 30, + color: '#fff', + padding: [0, 6, 6, 6] + }, + r: { + backgroundColor: 'auto', + borderRadius: 6, + width: 6, + height: 6, + // padding: [3, 3, 0, -12] + } + } + }, + labelLine: { + show: false, + smooth: 0.2, + length: 30, + length2: 0, + maxSurfaceAngle: 80 + }, + labelLayout: function (params) { + + const isLeft = params.labelRect.x < _charts.getWidth() / 2; + const points = params.labelLinePoints; + // Update the end point. + if (points) { + points[2][0] = isLeft + ? params.labelRect.x + : params.labelRect.x + params.labelRect.width; + } + + return { + labelLinePoints: points + }; + }, + itemStyle: { + // color:function(params) { + // //自定义颜色 + // var colorList = [ + // '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463', + // ]; + // return colorList[params.dataIndex] + // } + }, + data: [], + + }, + // 中间圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 0, + hoverAnimation: false, + center: center, + // tooltip: { + // }, + radius: ['0%', '25%'], + label: { + + show: false + + }, + labelLine: { + + show: false + + }, + data: [{ + value: 360, + itemStyle: { + normal: { + color: 'rgba(8, 37, 134, 1)', + + } + } + } + ] + }, + ] + + } +} diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue index 541bd3762..dc0252add 100644 --- a/src/views/modules/visual/components/screen-map/index.vue +++ b/src/views/modules/visual/components/screen-map/index.vue @@ -23,6 +23,7 @@ import Overlay from 'ol/Overlay'; import { defaults as defaultInteractions, Select, DoubleClickZoom } from 'ol/interaction.js'; import { getCenter, boundingExtent } from 'ol/extent.js'; import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js'; +import { altKeyOnly, click, pointerMove } from 'ol/events/condition'; import { mapGetters } from "vuex"; import { Loading } from 'element-ui'; //引入Loading服务 @@ -50,37 +51,13 @@ let select;//选中标注 //url图标 -let textColorArray = [ - 'rgba(236, 69, 4, 0.66)', - 'rgba(0, 146, 238, 0.75)', - 'rgba(238, 151, 0, 0.8)' -]; + let polygonColorArray = [ 'rgba(210, 2, 2, 0.24)', 'rgba(43, 231, 253, 0.25)', 'rgba(183, 185, 0, 0.16)' ]; -//变电站标注的文字样式 -var createTextStyle = function (feature) { - return new Text({ - textAlign: undefined, - font: "18px Arial", - //fontFamily: "Courier New, monospace", - // fontWeight: "bold", - text: feature.values_.name, - backgroundFill: new Fill({ - // color: 'rgba(0, 146, 238, 0.75)' - color: textColorArray[feature.values_.index - 1] - }), - padding: [4, 10, 4, 10], - //text: "变电站名称", - fill: new Fill({ color: "#ffffff" }), - // stroke: new Stroke({ color: "#ffffff", width: 3 }), - offsetY: -30, - offsetX: -50, - overflow: true, - }); -}; + //变电站标注样式 @@ -146,6 +123,7 @@ const vueGis = { iconArrays: [ ], + iconTextStyle: {}, //policon图标样式 polIconUrlArray: [ @@ -155,6 +133,7 @@ const vueGis = { ], //icon图标样式 iconUrlArray: [], + iconTextColor: '#ffffff', } }, @@ -164,12 +143,13 @@ const vueGis = { }, methods: { //加载地图 - loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray) { + loadMap (mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray, iconTextStyle) { this.mapInfo = mapInfo this.polygonArray = polygonArray this.polIconUrlArray = polIconUrlArray this.iconArrays = iconArrays this.iconUrlArray = iconUrlArray + this.iconTextStyle = iconTextStyle //初始化地图 this.initMap() @@ -185,31 +165,37 @@ const vueGis = { //初始化多边形标注图层 this.initPolygonLayer() //加载当前园区的标注 - this.loadPolygon() + this.loadPolIcon() } if (this.showIconLayer) { //初始化icon图层 this.initIconLayer() + this.loadIcon() } }, //刷新地图 - async refreshMap (isRefreshView) { + async refreshMap (polygonArray, iconArrays) { + this.polygonArray = polygonArray + this.iconArrays = iconArrays - //加载组织数据 - await this.loadOrgData() + if (this.showPolygonLayer) { - //加载当前园区的标注 - await this.loadPolygon() + //加载当前园区的标注 + this.loadPolygon() + } + if (this.showPolIconLayer) { + + //加载当前园区的标注 + this.loadPolIcon() + } + + if (this.showIconLayer) { - //重置地图中心点 - if (isRefreshView) { - this.setMapLocation() - mapView.setCenter(this.centerPoint); - mapView.setZoom(this.zoom); + this.loadIcon() } @@ -323,15 +309,15 @@ const vueGis = { if (this.iconArrays && this.iconArrays.length > 0) { let iconFeatures = []; - this.iconArrays.forEach(oneIcon => { - + this.iconArrays.forEach((oneIcon, index) => { + let urlNum = this.getRndBetween(1, 3) //添加标注 let iconItem = new Feature({ geometry: new Point([oneIcon.longitude, oneIcon.latitude]), id: oneIcon.id, properties: { type: "icon", - info: { ...oneIcon.info } + info: { ...oneIcon } } }); @@ -339,9 +325,10 @@ const vueGis = { image: new Icon({ // anchor: [0.5, 0.5], // imgSize: [32, 32], - scale: 0.5, - src: iconUrlArray[oneIcon.values_.index - 1] - }) + // scale: 0.5, + src: this.iconUrlArray[oneIcon.urlIndex] + }), + text: this.createTextStyle(oneIcon) }); iconItem.setStyle(iconStyle); @@ -353,6 +340,15 @@ const vueGis = { } }, + //icon文字样式 + createTextStyle (feature) { + + let iconTextStyle = { ...this.iconTextStyle } + iconTextStyle.text = feature.values_.name + return new Text({ ...iconTextStyle }) + + }, + //初始化地图 initMap () { this.setMapLocation() @@ -385,9 +381,19 @@ const vueGis = { //目标加载到map中 }) + let that = this map.on('singleclick', function (e) { - // console.log(e.coordinate) - // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326')); + const feature = map.forEachFeatureAtPixel(e.pixel, function (feature) { + return feature; + }); + if (feature) { + console.log(feature) + that.$emit('clickFeature', feature) + + } + + + }) //去除双击放大效果 @@ -472,6 +478,7 @@ const vueGis = { map.addLayer(polygonLayer) map.addInteraction(select); + }, //初始化多边形icon图层 @@ -491,6 +498,7 @@ const vueGis = { //初始化icon图层 initIconLayer () { + iconSource = new VectorSource({ //features: (new GeoJSON()).readFeatures(geojsonObject) }); @@ -501,9 +509,16 @@ const vueGis = { }); map.addLayer(iconLayer); + // select = new Select({ condition: click, }); + // map.addInteraction(select); + + // select.on('select', e => { + // this.$emit('clickFeature', e) + // }); }, + //取随机数 getRndBetween (lowerLimit, upperLimit) { return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;