You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
307 lines
9.1 KiB
307 lines
9.1 KiB
<template>
|
|
<div>
|
|
<el-dialog
|
|
:before-close="handleClose"
|
|
:modal="true"
|
|
:modal-append-to-body="false"
|
|
:visible.sync="dialogVisible"
|
|
class="dissatisfied-detail"
|
|
title=""
|
|
width="1366px"
|
|
>
|
|
<div class="content">
|
|
<div class="main-title main-title2">
|
|
|
|
<Title :text="
|
|
type === 'njjwtqk'?'难解决问题情况':
|
|
type === 'bmysxqk'?'不满意事项情况':
|
|
type === 'xqwwcqk'?'需求未完成情况':''
|
|
"/>
|
|
</div>
|
|
|
|
<div class="contents">
|
|
<div class="map-dialog-con">
|
|
<div class="tree">
|
|
<el-tree
|
|
ref="tree"
|
|
:data="type === 'njjwtqk'?njjwtqkTree:type === 'bmysxqk'?bmysxqkTree:type === 'xqwwcqk'?xqwwcqkTree:[]"
|
|
:default-expand-all="true"
|
|
:props="defaultProps"
|
|
highlight-current
|
|
icon-class="el-icon-arrow-right"
|
|
node-key="value"
|
|
@node-click="handleNodeClick"
|
|
>
|
|
<span slot-scope="{ node, data }" class="custom-tree-node">
|
|
<span>{{ node.label }}</span>
|
|
<span v-if="data.total">（{{ data.total }}）</span>
|
|
</span>
|
|
</el-tree>
|
|
</div>
|
|
<div class="right-con">
|
|
<template v-if="type === 'njjwtqk'">
|
|
<div class="eventDetails">
|
|
<img
|
|
:height="18"
|
|
:width="18"
|
|
src="@/assets/images/manyidu/tc-title-icon.png"
|
|
/>
|
|
{{
|
|
catVal === 1 ? '难点堵点分类统计' :
|
|
catVal === 2 ? '矛盾纠纷资源调度' :
|
|
catVal === 3 ? '自身问题事件列表' :
|
|
catVal === 4 ? '超出服务范围事件列表' : ''
|
|
}}
|
|
</div>
|
|
<DifficultyCharts v-if="catVal === 1" :currentLevelData="currentLevelData"
|
|
style="margin-bottom: 56px;"/>
|
|
<DisputeDispatch v-if="catVal === 2" :currentLevelData="currentLevelData" style="margin-bottom: 56px;"/>
|
|
<Njjwtqk :currentLevelData="currentLevelData" :catVal="catVal"/>
|
|
</template>
|
|
|
|
<template v-if="type === 'bmysxqk'">
|
|
<div class="eventDetails">
|
|
<img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png"/>
|
|
不满意事项列表
|
|
</div>
|
|
<List12345 v-if="catVal === 1" :catVal="catValSub" :currentLevelData="currentLevelData"/>
|
|
<CommunityList v-if="catVal === 2" :catVal="catValSub" :currentLevelData="currentLevelData"/>
|
|
<SatisfactionList v-if="catVal === 3" :catVal="catValSub" :currentLevelData="currentLevelData"/>
|
|
</template>
|
|
|
|
<template v-if="type === 'xqwwcqk'">
|
|
<div class="eventDetails">
|
|
<img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png"/>
|
|
{{ catLabel }}-资源调度
|
|
</div>
|
|
<ResourceDispatch :catVal="catVal" :currentLevelData="currentLevelData"/>
|
|
<div class="eventDetails">
|
|
<img :height="18" :width="18" src="@/assets/images/manyidu/tc-title-icon.png"/>
|
|
{{ catLabel }}-需求列表
|
|
</div>
|
|
<DemandList :categoryCode="catVal" :currentLevelData="currentLevelData"/>
|
|
</template>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Title from "@/views/dataBoard/satisfactionEval/components/Title";
|
|
import DifficultyCharts from "./DifficultyCharts";
|
|
import Njjwtqk from "./Njjwtqk.vue";
|
|
import List12345 from "./List12345.vue";
|
|
import CommunityList from "./CommunityList.vue";
|
|
import SatisfactionList from "./SatisfactionList.vue";
|
|
import DisputeDispatch from "./DisputeDispatch";
|
|
import DemandList from "./DemandList";
|
|
import ResourceDispatch from "./ResourceDispatch";
|
|
import titleSmall from "@/views/dataBoard/satisfactionEval/components/Title/titleSmall.vue";
|
|
import Pagination from "@/views/dataBoard/satisfactionEval/components/Pagination";
|
|
|
|
export default {
|
|
name: "MapDialog",
|
|
components: {
|
|
Title,
|
|
DifficultyCharts,
|
|
Njjwtqk,
|
|
titleSmall,
|
|
DisputeDispatch,
|
|
Pagination,
|
|
List12345,
|
|
CommunityList,
|
|
SatisfactionList,
|
|
DemandList,
|
|
ResourceDispatch
|
|
},
|
|
props: {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
total: 10,
|
|
queryParams: {},
|
|
dialogVisible: false,
|
|
njjwtqkTree: [],
|
|
bmysxqkTree: [],
|
|
xqwwcqkTree: [],
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'label'
|
|
},
|
|
catVal: 1,
|
|
catValSub: '',
|
|
catLabel: '',
|
|
totalCount: [],
|
|
currentLevelData: {},
|
|
type: ''
|
|
};
|
|
},
|
|
methods: {
|
|
handleClose(done) {
|
|
this.dialogVisible = false;
|
|
this.$emit('close')
|
|
},
|
|
open(data,type) {
|
|
this.dialogVisible = true;
|
|
this.currentLevelData = data
|
|
this.type = type
|
|
this.$nextTick(() => {
|
|
this.getDetail(data);
|
|
})
|
|
},
|
|
getDetail({orgId}) {
|
|
if (this.type === 'njjwtqk') {
|
|
this.catVal = 1
|
|
this.$http.post('/governance/icEventOld/getMarkersByMarkType', {
|
|
agencyId: orgId,
|
|
type: 1
|
|
}).then(({data: {data}}) => {
|
|
console.log('data', data)
|
|
let njjwtqkTree = [
|
|
{
|
|
label: '难点堵点',
|
|
value: 1
|
|
}, {
|
|
label: '矛盾纠纷',
|
|
value: 2
|
|
}, {
|
|
label: '自身问题',
|
|
value: 3
|
|
}, {
|
|
label: '超出服务范围',
|
|
value: 4
|
|
}
|
|
]
|
|
njjwtqkTree.forEach(item => {
|
|
item.label = item.label + '(' + data.filter(item2 => item2.markType === item.value)[0].total + ')'
|
|
})
|
|
this.njjwtqkTree = njjwtqkTree
|
|
this.$refs.tree.setCurrentKey(this.catVal)
|
|
})
|
|
}
|
|
if (this.type === 'xqwwcqk') {
|
|
this.getDemandOptions(orgId)
|
|
}
|
|
if (this.type === 'bmysxqk') {
|
|
this.catVal = 1
|
|
this.$http.get('/governance/icEvent/dissatisfyByCategoryType?agencyId=' + orgId).then(({data: {data}}) => {
|
|
this.bmysxqkTree = data.map((item, index) => {
|
|
return {
|
|
label: item.type + '(' + item.total + ')',
|
|
value: index - 0 + 1,
|
|
children: item.datas.map(item2 => {
|
|
return {
|
|
label: item2.categoryName + '(' + item2.total + ')',
|
|
value: item2.value,
|
|
parentId: index - 0 + 1
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.$refs.tree.setCurrentKey(this.catVal)
|
|
})
|
|
}
|
|
},
|
|
handleViews() {
|
|
this.$refs.ResourceInfo.open()
|
|
},
|
|
async getDemandOptions(orgId) {
|
|
this.$http.post('/governance/streetOverview/getUnResolveTaskStatic?org_id=' + orgId, {org_id: orgId})
|
|
.then(({data: {data}}) => {
|
|
this.xqwwcqkTree = data.map(item => {
|
|
return {
|
|
label: item.name,
|
|
value: item.code,
|
|
total: item.total
|
|
}
|
|
});
|
|
this.xqwwcqkTree = this.xqwwcqkTree.filter(item => item.value)
|
|
this.$refs.tree.setCurrentKey(this.catVal)
|
|
this.catLabel = this.xqwwcqkTree[0].label;
|
|
})
|
|
.catch(() => {
|
|
return this.$message.error("网络错误");
|
|
});
|
|
},
|
|
handleNodeClick(item) {
|
|
this.catLabel = item.label
|
|
if (this.type === "bmysxqk") {
|
|
this.catValSub = item.value
|
|
this.catVal = item.parentId
|
|
// console.log(item.value, this.catVal)
|
|
|
|
} else {
|
|
this.catVal = item.value
|
|
}
|
|
|
|
},
|
|
getTopLevel(key) {
|
|
const currentNode = this.$refs.tree.getNode(key);
|
|
let parentNode = currentNode;
|
|
if (!parentNode) {
|
|
return parentNode
|
|
}
|
|
while (parentNode.level > 1) {
|
|
parentNode = parentNode.parent;
|
|
}
|
|
console.log(parentNode, parentNode.level, 'parentNode')
|
|
|
|
return parentNode.data.value
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/dataBoard/dialog.scss";
|
|
@import "@/assets/scss/dataBoard/tree.scss";
|
|
@import "@/assets/scss/dataBoard/table2.scss";
|
|
|
|
.handle {
|
|
font-size: 14px;
|
|
margin-left: 10px;
|
|
color: #9A69EC;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.view {
|
|
font-size: 14px;
|
|
margin-left: 10px;
|
|
color: #007FF1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.eventDetails {
|
|
font-size: 18px;
|
|
margin-bottom: 26px;
|
|
color: #ffffff;
|
|
|
|
img {
|
|
margin-top: -4px;
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
|
|
.tree {
|
|
height: 855px;
|
|
}
|
|
.map-dialog-con {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.tree {
|
|
flex: 0 0 180px;
|
|
}
|
|
.right-con {
|
|
width: calc(100% - 200px);
|
|
flex: 0 0 calc(100% - 200px);
|
|
}
|
|
.pagination-container {
|
|
padding-bottom: 0!important;
|
|
}
|
|
</style>
|
|
|