From 9a4e9dd5f29813a93071648eb94e945c0fb5cf4a Mon Sep 17 00:00:00 2001 From: ZhaoTongYao <531131322@qq.com> Date: Fri, 20 May 2022 17:18:31 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=88=86=E6=9E=90?= =?UTF-8?q?=E5=88=86=E7=B1=BB=EF=BC=9B=E5=A4=9A=E5=85=83=E6=9C=8D=E5=8A=A1?= =?UTF-8?q?=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../scss/modules/visual/duoyuanfenxi.scss | 184 +++++ .../modules/visual/shijianfenleifenxi.scss | 181 +++++ src/router/index.js | 14 +- .../duoyuanfuwu/duoyuanDialog.vue | 305 ++++++++ .../duoyuanfuwu/duoyuanfuwufenxi.vue | 725 ++++++++++++++++++ .../communityGovern/duoyuanfuwu/pieOption.js | 180 +++++ .../shijianfenlei/pieOption.js | 179 +++++ .../shijianfenlei/shijianfenleifenxi.vue | 720 +++++++++++++++++ .../visual/components/screen-map/index.vue | 2 +- 9 files changed, 2487 insertions(+), 3 deletions(-) create mode 100644 src/assets/scss/modules/visual/duoyuanfenxi.scss create mode 100644 src/assets/scss/modules/visual/shijianfenleifenxi.scss create mode 100644 src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanDialog.vue create mode 100644 src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue create mode 100644 src/views/modules/visual/communityGovern/duoyuanfuwu/pieOption.js create mode 100644 src/views/modules/visual/communityGovern/shijianfenlei/pieOption.js create mode 100644 src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue diff --git a/src/assets/scss/modules/visual/duoyuanfenxi.scss b/src/assets/scss/modules/visual/duoyuanfenxi.scss new file mode 100644 index 00000000..222a39cd --- /dev/null +++ b/src/assets/scss/modules/visual/duoyuanfenxi.scss @@ -0,0 +1,184 @@ +@import '../../c/config'; +@import '../../c/function'; +@import './c/common'; + + +.g-cpt-resi { + display: flex; + flex-direction: row; + height: calc(100vh - 180px); + + .g-l { + flex-shrink: 0; + width: 700px; + height: calc(100vh - 230px); + + .l_top { + height: 385px; + display: flex; + align-items: center; + + + } + .l_bottom { + height: calc(100vh - 230px - 385px); + margin-top: 40px; + } + } + + .g-r { + text-align: center; + margin: 20px 10px 20px; + width: calc(100vw - 700px); + height: calc(100vh - 180px - 20px); + } +} + +.l_bottom { + .bottom_label { + position: relative; + padding-left: 40px; + font-size: 16px; + font-weight: 500; + color: #fff; + } + .bottom_label::after { + content: ''; + position: absolute; + top: 50%; + left: 20px; + width: 12px; + height: 12px; + box-sizing: border-box; + margin-top: -6px; + background: #2865fa; + border-radius: 50%; + } + > span { + font-size: 18px; + font-family: PingFang SC; + font-weight: 800; + color: #ffffff; + } + .echart-line { + margin-top: 10px; + height: 100%; + } + .echart-grid-pie { + height: 320px; + margin-left: 30px; + text-align: center; + position: relative; + width: 500px; + box-sizing: border-box; + } + .m-tb { + position: relative; + height: 100%; + .tb { + height: calc(100% - 50px); + overflow-y: auto; + @include scrollBar; + /deep/ .table-status { + height: 220px; + } + } + .m-pagination { + box-sizing: border-box; + position: absolute; + right: 5px; + bottom: 5px; + 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; + } + } + } +} + + +.g-r { +} + +.echart-wr { + margin-left: 30px; + // margin-top: 100px; + text-align: center; + position: relative; + width: 600px; + height: 385px; + + box-sizing: border-box; +} + +.g-pie { + position: relative; + display: flex; + + .pie-legend { + margin-left: 30px; + + display: flex; + flex-direction: column; + justify-content: center; + + .legend_item { + .item_name { + margin-left: 5px; + font-size: 10px; + font-family: PingFang SC; + font-weight: 500; + color: #eff0f1; + } + > img { + margin-top: -10px; + width: 80px; + height: 10px; + } + .item_num { + .item_count { + font-size: 17px; + font-family: PingFang SC; + font-weight: 500; + color: #ffffff; + } + + .item_percent { + margin-left: 12px; + font-size: 8px; + font-family: PingFang SC; + font-weight: 300; + color: #ffffff; + line-height: 18px; + } + } + } + + .item_last { + margin-top: 20px; + } + } +} + +.table-status { + position: relative; + width: 240px; + margin: auto; +} diff --git a/src/assets/scss/modules/visual/shijianfenleifenxi.scss b/src/assets/scss/modules/visual/shijianfenleifenxi.scss new file mode 100644 index 00000000..c4f19da3 --- /dev/null +++ b/src/assets/scss/modules/visual/shijianfenleifenxi.scss @@ -0,0 +1,181 @@ +@import '../../c/config'; +@import '../../c/function'; +@import './c/common'; + + +.g-cpt-resi { + display: flex; + flex-direction: row; + height: calc(100vh - 180px); + + .g-l { + flex-shrink: 0; + width: 700px; + height: calc(100vh - 230px); + + .l_top { + height: 385px; + display: flex; + align-items: center; + + + } + .l_bottom { + height: calc(100vh - 230px - 385px); + margin-top: 20px; + } + } + + .g-r { + text-align: center; + margin: 20px 10px 20px; + width: calc(100vw - 700px); + height: calc(100vh - 180px - 20px); + } +} + +.l_bottom { + .bottom_label { + position: relative; + padding-left: 40px; + font-size: 16px; + font-weight: 500; + color: #fff; + } + .bottom_label::after { + content: ''; + position: absolute; + top: 50%; + left: 20px; + width: 12px; + height: 12px; + box-sizing: border-box; + margin-top: -6px; + background: #2865fa; + border-radius: 50%; + } + > span { + font-size: 18px; + font-family: PingFang SC; + font-weight: 800; + color: #ffffff; + } + .echart-line { + margin-top: 10px; + height: 100%; + } + .echart-grid-pie { + height: 320px; + margin-left: 30px; + text-align: center; + position: relative; + width: 500px; + box-sizing: border-box; + } +} + + +.g-r { + .m-tb { + position: relative; + height: 100%; + .tb { + height: calc(100vh - 170px - 50px - 50px); + overflow-y: auto; + @include scrollBar; + } + .m-pagination { + box-sizing: border-box; + position: absolute; + right: 5px; + bottom: 5px; + 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: 385px; + + box-sizing: border-box; +} + +.g-pie { + position: relative; + display: flex; + + .pie-legend { + margin-left: 30px; + + display: flex; + flex-direction: column; + justify-content: center; + + .legend_item { + .item_name { + margin-left: 5px; + font-size: 10px; + font-family: PingFang SC; + font-weight: 500; + color: #eff0f1; + } + > img { + margin-top: -10px; + width: 80px; + height: 10px; + } + .item_num { + .item_count { + font-size: 17px; + font-family: PingFang SC; + font-weight: 500; + color: #ffffff; + } + + .item_percent { + margin-left: 12px; + font-size: 8px; + font-family: PingFang SC; + font-weight: 300; + color: #ffffff; + line-height: 18px; + } + } + } + + .item_last { + margin-top: 20px; + } + } +} + +.table-status { + position: relative; + width: 600px; + margin: auto; +} diff --git a/src/router/index.js b/src/router/index.js index 4aea5aa8..f96f01b6 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -319,10 +319,20 @@ router.beforeEach((to, from, next) => { id: "processAnalyze", }, { - url: "/visual/communityGovern/typeAnalyze", + url: "/visual/communityGovern/shijianfenlei/shijianfenleifenxi", name: "事件分类分析", - id: "typeAnalyze", + id: "shijianfenleifenxi", }, + { + url: "/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi", + name: "多元服务分析", + id: "duoyuanfuwufenxi", + }, + // { + // url: "/visual/communityGovern/typeAnalyze", + // name: "事件分类分析", + // id: "typeAnalyze", + // }, { url: "/visual/communityGovern/resibuzz", name: "居民热议分析", diff --git a/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanDialog.vue b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanDialog.vue new file mode 100644 index 00000000..c5c4634c --- /dev/null +++ b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanDialog.vue @@ -0,0 +1,305 @@ + + + + + + diff --git a/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue new file mode 100644 index 00000000..20059300 --- /dev/null +++ b/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanfuwufenxi.vue @@ -0,0 +1,725 @@ + + + + + + + + + diff --git a/src/views/modules/visual/communityGovern/duoyuanfuwu/pieOption.js b/src/views/modules/visual/communityGovern/duoyuanfuwu/pieOption.js new file mode 100644 index 00000000..ae6ffd8c --- /dev/null +++ b/src/views/modules/visual/communityGovern/duoyuanfuwu/pieOption.js @@ -0,0 +1,180 @@ + +export function pieOption (_charts) { + const center= ['50%', '150px'] + return { + title: { + text: '0', + top: 125, + left: 'center', + textStyle: { + width: '100%', + fontSize: 26, + color: '#FFFFFF', + fontWeight: 400 + }, + itemGap: 5, + subtext: '总数', + subtextStyle: { + fontSize: 18, + color: '#fff', + fontWeight: 400 + } + }, + tooltip: { + show: false + }, + legend: { + 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: ['53%', '53.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: ['30%', '43%'], + avoidLabelOverlap: false, + // top: top + '%', + // height: '80%', + selectedMode: 'single', + left: 'center', + width: 480, + 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: 10, + // distanceToLabelLine: -60, + rich: { + name: { + padding: [0, 6, 0, 6] + }, + a: { + fontSize: 25, + 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: 40, + 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) { + return params.data.color + //自定义颜色 + 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%', '20%'], + label: { + + show: false + + }, + labelLine: { + + show: false + + }, + data: [{ + value: 360, + itemStyle: { + normal: { + color: 'rgba(8, 37, 134, 1)', + + } + } + } + ] + }, + ] + + } + } + \ No newline at end of file diff --git a/src/views/modules/visual/communityGovern/shijianfenlei/pieOption.js b/src/views/modules/visual/communityGovern/shijianfenlei/pieOption.js new file mode 100644 index 00000000..d0258212 --- /dev/null +++ b/src/views/modules/visual/communityGovern/shijianfenlei/pieOption.js @@ -0,0 +1,179 @@ + +export function pieOption (_charts) { + const center= ['50%', '120px'] + return { + title: { + text: '0', + top: 95, + left: 'center', + textStyle: { + width: '100%', + fontSize: 26, + color: '#FFFFFF', + fontWeight: 400 + }, + itemGap: 5, + subtext: '总数', + subtextStyle: { + fontSize: 18, + color: '#fff', + fontWeight: 400 + } + }, + tooltip: { + show: false + }, + legend: { + bottom: 0, + itemWidth: 20, + itemHeight: 10, + textStyle: { + color: '#D2E7FF', + fontSize: 14, + lineHeight: 20, + }, + + }, + series: [ + // 外侧圆环 + { + type: 'pie', + // 起始刻度的角度,默认为 90 度,即圆心的正上方。0 度为圆心的正右方。 + startAngle: 0, + hoverAnimation: false, + // tooltip: { + // }, + center: center, + radius: ['48%', '48.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: ['25%', '38%'], + avoidLabelOverlap: false, + // top: top + '%', + // height: '80%', + // selectedMode: 'single', + left: 'center', + width: 480, + 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: 10, + // distanceToLabelLine: -60, + rich: { + name: { + padding: [0, 6, 0, 6] + }, + a: { + fontSize: 25, + 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: 40, + 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%', '20%'], + label: { + + show: false + + }, + labelLine: { + + show: false + + }, + data: [{ + value: 360, + itemStyle: { + normal: { + color: 'rgba(8, 37, 134, 1)', + + } + } + } + ] + }, + ] + + } + } + \ No newline at end of file diff --git a/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue b/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue new file mode 100644 index 00000000..0b2d9c6e --- /dev/null +++ b/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue @@ -0,0 +1,720 @@ + + + + + + + + diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue index 2786fdde..e39e9d6f 100644 --- a/src/views/modules/visual/components/screen-map/index.vue +++ b/src/views/modules/visual/components/screen-map/index.vue @@ -535,7 +535,7 @@ const vueGis = { }) }), new Style({ - text: createTextStyle(feature) + // text: createTextStyle(feature) // 报错 暂时注掉 zty 2022.05.19 }) ]; styles['MultiPolygon'] = styles['Polygon']; From 73a25e621c9b2e22a10a525bd69029f6e1f48c89 Mon Sep 17 00:00:00 2001 From: ZhaoTongYao <531131322@qq.com> Date: Fri, 20 May 2022 17:25:56 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=88=86=E7=B1=BB?= =?UTF-8?q?=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue b/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue index 0b2d9c6e..3c8a1bf2 100644 --- a/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue +++ b/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue @@ -38,7 +38,7 @@ end-placeholder="结束日期" prefix-icon="el-icon-caret-bottom" format="yyyy-MM-dd" - value-format="yyyyMMdd" + value-format="yyyy-MM-dd" @change="handleSelectChange"> From 1e4849fd76389fda865203aa40b601aba9ca7ad5 Mon Sep 17 00:00:00 2001 From: ZhaoTongYao <531131322@qq.com> Date: Fri, 20 May 2022 17:28:38 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=88=86=E7=B1=BB?= =?UTF-8?q?=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../communityGovern/shijianfenlei/shijianfenleifenxi.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue b/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue index 3c8a1bf2..3a73da80 100644 --- a/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue +++ b/src/views/modules/visual/communityGovern/shijianfenlei/shijianfenleifenxi.vue @@ -28,7 +28,7 @@ -