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.
651 lines
22 KiB
651 lines
22 KiB
|
|
<template>
|
|
<div class="bg-content left1">
|
|
<div class='b-dlzz'>
|
|
<screen-title :titleName="'动力主轴'"></screen-title>
|
|
<div class="dlzz-tree">
|
|
<el-image style="width: 90%; height: 85%;" :src="require('../../assets/images/dlzz.png')"
|
|
@click="goShowDlzz"></el-image>
|
|
|
|
</div>
|
|
<div class="dlzz-static">
|
|
<div class="dlzz-static-item">
|
|
<img class="item-img" src="./../../assets/icon/dlzz-lyxz.png" />
|
|
<div class="item-content">
|
|
<div class="item-title">{{ lyxz.title }}</div>
|
|
<div class="item-num">{{ lyxz.num }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="dlzz-static-item">
|
|
<img class="item-img" src="./../../assets/icon/dlzz-lyxz.png" />
|
|
<div class="item-content">
|
|
<div class="item-title">{{ dyzx.title }}</div>
|
|
<div class="item-num">{{ dyzx.num }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dlzz-static-item">
|
|
<img class="item-img" src="./../../assets/icon/dlzz-lyxz.png" />
|
|
<div class="item-content">
|
|
<div class="item-title">{{ dqff.title }}</div>
|
|
<div class="item-num">{{ dqff.num }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dlzz-static-item">
|
|
<img class="item-img" src="./../../assets/icon/dlzz-lyxz.png" />
|
|
<div class="item-content">
|
|
<div class="item-title">{{ yz.title }}</div>
|
|
<div class="item-num">{{ yz.num }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class='b-zdxx'>
|
|
<screen-title :titleName="'阵地信息'"></screen-title>
|
|
<div class="flex">
|
|
<div :class="['item', { 'item-active': active === '1' }]" @click="active = '1'">地物</div>
|
|
<div :class="['item', { 'item-active': active === 'house' }]" @click="active = 'house'">房子（{{ houseTotal }}）
|
|
</div>
|
|
<div :class="['item', { 'item-active': active === 'resi' }]" @click="active = 'resi'">居民（{{ resiTotal }}）
|
|
</div>
|
|
|
|
</div>
|
|
<div class="pei-Box" v-show="showCharts">
|
|
<div class="title"><span @click="showCharts = false">x</span></div>
|
|
<div id="chartsM" style="width: 290px;height: 290px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="table" v-if="active == 'house'">
|
|
<screen-custom-table :headerColor="'#BDE8FF'" :headerHeight="'36px'" :bodyTdColor="'#FFFFFF'"
|
|
:bodyTdFontSize="'18px'" :tableHeight="80" :showTableLine="true" :dataList="dataListResult"
|
|
:isChangeColor=false :rowColor="'rgba(11,68,135,0.16)'" :noData="noDataH" :pageSize="pageSize"
|
|
:headerList="headerList" @handleLook="handleLook">
|
|
</screen-custom-table>
|
|
</div>
|
|
|
|
<div class="tudi" v-else-if="active == 1">
|
|
<div class="item"><img src="../../assets/icon/yjcz.png" alt=""> <span>公园</span><img src="" alt=""> <span><b
|
|
style="color:#FFBF36;">20</b>个</span></div>
|
|
<div class="item"><img src="../../assets/icon/ansc.png" alt=""> <span>医院</span><img src="" alt=""> <span><b
|
|
style="color:#FD7000;">14</b>个</span></div>
|
|
<div class="item"><img src="../../assets/icon/csgl.png" alt=""> <span>学校</span><img src="" alt=""> <span><b
|
|
style="color: #0bdbc0;;">50</b>个</span></div>
|
|
<div class="item"><img src="../../assets/icon/csgl.png" alt=""> <span>健身活动</span><img src="" alt=""> <span><b
|
|
style="color: #0bdbc0;;">62</b>个</span></div>
|
|
</div>
|
|
<div class="table" v-else>
|
|
<screen-custom-table :headerColor="'#BDE8FF'" :headerHeight="'36px'" :bodyTdColor="'#FFFFFF'"
|
|
:bodyTdFontSize="'18px'" :tableHeight="80" :showTableLine="true" :dataList="dataListResi"
|
|
:isChangeColor=false :rowColor="'rgba(11,68,135,0.16)'" :noData="noData" :pageSize="pageSize"
|
|
:headerList="headerListResi" @handleLook="handleLook">
|
|
</screen-custom-table>
|
|
|
|
</div>
|
|
<el-dialog :visible.sync="ifShowDlzz" width="70%" :modal="false">
|
|
<screen-org-tree :list="treeList" @onClickNode="onClickNode"></screen-org-tree>
|
|
<!-- <div style="color: #fff;display: flex; align-items: center;
|
|
justify-content: center;flex-direction: column;">
|
|
<el-image style="width: 100%; height: 100%;margin-right: 8px;"
|
|
:src="require('../../assets/images/zzjg.png')"></el-image> -->
|
|
<!-- <div class="first"
|
|
@click="NodeClick(null,{label:'市北区委'})">
|
|
|
|
{{list.label}}
|
|
</div> -->
|
|
<!-- <div>
|
|
<el-image style="width: 130px; height: 90px;"
|
|
:src="require('../../assets/images/xx.png')"></el-image>
|
|
</div> -->
|
|
<!-- <div style="display: flex;flex-wrap: nowrap;max-width: 100%;overflow-x: auto;margin-bottom: 12px;">
|
|
<div class="second"
|
|
v-for="(item,index) in list.children"
|
|
:key="index">
|
|
{{ item.label }}
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- <vue2-org-tree :data="list"
|
|
class="orgTree"
|
|
style="max-width: 100%;overflow-x: auto;background-color: #03374c;font-size: 30px;"
|
|
@on-node-click="NodeClick" /> -->
|
|
<!-- </div> -->
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
// import { getOrgTree } from "api/index"
|
|
import { mapGetters } from 'vuex'
|
|
import { getStreetUserStatistics, getStreeHouseStatistics, getStreeHouseTypeStatistics, getStreetUserTypeStatistics, getStructTree } from "../../api/hulianApi"
|
|
import * as echarts from 'echarts';
|
|
import screenOrgTree from '../../components/screen-org-tree'
|
|
export default {
|
|
name: "screen-left1",
|
|
data() {
|
|
return {
|
|
lyxz: {
|
|
title: '楼院党小组',
|
|
num: 32
|
|
},
|
|
dyzx: {
|
|
title: '党员中心户',
|
|
num: 187
|
|
},
|
|
dqff: {
|
|
title: '党群服务中心',
|
|
num: 32
|
|
},
|
|
yz: {
|
|
title: '驿站总数',
|
|
num: 45
|
|
},
|
|
popupVisible: false,
|
|
ifShowDlzz: false,
|
|
list: {},
|
|
active: 1,
|
|
headerList: [{ title: '街道', width: '1000px' }, { title: '房子总数', width: '800px' }, { title: '操作', width: '800px' }],
|
|
headerListResi: [{ title: '街道', width: '1000px' }, { title: '居民总数', width: '800px' }, { title: '操作', width: '800px' }],
|
|
dataListResi: [],
|
|
pageSize: 4,
|
|
noData: false,
|
|
dataListResult: [],
|
|
noDataH: false,
|
|
houseList: [],
|
|
charsData: [],
|
|
showCharts: false,
|
|
charts: null,
|
|
treeList: [],
|
|
houseTotal: '',
|
|
resiTotal: ''
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters(['shibeiAId'])
|
|
},
|
|
components: {
|
|
screenOrgTree
|
|
},
|
|
created() {
|
|
this.getStreetUserStatistics()
|
|
this.getStreeHouseStatistics()
|
|
},
|
|
watch: {
|
|
shibeiAId: {
|
|
handler() {
|
|
if (this.shibeiAId != '') {
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
// async getOrgTree() {
|
|
// try {
|
|
// const res = await getOrgTree()
|
|
// this.list = JSON.parse(JSON.stringify(res.data).replace(/value/g, "id"));
|
|
// this.$nextTick(() => {
|
|
// let dom = document.querySelector('.orgTree');
|
|
// let intViewportWidth = window.innerWidth;
|
|
// dom.scrollLeft = intViewportWidth * 5
|
|
// let dom1 = document.querySelector(".org-tree-node-label");
|
|
// dom1.remove()
|
|
// })
|
|
// } catch (err) {
|
|
// console.error(err)
|
|
// }
|
|
// },
|
|
async getStructTree() {
|
|
let params = {
|
|
agencyId: this.shibeiAId
|
|
}
|
|
const { data, code, msg } = await getStructTree(params)
|
|
if (code === 0) {
|
|
this.treeList = data
|
|
// if (data.length > 0) {
|
|
// this.axisStructId = this.list[0].id
|
|
// this.getList()
|
|
// }
|
|
} else {
|
|
this.$message.error(msg)
|
|
}
|
|
},
|
|
|
|
onClickNode() {
|
|
|
|
},
|
|
goShowDlzz() {
|
|
this.ifShowDlzz = true;
|
|
// this.getOrgTree()
|
|
this.getStructTree()
|
|
|
|
},
|
|
async getStreetUserStatistics() {
|
|
let params = {}
|
|
const { data, msg, code } = await getStreetUserStatistics(params)
|
|
if (code == 0) {
|
|
this.dataListResi = data.map(item => [item.streetName, item.count, '查看'])
|
|
this.resiTotal = data.reduce((sum, item) => sum + item.count, 0);
|
|
if (this.dataListResi.length === 0) {
|
|
this.noData = true
|
|
}
|
|
} else {
|
|
console.log(msg);
|
|
}
|
|
},
|
|
async getStreeHouseStatistics() {
|
|
let params = {}
|
|
const { data, msg, code } = await getStreeHouseStatistics(params)
|
|
if (code == 0) {
|
|
this.dataListResult = data.map(item => [item.name, item.count, '查看'])
|
|
this.houseTotal = data.reduce((sum, item) => sum + item.count, 0);
|
|
this.houseList = data
|
|
if (this.dataListResult.length === 0) {
|
|
this.noDataH = true
|
|
}
|
|
} else {
|
|
console.log(msg);
|
|
}
|
|
},
|
|
NodeClick(e, data) {
|
|
if (data.label.indexOf("党工委") != -1) {
|
|
this.list.children = []
|
|
this.list.children.push(data)
|
|
this.$nextTick(() => {
|
|
let dom = document.querySelector(".org-tree-node")
|
|
console.log(dom, 999);
|
|
})
|
|
}
|
|
if (data.label == "市北区委") {
|
|
// this.getOrgTree()
|
|
}
|
|
|
|
},
|
|
handleLook(item) {
|
|
let str = item[0]
|
|
let id = this.houseList.filter(item => item.name == str)[0].streeId
|
|
if (id && this.active == 'house') {
|
|
this.getStreeHouseTypeStatistics(id)
|
|
} else if (id && this.active == 'resi') {
|
|
this.getStreetUserTypeStatistics(id)
|
|
}
|
|
},
|
|
async getStreeHouseTypeStatistics(id) {
|
|
let params = {
|
|
streetId: id
|
|
}
|
|
const { data, msg, code } = await getStreeHouseTypeStatistics(params)
|
|
if (code == 0) {
|
|
this.charsData = []
|
|
this.charsData = data.map(item => ({ name: item.typeName, value: item.count }))
|
|
this.showCharts = true
|
|
this.renderCharts()
|
|
} else {
|
|
console.log(msg);
|
|
}
|
|
},
|
|
// 获取居民分类详情
|
|
async getStreetUserTypeStatistics(id) {
|
|
let params = {
|
|
streetId: id
|
|
}
|
|
const { data, msg, code } = await getStreetUserTypeStatistics(params)
|
|
if (code == 0) {
|
|
this.charsData = []
|
|
const labelMapping = {
|
|
"dangyuanCount": "党员",
|
|
"dibaohuCount": "低保",
|
|
"baozhangfangCount": "保障房",
|
|
"shiyeCount": "失业",
|
|
"yulingfunvCount": "育龄妇女"
|
|
};
|
|
|
|
this.charsData = Object.entries(data).map(([key, value]) => ({
|
|
name: labelMapping[key] || key,
|
|
value: value
|
|
}));
|
|
if (this.charsData.every(item => item.value === 0)) {
|
|
this.charsData = [];
|
|
}
|
|
console.log(this.charsData);
|
|
this.showCharts = true
|
|
this.renderCharts()
|
|
} else {
|
|
console.log(msg);
|
|
}
|
|
},
|
|
// 这个初始化图表的地方我有两个地方调用如何让它更新图表
|
|
renderCharts() {
|
|
if (!this.charts) {
|
|
// 如果图表实例不存在，创建一个新的实例
|
|
this.charts = echarts.init(document.getElementById('chartsM'));
|
|
}
|
|
let option;
|
|
if (this.charsData.length > 0) {
|
|
option = {
|
|
title: {
|
|
textStyle: {
|
|
fontWeight: "normal",
|
|
fontSize: 16
|
|
},
|
|
left: "center"
|
|
},
|
|
color: ["#1bd140", "#2aaee9", "#f0200a", "#fb8010", "#9232f0", "#d1124d"],
|
|
tooltip: {
|
|
trigger: "item",
|
|
formatter: "{b}：{d}%"
|
|
},
|
|
legend: {
|
|
orient: 'horizontal',
|
|
itemWidth: 8,//图例宽度
|
|
itemHeight: 8,//图例高度
|
|
itemGap: 20,//图例之间的间隙
|
|
top: 180,
|
|
left: 20,
|
|
textStyle: {//图例字体样式
|
|
color: "#fff",
|
|
fontSize: 14,
|
|
fontFamily: "微软雅黑"
|
|
}
|
|
},
|
|
// label已经有了现在需要加上labelLine线条
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["20%", "40%"],
|
|
center: ["50%", "30%"],//饼状图位置
|
|
label: {
|
|
show: true,
|
|
position: 'outside',
|
|
formatter(param) {
|
|
return param.name + param.value;
|
|
},
|
|
fontSize: 12,
|
|
fontWeight: 'bold',
|
|
color: '#fff'
|
|
},
|
|
labelLine: {
|
|
show: true,
|
|
length: 10, // 设置线条的长度
|
|
lineStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: 14,
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
data: this.charsData
|
|
}
|
|
]
|
|
};
|
|
} else {
|
|
option = {
|
|
title: {
|
|
// text: this.charTitle,
|
|
textStyle: {
|
|
fontWeight: "normal",
|
|
fontSize: 16
|
|
},
|
|
left: "center"
|
|
},
|
|
tooltip: {
|
|
trigger: "none"
|
|
},
|
|
color: ["#d3d3d3"],
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["30%", "60%"],
|
|
label: {
|
|
show: true,
|
|
formatter: "{b}"
|
|
},
|
|
data: [{ value: 1, name: "暂无数据" }]
|
|
}
|
|
]
|
|
};
|
|
}
|
|
this.charts.setOption(option);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.left1 {
|
|
margin-right: 12px;
|
|
|
|
.b-dlzz {
|
|
margin-top: 5px;
|
|
box-sizing: border-box;
|
|
height: 618px;
|
|
|
|
.dlzz-tree {
|
|
height: 484px;
|
|
background-color: #03364b;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.dlzz-static {
|
|
background: #03364b;
|
|
|
|
box-sizing: border-box;
|
|
padding: 14px 24px 16px 17px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
&-item {
|
|
display: flex;
|
|
|
|
.item-img {
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
.item-content {
|
|
margin-left: 6px;
|
|
|
|
.item-title {
|
|
font-size: 16px;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #c1e8ff;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.item-num {
|
|
font-size: 24px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.b-zdxx {
|
|
position: relative;
|
|
|
|
.pei-Box {
|
|
position: absolute;
|
|
top: -250px;
|
|
right: -1px;
|
|
height: 300px;
|
|
width: 300px;
|
|
background-color: #015271;
|
|
|
|
.title {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
width: 100%;
|
|
text-align: right;
|
|
padding-right: 10px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
|
|
span {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.first {
|
|
background-image: linear-gradient(#055b8d, #0695b7);
|
|
width: fit-content;
|
|
padding: 20px 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 40px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.second {
|
|
background-image: linear-gradient(#055b8d, #0695b7);
|
|
width: fit-content;
|
|
height: auto;
|
|
font-size: 30px;
|
|
padding: 20px 30px;
|
|
margin-right: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
|
|
.item {
|
|
color: #fff;
|
|
width: 140px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
background: linear-gradient(to top, #0174a2, #025b7d);
|
|
margin-left: 10px;
|
|
margin-top: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.item-active {
|
|
background: linear-gradient(to top, #0d82b0, #035f83);
|
|
font-weight: 400;
|
|
|
|
}
|
|
}
|
|
|
|
.tudi {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
color: #A3B9DA;
|
|
font-size: 16px;
|
|
height: 192px;
|
|
margin-top: 38px;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
b {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.table {
|
|
height: 15px;
|
|
}
|
|
|
|
::v-deep {
|
|
.el-dialog {
|
|
background-color: #03374c;
|
|
}
|
|
|
|
.el-dialog__headerbtn {
|
|
font-size: 63px;
|
|
color: #09e5ea;
|
|
}
|
|
|
|
.org-tree-node-label-inner {
|
|
background-image: linear-gradient(#055b8d, #0695b7);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.org-tree-node:not(:first-child):before,
|
|
.org-tree-node:not(:last-child):after {
|
|
border-top: 1px solid #188eb6;
|
|
}
|
|
|
|
.org-tree-node:after {
|
|
border-left: 1px solid #188eb6;
|
|
}
|
|
|
|
.org-tree-node-children:before {
|
|
border-left: 1px solid #188eb6;
|
|
}
|
|
|
|
.org-tree-node-label .org-tree-node-label-inner {
|
|
padding: 20px 25px;
|
|
// font-size: 34px;
|
|
}
|
|
}
|
|
|
|
.screen-custom-table {
|
|
::v-deep ul {
|
|
.table-body .scroll-view .table-tr+.table-tr {
|
|
border: none;
|
|
}
|
|
|
|
.table-header {
|
|
font-size: 16px;
|
|
font-family: PingFang-SC-Bold;
|
|
}
|
|
|
|
.table-body {
|
|
height: 200px;
|
|
|
|
.table-tr {
|
|
margin-top: 12px;
|
|
// background-image: url('./../assets/icon/tableTdBg.png');
|
|
// background-size: 100% 100%;
|
|
}
|
|
|
|
// .table-tr:nth-child(2n) {
|
|
// background: rgba(11, 68, 135, 0.1);
|
|
// &:hover {
|
|
// .table-td {
|
|
// color: #fff !important;
|
|
// }
|
|
// }
|
|
// }
|
|
// .table-tr:nth-child(2n + 1) {
|
|
// &:hover {
|
|
// .table-td {
|
|
// color: #fff !important;
|
|
// }
|
|
// }
|
|
// }
|
|
// .table-tr {
|
|
// .table-td:nth-child(2) {
|
|
// white-space: nowrap;
|
|
// overflow: hidden;
|
|
// text-overflow: ellipsis;
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
</style>
|