-
-
-
-
-
-
-
{{ item.label }}
-
{{ item.value }}
-
@@ -100,7 +87,7 @@
@clickFeature="clickProject"
:showIconLayer="true">
-
+
+
+
+
+
+
+
+
+
+
{{ item.label }}
+
{{ item.value }}
+
+
+
+
@@ -128,6 +181,8 @@ 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";
+import screenEchartsFrame from "../components/screen-echarts-frame";
+import { pieOption } from './options'
export default {
name: "warning-box",
@@ -135,7 +190,8 @@ export default {
cptCard,
screenTable,
dialogInfo,
- screenMap
+ screenMap,
+ screenEchartsFrame
},
data () {
return {
@@ -176,7 +232,13 @@ export default {
agencyInfo: {},//登陆者的组织信息：主要为了获取地图中心点和level
unitMapList: [],
- detailInfo: {}
+ detailInfo: {},
+ pieEduChartSs: null,
+ pieEduOptions: null,
+ eduList: [],
+ partyCode: '',
+ totalCount: 0,
+ noInit: false
};
},
async mounted () {
@@ -202,6 +264,118 @@ export default {
}
},
methods: {
+ pieInitOks (dom) {
+ console.log('pies准备好了', dom)
+ this.pieEduChartS = dom
+ // this.pieInitState = true
+
+ },
+ 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
+ }
+ }
+ },
+ formatter: name => {
+ for (let a = 0; a < this.partyItem.length; a++) {
+ // this.data 这个数据中有名称和次数
+ if (this.partyItem[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], "");
+ }
+ return res + params1;
+ }
+ }
+ }
+ }
+ 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)
+ // this.noInit = true
+ // option && this.$refs.pieChart.setOption(option);
+
+ },
+ clickEduPie (seriesIndex) {
+ let _code = ''
+ let isClick = false
+ this.partyItem.forEach((element, index) => {
+ if (index === seriesIndex) {
+ _code = element.code
+
+ if (!this.noInit) isClick = false
+ else {
+ element.isClick = !element.isClick
+ isClick = element.isClick
+ }
+
+ element.label = {
+ show: true,
+
+ };
+ element.labelLine = {
+ show: true,
+ lineStyle: {
+ opacity: 1,
+ }
+
+ };
+ console.log('zlcm')
+ } else {
+ element.isClick = false
+ element.label = {
+ show: false,
+
+ };
+ element.labelLine = {
+ show: false,
+ lineStyle: {
+ opacity: 0,
+ color: 'rgba(255,255,255,0)'
+ }
+
+ };
+
+ }
+ });
+ this.partyCode = isClick && _code || ''
+ this.pieEduOptions.title.text = this.totalCount
+ this.pieEduOptions.series[1].data = this.partyItem
+ // this.$refs.pieChart.hideLoading()
+ this.$refs.eduChart.setOption(this.pieEduOptions)
+ if (this.noInit) {
+ const _arr = this.selectAgency[this.selectAgency.length - 1].split('-')
+ const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+ this.pageNo = 1
+ // this.getCateType(_arr[0], isClick && _code || '')
+ }
+ this.noInit = true
+
+
+ },
handleTimeChange (time) {
if (time) {
const startTimeArray = util.dateFormatter(time[0], 'date').split('-')
@@ -218,6 +392,7 @@ export default {
this.getList(this.agencyId);
this.getCateCount(this.agencyId)
},
+
//具体人员列表
async getList (agencyId) {
this.visibleLoading = true
@@ -369,9 +544,16 @@ export default {
this.partyItem = data.map((item, index) => {
return {
...item,
- ...colorItem[index]
+ ...colorItem[index],
+ name: item.label,
+ isClick: false
}
})
+ this.totalCount = 0
+ data.forEach(item => {
+ this.totalCount += Number(item.value)
+ })
+ this.initEduCharts()
} else {
this.$message.error(msg)
}
@@ -767,12 +949,13 @@ export default {
}
.box-right {
flex: 1;
+ height: 100%;
overflow: hidden;
.pagination {
margin-top: 0;
}
.box-map {
- height: 400px;
+ height: 100%;
// border: 1px solid #2865fa;
.map {
@@ -792,6 +975,9 @@ export default {
}
}
}
+.flex-column {
+ flex-direction: column;
+}
.box-wr-400 {
height: 400px;
.box-left {
@@ -804,7 +990,42 @@ export default {
}
}
}
-
+.echart-wr {
+ position: relative;
+ flex-shrink: 0;
+ width: 90%;
+ height: 320px;
+ box-sizing: border-box;
+ .echart-org {
+ width: 100%;
+ height: 100%;
+ }
+ .echart-cicle {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 240px;
+ height: 240px;
+ box-sizing: border-box;
+ margin-top: -120px;
+ margin-left: -120px;
+ border: 1px dashed rgba(0, 96, 240, 1);
+ border-radius: 50%;
+ }
+ .echart-cicle0 {
+ left: 80px;
+ margin-left: 0;
+ }
+}
+.table-h {
+ height: 360px;
+}
+.calc-h {
+ height: calc(100vh - 240px);
+}
+.wd50 {
+ width: 50%;
+}
.map-tips {
width: 100%;
display: flex;
@@ -836,4 +1057,10 @@ export default {
}
}
}
+.mt0 {
+ margin: 0;
+}
+.mt20 {
+ margin-top: 20px;
+}