diff --git a/public/index.html b/public/index.html index 259b3351..d7aa27ca 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/measure/down-right.png b/src/assets/img/shuju/measure/down-right.png new file mode 100644 index 00000000..0dbb12d4 Binary files /dev/null and b/src/assets/img/shuju/measure/down-right.png differ diff --git a/src/assets/img/shuju/measure/gantanhao.png b/src/assets/img/shuju/measure/gantanhao.png new file mode 100644 index 00000000..88159096 Binary files /dev/null and b/src/assets/img/shuju/measure/gantanhao.png differ diff --git a/src/assets/img/shuju/measure/up-right.png b/src/assets/img/shuju/measure/up-right.png new file mode 100644 index 00000000..587bdabf Binary files /dev/null and b/src/assets/img/shuju/measure/up-right.png differ diff --git a/src/assets/img/shuju/measure/you@2x.png b/src/assets/img/shuju/measure/you@2x.png new file mode 100644 index 00000000..db624670 Binary files /dev/null and b/src/assets/img/shuju/measure/you@2x.png differ diff --git a/src/assets/img/shuju/measure/zhuhu@2x.png b/src/assets/img/shuju/measure/zhuhu@2x.png new file mode 100644 index 00000000..f96ed131 Binary files /dev/null and b/src/assets/img/shuju/measure/zhuhu@2x.png differ diff --git a/src/assets/img/shuju/measure/zuo@2x.png b/src/assets/img/shuju/measure/zuo@2x.png new file mode 100644 index 00000000..3f62fc28 Binary files /dev/null and b/src/assets/img/shuju/measure/zuo@2x.png differ diff --git a/src/assets/img/shuju/weiwanjie.png b/src/assets/img/shuju/weiwanjie.png new file mode 100644 index 00000000..582766fb 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 00000000..fe6cafec Binary files /dev/null and b/src/assets/img/shuju/yiwanjie.png differ diff --git a/src/assets/scss/modules/visual/distributionAnalyze.scss b/src/assets/scss/modules/visual/distributionAnalyze.scss new file mode 100644 index 00000000..5962bd08 --- /dev/null +++ b/src/assets/scss/modules/visual/distributionAnalyze.scss @@ -0,0 +1,144 @@ +@import '../../c/config'; +@import '../../c/function'; +@import './c/common'; + +.title { + padding: 10px; + font-size: 22px; + font-family: PingFang SC; + font-weight: 800; + color: #ffffff; + + position: relative; + + .card-title { + display: flex; + align-items: center; + + img { + display: block; + margin-right: 5px; + } + span { + display: block; + } + } + + .second-title { + display: block; + display: flex; + align-items: center; + margin-top: 20px; + .second-title-label { + position: relative; + padding-left: 40px; + font-size: 16px; + font-weight: 500; + color: #fff; + } + .second-title-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%; + } + .second-select { + margin: 0 10px 0 40px; + ::v-deep .el-input { + width: 180px; + 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'; + } + // .el-select__caret:before { + // content: '\E790' + // } + } + ::v-deep .el-date-editor { + width: 360px; + position: relative; + background: #06186d; + border: 1px solid #1a64cc; + .el-range-input { + color: #fff; + background: #06186d; + } + .el-range-separator { + color: #fff; + } + .el-range__icon { + position: absolute; + right: 5px; + // float: right; + } + .el-input__prefix { + left: unset; + right: 5px; + } + } + } + .second-select:last-child { + margin-left: 0; + } + } + .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 - 230px); + + .g-l { + width: 50%; + height: calc(100vh - 290px); + + .echart-line { + margin-left: 30px; + // margin-top: 100px; + text-align: center; + position: relative; + width: 100%; + height: 100%; + box-sizing: border-box; + .echart-org { + width: 100%; + height: 90%; + } + } + } + + .g-r { + width: 50%; + height: calc(100vh - 290px); + } +} diff --git a/src/assets/scss/modules/visual/processAnalyze.scss b/src/assets/scss/modules/visual/processAnalyze.scss index 3a3a0f23..2f228f2e 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,9 +87,9 @@ .g-r { text-align: center; - margin: 40px 19px 20px; - width: calc(100vw - 60px - 800px); - height: calc(100vh - 160px - 20px); + margin: 20px 10px 20px; + width: calc(100vw - 700px); + height: calc(100vh - 180px - 20px); } } @@ -172,41 +172,68 @@ } .g-r { - .tb { + .r-map { position: relative; - height: calc(100vh - 220px); - overflow-y: auto; - @include scrollBar; + height: calc(100vh - 180px - 20px - 70px); + width: 100%; + + .map { + height: 100%; + width: 100%; + } - .m-pagination { + .r-status { position: absolute; - box-sizing: border-box; - right: 0; bottom: 0; - - width: 100%; - height: 40px; + right: 0; display: flex; - justify-content: flex-end; - /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active { - background: #0266d1; - color: #000d3f; + .status { + height: 30px; + width: 70px; + line-height: 30px; + font-size: 12px; + font-family: PingFang SC; + font-weight: 400; + color: #d2e7ff; + background-color: #1146c2; } - /deep/ .el-pagination .el-pager li { - background: #002e74; + .status-closed { } - /deep/ .el-pagination .btn-prev { - background: #002e74; + .status-pending { + border-radius: 5px 0 0 0; } - - /deep/ .el-pagination .btn-next { - background: #002e74; + .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; + } } .echart-wr { diff --git a/src/assets/scss/modules/visual/typeAnalyze.scss b/src/assets/scss/modules/visual/typeAnalyze.scss new file mode 100644 index 00000000..a5c3918e --- /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/communityParty/elegant/index.vue b/src/views/modules/communityParty/elegant/index.vue index 344782e3..e7898638 100644 --- a/src/views/modules/communityParty/elegant/index.vue +++ b/src/views/modules/communityParty/elegant/index.vue @@ -3,7 +3,7 @@
- + - + - + @@ -127,7 +127,7 @@ :close-on-click-modal="false" :before-close="handlerCancle" > - + @@ -258,7 +258,9 @@ export default { imageList: [] }, rules: { - categoryName: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }] + gridId: [{ required: true, message: '网格不能为空', trigger: 'blur' }], + name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }], + mainDeed: [{ required: true, message: '主要事迹不能为空', trigger: 'blur' }], } } }, @@ -424,6 +426,7 @@ export default { }, resetForm(formName) { this.$refs[formName].resetFields() + this.handleSearch() }, handleAdd() { this.dialogVisible = true diff --git a/src/views/modules/communityParty/regionalParty/activitys.vue b/src/views/modules/communityParty/regionalParty/activitys.vue index 37fcbe08..dd7c5389 100644 --- a/src/views/modules/communityParty/regionalParty/activitys.vue +++ b/src/views/modules/communityParty/regionalParty/activitys.vue @@ -78,11 +78,11 @@
- 新增 - 导出 @@ -99,7 +99,11 @@ size="small" type="red">导入 +<<<<<<< HEAD +======= + --> + >>>>>>> dev-shuju
diff --git a/src/views/modules/communityParty/regionalParty/units.vue b/src/views/modules/communityParty/regionalParty/units.vue index f1cda8df..a9ff9dc6 100644 --- a/src/views/modules/communityParty/regionalParty/units.vue +++ b/src/views/modules/communityParty/regionalParty/units.vue @@ -84,11 +84,11 @@
- 新增 - 导出 @@ -103,7 +103,7 @@ :http-request="uploadFile"> 导入 + type="red">导入 --> diff --git a/src/views/modules/communityService/measure/index.vue b/src/views/modules/communityService/measure/index.vue index e1104966..92c8bb52 100644 --- a/src/views/modules/communityService/measure/index.vue +++ b/src/views/modules/communityService/measure/index.vue @@ -17,7 +17,7 @@ @@ -411,7 +411,7 @@ export default { label: '已取消', value: 'canceled' }, { - label: '已派单', + label: '已指派', value: 'assigned' }, { label: '已接单', @@ -448,6 +448,7 @@ export default { ], reportOptions: [], demandOptions: [], + searchdemandOptions: [], demandUserList: [], optionsG: [], optionsEditG: [], @@ -637,12 +638,13 @@ export default { this.searchForm.reportStartTime = '' this.searchForm.reportEndTime = '' this.searchForm.wantServiceStartTime = '' - this.searchForm.wantServiceTime = '' + this.searchForm.wantServiceEndTime = '' this.searchForm.categoryCode = '' this.searchForm.level = '' this.reportTime = '' this.serviceTime = '' this.$refs[formName].resetFields() + this.handleSearch() }, handleCateCHange(val) { console.log('val', val) @@ -663,7 +665,8 @@ export default { }, handleDemandChange(val) { - console.log('val', val) + console.log('val', val, this.selectDemandUser) + this.selectDemandUser = val.label this.form.demandUserName = val.demandUserName this.form.demandUserMobile = val.demandUserMobile this.form.demandUserId = val.demandUserId @@ -727,7 +730,7 @@ export default { this.disabled = disabled } if (addType == 'look') { - this.finishServiceTime = [row.serviceStartTime, row.serviceEndTime] + this.finishServiceTime = row.serviceStartTime && [row.serviceStartTime, row.serviceEndTime] || '' } if (addType == 'appoint' && row.serviceType) { await this.getServiceuserList(row.serviceType) @@ -738,7 +741,7 @@ export default { if (item.value === row.categoryCode) this.form.categoryCode = [row.categoryCode] }) this.demandUserList.forEach(item => { - if (item.demandUserId == row.demandUserId) this.selectDemandUser = item + if (item.demandUserId == row.demandUserId) this.selectDemandUser = item.label }) } @@ -916,6 +919,16 @@ export default { }) return arr }, + getFlagData(data, flag) { + if (!Array.isArray(data)) return [] + let arr1 = data.filter(item => item[flag]) + let arr2 = arr1.map(item => { + if (item.children) return { ...item, children: this.getFlagData(item.children, flag) } + else return item + }) + // console.log('arrr-oppp', arr2) + return arr2 + }, async getGridList(type, agencyId) { const { user } = await this.$store.state console.log('user---ppp', user) @@ -967,7 +980,8 @@ export default { if (res.code !== 0) { return this.$message.error(res.msg) } else { - this.demandOptions = this.getTreeData(res.data) + this.searchdemandOptions = this.getTreeData(res.data) + this.demandOptions = this.getFlagData(this.getTreeData(res.data), 'usableFlag') } }) .catch(() => { diff --git a/src/views/modules/communityService/ninePlaces/places/placesForm.vue b/src/views/modules/communityService/ninePlaces/places/placesForm.vue index 0a18ea44..44fa73cc 100644 --- a/src/views/modules/communityService/ninePlaces/places/placesForm.vue +++ b/src/views/modules/communityService/ninePlaces/places/placesForm.vue @@ -196,15 +196,15 @@ export default { }, async addPlace () { - // const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码 - // if (regPhone.test(this.formData.mobile) === false) { - // this.btnDisable = false - // this.$message({ - // type: 'warning', - // message: '请输入正确的手机号码' - // }) - // return false; - // } + const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码 + if (regPhone.test(this.formData.mobile) === false) { + this.btnDisable = false + this.$message({ + type: 'warning', + message: '请输入正确的手机号码' + }) + return false; + } let url = '' diff --git a/src/views/modules/visual/communityGovern/distributionAnalyze.vue b/src/views/modules/visual/communityGovern/distributionAnalyze.vue index e69de29b..f75fa2f6 100644 --- a/src/views/modules/visual/communityGovern/distributionAnalyze.vue +++ b/src/views/modules/visual/communityGovern/distributionAnalyze.vue @@ -0,0 +1,399 @@ + + + + + + + diff --git a/src/views/modules/visual/communityGovern/distributionLineOption.js b/src/views/modules/visual/communityGovern/distributionLineOption.js new file mode 100644 index 00000000..ac897026 --- /dev/null +++ b/src/views/modules/visual/communityGovern/distributionLineOption.js @@ -0,0 +1,89 @@ +import * as echarts from 'echarts' +export function lineOption () { + + return { + legend: { + textStyle: { + color: '#D2E7FF', + fontSize: 16, + + }, + itemWidth: 20, + itemHeight: 10, + // top: 350, + bottom: 0, + data: [] + }, + xAxis: { + type: 'category', + // boundaryGap: false, + axisLabel: { + color: '#8ec7dc', + fontSize: 16 + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: '#0c4b59' + } + } + }, + yAxis: { + nameTextStyle: { + color: '#8ec7dc', + fontSize: 18 + }, + splitNumber: 4, + minInterval: 1, + show: true, + type: 'value', + axisLabel: { + color: '#8ec7dc', + fontSize: 18 + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: ['#145968'], + type: 'dotted' + } + }, + axisLine: { + show: true, + symbol: ['none', 'arrow'], + symbolOffset: [0, 15], + lineStyle: { + color: '#0c4b59' + } + } + }, + series: [ + // { + // name: '项目数', + // type: 'line', + // barWidth: 15, + // areaStyle: {}, + // itemStyle: { + // color: new echarts.graphic.LinearGradient( + // 0, 1, 0, 0, + // [ + // { offset: 0, color: 'rgba(121, 55, 255, 0)' }, + // { offset: 1, color: '#6339FF' } + // ] + // ) + // }, + // data: [120, 132, 101, 134, 90, 230, 210] + // }, + // { + // data: [820, 932, 901, 934, 1290, 1330, 1320], + // type: 'line', + // areaStyle: {} + // } + ] + + } +} diff --git a/src/views/modules/visual/communityGovern/processAnalyze.vue b/src/views/modules/visual/communityGovern/processAnalyze.vue index 10f8da5d..da631cf2 100644 --- a/src/views/modules/visual/communityGovern/processAnalyze.vue +++ b/src/views/modules/visual/communityGovern/processAnalyze.vue @@ -19,6 +19,7 @@ @@ -47,21 +48,36 @@
-
党建单位分类统计
+
近12月新增项目数
-
+
+ +
+
未结案
+
已结案
-
+
+
+ + 未结案 + + 已结案
-
@@ -69,6 +85,7 @@ + + diff --git a/src/views/modules/visual/communityGovern/typePieOption.js b/src/views/modules/visual/communityGovern/typePieOption.js new file mode 100644 index 00000000..64b6ad98 --- /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/communityParty/community.vue b/src/views/modules/visual/communityParty/community.vue index 30fdb498..f04d0a83 100644 --- a/src/views/modules/visual/communityParty/community.vue +++ b/src/views/modules/visual/communityParty/community.vue @@ -2,7 +2,8 @@
- +
区域化党建
@@ -10,22 +11,28 @@
党建单位分类统计
- - + +
- +
@@ -42,22 +49,18 @@
- +
@@ -69,16 +72,26 @@
-
+
{{ item.name }}
-
{{ item.value }}
+
{{ item.value }}
- +
-
这是地图容器
-
-
+
+ +
+
+
@@ -89,6 +102,8 @@
+
@@ -97,37 +112,46 @@ import { requestPost } from "@/js/dai/request"; import screenTable from "../components/screen-table/index"; import cptCard from "@/views/modules/visual/cpts/card"; import nextTick from "dai-js/tools/nextTick"; +import dialogInfo from './dialogInfo.vue' +import screenMap from "@/views/modules/visual/components/screen-map"; export default { name: "warning-box", components: { cptCard, screenTable, + dialogInfo, + screenMap }, - data() { + data () { return { + + showedMoreInfo: false, + tableLoading: false, warningList: [], headerList: [ { title: "序号", coulmn: 'index' }, - { title: "需求类型", coulmn: 'gridName' }, - { title: "具体内容", coulmn: 'buildingName' }, - { title: "上报情况", coulmn: 'neighborhoodName' }, - { title: "上报人", coulmn: 'residentNames' }, - { title: "上报时间", coulmn: 'residentNames' }, - { title: "是否认领", coulmn: 'residentNames' }, - { title: "认领方", coulmn: 'residentNames' }, - { title: "认领时间", coulmn: 'residentNames' } + { title: "区域化党建单位名称", coulmn: 'unitName' }, + { title: "活动标题", coulmn: 'title' }, + { title: "活动地址", coulmn: 'address' }, + { title: "服务事项", coulmn: 'serviceMatter' }, + { title: "服务人数", coulmn: 'peopleCount' }, + { title: "活动时间", coulmn: 'activityTime' } ], tableData: [ // [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'], ], + agencyId: '', value2: '', + timeRange: '', visibleLoading: true, + serviceMatter: '', pageNo: 1, pageSize: 10, total: 0, activeIndex: 0, activeLevel: "1", + unitList: [], partyItem: [ { name: '楼宇党建', @@ -156,68 +180,232 @@ export default { icon: require('../../../../assets/img/shuju/measure/qita.png') } ], + + //地图相关数据 + isfirstInit: true,//记录是否是首次加载地图 + agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level + unitMapList: [], + unitMapList1: [ + { + type: '党建楼宇', + name: '建联单位1', + latitude: 36.062227, + longitude: 120.389455, + }, + { + type: '党建楼宇', + name: '建联单位2', + latitude: 36.082227, + longitude: 120.389455, + }, + { + type: '机关直属部门', + name: '建联单位3', + latitude: 36.062227, + longitude: 120.379455, + }, + { + type: '两新党建', + name: '建联单位4', + latitude: 36.082227, + longitude: 120.379455, + }, + { + type: '辖区单位', + name: '建联单位5', + latitude: 36.092227, + longitude: 120.379455, + }, + { + type: '其他', + name: '建联单位6', + latitude: 36.102227, + longitude: 120.379455, + } + ], }; }, - async mounted() { + async mounted () { + const { user } = this.$store.state + this.agencyId = user.agencyId await nextTick(100); - this.getBuildingwarnlist(); + this.loadUnit() + this.getList(); + await this.getWorkUserInfo() + await this.getMapUnitList() }, methods: { - - - onClickList(index, level) { - this.activeIndex = index; - this.activeLevel = level; - this.pageNo = 1; - this.getUserwarnlist(); - }, + //具体人员列表 - async getUserwarnlist() { - const { activeIndex, activeLevel, warningList } = this; - const reqItem = warningList[activeIndex]; - let tableData = []; - const url = "/epmetuser/statsresiwarn/userwarnlist"; + async getList () { + this.visibleLoading = true + + const url = "/heart/icpartyactivity/search" + // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/list" let params = { - configId: reqItem.configId, - buildingIdList: reqItem["buildingIdList" + activeLevel], - pageNo: this.pageNo, + agencyId: this.agencyId, pageSize: this.pageSize, - }; - const { data, code, msg } = await requestPost(url, params); + pageNo: this.pageNo, + serviceMatter: this.serviceMatter, + startTime: this.timeRange.length > 0 && this.timeRange[0] || '', + endTime: this.timeRange.length > 0 && this.timeRange[1] || '' + } + + const { data, code, msg } = await requestPost(url, params) + if (code === 0) { - tableData = data.list.map((item, index) => { - return { - ...item, - index: index + 1, - residentNames: item.residentNames || "暂无" - } - }); - this.tableData = tableData; - this.total = data.total; + this.total = data.total + this.tableData = data.list + } else { + this.$message.error(msg) + } + this.visibleLoading = false + }, + async loadUnit () { + const url = "/heart/icresidemanddict/subcodelist" + // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/option" + + let params = { + parentCategoryCode: '1010' + } + + const { data, code, msg } = await requestPost(url, params) + + if (code === 0) { + this.unitList = data + } else { + this.$message.error(msg) } + }, - // 【人员预警】 楼宇预警数量列表 - async getBuildingwarnlist() { - const url = "/epmetuser/statsresiwarn/buildingwarnlist"; + + // 获取当前管理员信息 + getWorkUserInfo () { + const url = '/epmetuser/customerstaff/staffbasicinfo' + let params = {} + window.app.ajax.post( + url, + params, + (data, rspMsg) => { + this.agencyInfo = data + if (!data.latitude) { + this.agencyInfo.latitude = 36.072227 + } + if (!data.longitude) { + this.agencyInfo.longitude = 120.389455 + } + if (!data.level) { + this.agencyInfo.level = 'street' + } + + }, + (rspMsg, data) => { + this.$message.error(rspMsg) + } + ) + + }, + + // //获取分类 + // async loadType () { + // const url = "/sys/dict/data/dictlist" + + // let params = { + // dictType: 'party_unit_type' + // } + + // const { data, code, msg } = await requestPost(url, params) + + // if (code === 0) { + // this.typeList = data + + // } else { + // this.$message.error(msg) + // } + + // }, + + //获取联建单位分布图 + async getMapUnitList () { + // const url = "/heart/icpartyunit/distribution" + const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyunit/distribution" + let params = { - agencyId: this.$store.state.user.agencyId, - }; - const { data, code, msg } = await requestPost(url, params); + agencyId: this.agencyId + } + + const { data, code, msg } = await requestPost(url, params) + if (code === 0) { - this.warningList = data; - this.visibleLoading = false; - this.getUserwarnlist(); + // this.unitMapList = data + this.unitMapList = this.unitMapList1 + + this.unitMapList.forEach(item => { + + if (item.type === '党建楼宇') { + item.urlIndex = 0 + } else if (item.type === '两新党建') { + item.urlIndex = 1 + } else if (item.type === '辖区单位') { + item.urlIndex = 2 + } else if (item.type === '机关直属部门') { + item.urlIndex = 3 + } else if (item.type === '其他') { + item.urlIndex = 4 + } + }); + + + this.iconUrlArray = [ + require('../../../../assets/img/shuju/measure/ly@2x.png'),//未处理 + require('../../../../assets/img/shuju/measure/jgzs@2x.png'),//已处理 + require('../../../../assets/img/shuju/measure/lxdj@2x.png'),//已处理 + require('../../../../assets/img/shuju/measure/xq@2x.png'),//已处理 + require('../../../../assets/img/shuju/measure/qita.png')//已处理 + ] + + + //第一次加载完置为false + this.loadMap() + + this.isfirstInit = false + + } else { + this.$message.error(msg) + } + + }, + + + //加载地图数据 + loadMap () { + if (this.isfirstInit) { + //mapInfo, polygonArray, polIconUrlArray, iconArrays, iconUrlArray + this.$refs.map.loadMap(this.agencyInfo, null, null, this.unitMapList, this.iconUrlArray, null) } else { + this.$refs.map.refreshMap(null, this.unitMapList) + } }, - pageSizeChangeHandleNew(val) { + + //点击项目 + clickProject (feature) { + console.log('标注信息', feature.values_.properties) + }, + + + handleSelectChange () { + this.getList(); + }, + pageSizeChangeHandleNew (val) { this.pageNo = 1; this.pageSize = val; + this.getList(); }, - pageCurrentChangeHandleNew(val) { + pageCurrentChangeHandleNew (val) { this.pageNo = val; - this.getUserwarnlist(); + this.getList(); }, }, }; @@ -258,7 +446,6 @@ export default { color: #fff; font-weight: 800; } - } .second-title { display: flex; @@ -272,7 +459,7 @@ export default { color: #fff; } .second-title-label::after { - content: ''; + content: ""; position: absolute; top: 50%; left: 20px; @@ -280,31 +467,47 @@ export default { height: 12px; box-sizing: border-box; margin-top: -6px; - background: #2865FA; + background: #2865fa; border-radius: 50%; } .second-select { margin: 0 10px 0 40px; ::v-deep .el-input { - width: 120px; + width: 180px; height: 36px; .el-input__inner { height: 100%; padding: 0 10px; color: #fff; line-height: 36px; - background: #06186D; - border: 1px solid #1A64CC; + background: #06186d; + border: 1px solid #1a64cc; } - + .el-icon-arrow-up:before { - content: "\e78f" + content: "\e78f"; } // .el-select__caret:before { // content: '\E790' // } } ::v-deep .el-date-editor { + width: 360px; + position: relative; + background: #06186d; + border: 1px solid #1a64cc; + .el-range-input { + color: #fff; + background: #06186d; + } + .el-range-separator { + color: #fff; + } + .el-range__icon { + position: absolute; + right: 5px; + // float: right; + } .el-input__prefix { left: unset; right: 5px; @@ -325,7 +528,7 @@ export default { .box-left-item { .box-label { font-size: 16px; - color: rgba(255, 255, 255, .72); + color: rgba(255, 255, 255, 0.72); } .box-num { font-size: 32px; @@ -338,7 +541,12 @@ export default { flex: 1; .box-map { height: 400px; - border: 1px solid #2865FA; + // border: 1px solid #2865fa; + + .map { + height: 100%; + width: 100%; + } } } .box-left-w400 { @@ -365,7 +573,6 @@ export default { } } - .map-tips { width: 100%; display: flex; @@ -397,5 +604,4 @@ export default { } } } - diff --git a/src/views/modules/visual/communityParty/dialogInfo.vue b/src/views/modules/visual/communityParty/dialogInfo.vue new file mode 100644 index 00000000..44464f5e --- /dev/null +++ b/src/views/modules/visual/communityParty/dialogInfo.vue @@ -0,0 +1,189 @@ + + + + + + diff --git a/src/views/modules/visual/communityParty/options.js b/src/views/modules/visual/communityParty/options.js new file mode 100644 index 00000000..ba0ddd33 --- /dev/null +++ b/src/views/modules/visual/communityParty/options.js @@ -0,0 +1,176 @@ + +export function pieOption (_charts) { + const center= ['50%', '50%'] + return { + title: { + text: '0', + top: 125, + left: 196, + textAlign: 'center', + textStyle: { + width: '100%', + fontSize: 32, + color: '#FFFFFF', + fontWeight: 400, + align: 'center' + }, + itemGap: 5, + subtext: '总数', + subtextStyle: { + fontSize: 16, + color: '#fff', + fontWeight: 400, + align: 'center' + } + }, + 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: 90, + hoverAnimation: false, + // tooltip: { + // }, + center: center, + left: 'left', + radius: ['60%', '70%'], + width: 400, + label: { + show: false + }, + labelLine: { + show: false + }, + data: [{ + value: 480, + itemStyle: { + color: 'rgba(40, 101, 250, 0)', + width:0, + borderColor: 'rgba(40, 101, 250, 0.5)', + borderWidth: 1, + borderType: 'dotted' + } + } + ] + }, + + // 突出的 + { + hoverAnimation: false, + type: 'pie', + center: center, + radius: ['40%', '60%'], + avoidLabelOverlap: false, + selectedMode: 'single', + left: 'left', + width: 400, + startAngle: 90, + 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: { + + }, + data: [], + + }, + // 中间圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 90, + hoverAnimation: false, + center: center, + left: 'left', + width: 400, + // tooltip: { + // }, + radius: ['0%', '25%'], + label: { + + show: false + + }, + labelLine: { + show: false + + }, + data: [ + { + value: 360, + itemStyle: { + color: 'rgba(8, 37, 134, 1)', + } + } + ] + }, + ] + + } + } + \ No newline at end of file diff --git a/src/views/modules/visual/communityParty/party.vue b/src/views/modules/visual/communityParty/party.vue index 6d3a3efd..3f0f419f 100644 --- a/src/views/modules/visual/communityParty/party.vue +++ b/src/views/modules/visual/communityParty/party.vue @@ -33,8 +33,11 @@
党员年龄统计
-
-
+ + +
@@ -77,8 +80,11 @@
党员学历统计
-
-
+ + +
@@ -123,6 +129,8 @@ import { requestPost } from "@/js/dai/request"; import screenTable from "../components/screen-table/index"; import cptCard from "@/views/modules/visual/cpts/card"; import nextTick from "dai-js/tools/nextTick"; +import screenEchartsFrame from "../components/screen-echarts-frame"; +import { pieOption } from './options' import * as echarts from 'echarts'; export default { @@ -130,6 +138,7 @@ export default { components: { cptCard, screenTable, + screenEchartsFrame }, data() { return { @@ -212,126 +221,198 @@ export default { color: 'rgba(255, 186, 0, 1)' } ], - + pieAgeChartS: null, + pieEduChartSs: null, + pieAgeOptions: null, + pieEduOptions: null }; }, async mounted() { + await nextTick(100); - this.initCharts() - this.initChartType() + this.initAgeCharts() + this.initEduCharts() + // this.initChartType() this.getBuildingwarnlist(); }, methods: { - initCharts() { - const eId = document.getElementById('echartOrg') - let _charts = echarts.init(eId) + pieInitOk (dom) { + console.log('pie准备好了', dom) + this.pieAgeChartS = dom + // this.pieInitState = true + + }, + pieInitOks (dom) { + console.log('pies准备好了', dom) + this.pieEduChartS = dom + // this.pieInitState = true + + }, + initAgeCharts() { + // const eId = document.getElementById('echartOrg') + // let _charts = echarts.init(eId) let option = { - tooltip: { - show: false, - trigger: 'item' - }, - legend: { - show: false, - orient: 'vertical', - top: '40%', - left: 'right', - textStyle: { - color: '#fff' - } - }, - title: { - text: '12000', //图形标题，配置在中间对应效果图的80% - subtext: '总数', - left: "center", - top: "center", - textStyle: { - color: "#fff", - fontSize: 28, - align: "center" - }, - subtextStyle: { - fontSize: 16, - color: '#fff' + // tooltip: { + // show: false, + // trigger: 'item' + // }, + // legend: { + // show: false, + // orient: 'vertical', + // top: '40%', + // left: 'right', + // textStyle: { + // color: '#fff' + // } + // }, + // title: { + // text: '12000', //图形标题，配置在中间对应效果图的80% + // subtext: '总数', + // left: "center", + // top: "center", + // textStyle: { + // color: "#fff", + // fontSize: 28, + // align: "center" + // }, + // subtextStyle: { + // fontSize: 16, + // color: '#fff' + // } + // }, + // series: [ + // { + // // name: 'Access From', + // type: 'pie', + // // center: ['10%', '50%'], + // radius: ['40%', '60%'], + // avoidLabelOverlap: true, + // // top: top + '%', + // // height: '80%', + // left: 'center', + // width: 400, + // label: { + // show: true, + // position: 'outer', + // alignTo: 'edge', + // formatter: '{a|{c}}\n{r|}\n{name|{b}}', + // minMargin: 5, + // edgeDistance: 20, + // lineHeight: 15, + // color: '#fff', + // fontSize: 12, + // // padding: [5], + // distanceToLabelLine: 10, + // rich: { + // name: { + // padding: [0, 6, 0, 6] + // }, + // a: { + // fontSize: 15, + // color: '#fff', + // padding: [0, 6, 0, 6] + // }, + // r: { + // backgroundColor: 'auto', + // borderRadius: 6, + // width: 6, + // height: 6, + // // padding: [3, 3, 0, -12] + // } + // } + // }, + // emphasis: { + // label: { + // show: true, + // fontSize: '14', + // fontWeight: 'bold' + // } + // }, + // labelLine: { + // show: false, + // length: 20, + // length2: 0, + // maxSurfaceAngle: 80, + // lineStyle: { + // cap: 'round' + // } + // }, + // labelLayout: function (params) { + // const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2; + // const points = params.labelLinePoints; + // // Update the end point. + // points[2][0] = isLeft + // ? params.labelRect.x + // : params.labelRect.x + params.labelRect.width; + // return { + // labelLinePoints: points + // }; + // }, + // data: this.ageItem + // } + // ] + } + this.pieAgeOptions = pieOption(this.pieAgeChartS) + this.clickAgePie(0) + let fun = params => { + this.clickAgePie(params.dataIndex) + } + this.$refs.ageChart.handleClick(fun) + // option && this.$refs.pieChart.setOption(option); + + }, + initEduCharts() { + // const eId = document.getElementById('echartOrg') + // let _charts = echarts.init(eId) + let option = { + + } + let legend = { + show: true, + orient: 'vertical', + top: '20%', + right: 0, + textStyle: { + width: 90, + color: '#fff', + rich: { + a: { + width: 90 + } } }, - series: [ - { - // name: 'Access From', - type: 'pie', - // center: ['10%', '50%'], - radius: ['40%', '60%'], - avoidLabelOverlap: true, - // top: top + '%', - // height: '80%', - left: 'center', - width: 400, - label: { - show: true, - position: 'outer', - alignTo: 'edge', - formatter: '{a|{c}}\n{r|}\n{name|{b}}', - minMargin: 5, - edgeDistance: 20, - lineHeight: 15, - color: '#fff', - fontSize: 12, - // padding: [5], - distanceToLabelLine: 10, - rich: { - name: { - padding: [0, 6, 0, 6] - }, - a: { - fontSize: 15, - color: '#fff', - padding: [0, 6, 0, 6] - }, - r: { - backgroundColor: 'auto', - borderRadius: 6, - width: 6, - height: 6, - // padding: [3, 3, 0, -12] - } + formatter: name => { + for (let a = 0; a < this.eduItem.length; a++) { + // this.data 这个数据中有名称和次数 + if (this.eduItem[a].name === name) { + //两个名称进行对比，取出对应的次数 + let params1 = name + "\n"; //然后return你需要的legend格式即可 + console.log(params1); + let tmp = params1.split("\n"); + let res = "" + params1; + for (let i in tmp) { + res = res.replace(tmp[i], ""); } - }, - emphasis: { - label: { - show: true, - fontSize: '14', - fontWeight: 'bold' - } - }, - labelLine: { - show: true, - length: 20, - length2: 0, - maxSurfaceAngle: 80, - lineStyle: { - cap: 'round' - } - }, - labelLayout: function (params) { - const isLeft = params.labelRect.x < _charts.getWidth() / 2; - const points = params.labelLinePoints; - // Update the end point. - points[2][0] = isLeft - ? params.labelRect.x - : params.labelRect.x + params.labelRect.width; - return { - labelLinePoints: points - }; - }, - data: this.ageItem + return res + params1; + } } - ] + } } - option && _charts.setOption(option); + this.pieEduOptions = pieOption(this.pieEduChartS) + this.pieEduOptions.legend = { ...legend } + // this.pieEduOptions.series[1].width = 400 + this.clickEduPie(0) + let fun = params => { + this.clickEduPie(params.dataIndex) + } + this.$refs.eduChart.handleClick(fun) + // option && this.$refs.pieChart.setOption(option); }, initChartType() { const eId = document.getElementById('echartType') let _charts = echarts.init(eId) + let option = { tooltip: { trigger: 'item' @@ -365,21 +446,6 @@ export default { return res + params1; } } - // var target; - // for(var i = 0; i < this.eduItem.length; i++){ - // if(i == this.eduItem.length && parseFloat(this.eduItem[i].value * 100).toFixed(2) < parseFloat(0.01)){ - // target = " (<0.01" - // break; - // } - // if(name == this.eduItem[i].name){ - // target = " (" + (this.eduItem[i].value * 100).toFixed(2) + "" - // break; - // } - // } - // var arr = [ - // '{a|' + name + target + '%)}', - // ] - // return arr.join('\n'); } }, title: { @@ -467,6 +533,78 @@ export default { } option && _charts.setOption(option); + }, + clickAgePie (seriesIndex) { + this.ageItem.forEach((element, index) => { + if (index === seriesIndex) { + element.label = { + show: true, + + }; + element.labelLine = { + show: true, + lineStyle: { + opacity: 1, + } + + }; + console.log('zlcm') + } else { + element.label = { + show: false, + + }; + element.labelLine = { + show: false, + lineStyle: { + opacity: 0, + color: 'rgba(255,255,255,0)' + } + + }; + + } + }); + this.pieAgeOptions.series[1].data = this.ageItem + // this.$refs.pieChart.hideLoading() + this.$refs.ageChart.setOption(this.pieAgeOptions) + + }, + clickEduPie (seriesIndex) { + this.eduItem.forEach((element, index) => { + if (index === seriesIndex) { + element.label = { + show: true, + + }; + element.labelLine = { + show: true, + lineStyle: { + opacity: 1, + } + + }; + console.log('zlcm') + } else { + element.label = { + show: false, + + }; + element.labelLine = { + show: false, + lineStyle: { + opacity: 0, + color: 'rgba(255,255,255,0)' + } + + }; + + } + }); + this.pieEduOptions.series[1].data = this.eduItem + // this.$refs.pieChart.hideLoading() + this.$refs.eduChart.setOption(this.pieEduOptions) + }, onClickList(index, level) { this.activeIndex = index; diff --git a/src/views/modules/visual/components/screen-map/index copy.vue b/src/views/modules/visual/components/screen-map/index copy.vue deleted file mode 100644 index 09217e02..00000000 --- a/src/views/modules/visual/components/screen-map/index copy.vue +++ /dev/null @@ -1,516 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/src/views/modules/visual/components/screen-map/index.vue b/src/views/modules/visual/components/screen-map/index.vue index 4dfac221..20ee5fad 100644 --- a/src/views/modules/visual/components/screen-map/index.vue +++ b/src/views/modules/visual/components/screen-map/index.vue @@ -1,15 +1,12 @@ @@ -383,12 +533,11 @@ export default { color: #fff; font-weight: 800; } - } .card-echart { display: flex; margin-top: 40px; - + .card-left { position: relative; flex: 1; @@ -432,7 +581,8 @@ export default { box-sizing: border-box; margin-top: 20px; // padding-left: 192px; - background: url('../../../../assets/img/shuju/measure/dangyuan.png') center no-repeat; + background: url("../../../../assets/img/shuju/measure/dangyuan.png") center + no-repeat; background-size: cover; .card-count-content { position: relative; @@ -447,14 +597,14 @@ export default { .card-count-label { margin-top: 6px; font-size: 16px; - color: rgba(255, 255, 255, .72); + color: rgba(255, 255, 255, 0.72); } } .card-count-content::after { position: absolute; top: 50%; left: 0; - content: ''; + content: ""; width: 1px; height: 50px; margin-top: -25px; @@ -462,7 +612,8 @@ export default { } } .card-count-item:last-child { - background: url('../../../../assets/img/shuju/measure/jumin.png') center no-repeat; + background: url("../../../../assets/img/shuju/measure/jumin.png") center + no-repeat; } } @@ -472,6 +623,7 @@ export default { flex-wrap: wrap; padding-top: 10px; padding-bottom: 20px; + .map-tips-item { display: flex; align-items: center; @@ -482,7 +634,7 @@ export default { height: 10px; box-sizing: border-box; margin-right: 10px; - background: #DD2719; + background: #dd2719; border-radius: 2px; } .map-tips-label { @@ -492,4 +644,17 @@ export default { } } +.card-wr-map { + height: calc(100vh - 110px); + + .card-map { + width: 100%; + height: calc(100vh - 255px); + + .map { + width: 100%; + height: 100%; + } + } +} diff --git a/src/views/modules/workSys/demandCate.vue b/src/views/modules/workSys/demandCate.vue index e8b665c6..e51e1ee2 100644 --- a/src/views/modules/workSys/demandCate.vue +++ b/src/views/modules/workSys/demandCate.vue @@ -32,6 +32,7 @@ class="resi-table" > + { + this.tableData = res.data.list.map((item, index) => { return { ...item, + index: index + 1, hasBtn: true, children: item.children.map(n => { return { @@ -428,10 +430,20 @@ export default {