Browse Source

居民与房屋切换打点prop渲染,党组织架构

master
mk 2 years ago
parent
commit
d5549c12c0
  1. 9
      src/api/bssbApi.js
  2. 83
      src/api/hulianApi.js
  3. BIN
      src/assets/images/jiagou/close.png
  4. BIN
      src/assets/images/jiagou/danghui.png
  5. BIN
      src/assets/images/jiagou/dangqi.png
  6. BIN
      src/assets/images/jiagou/dangwei-by.png
  7. BIN
      src/assets/images/jiagou/dangyuanzhongxinhu.png
  8. BIN
      src/assets/images/jiagou/dian.png
  9. BIN
      src/assets/images/jiagou/faguang.png
  10. BIN
      src/assets/images/jiagou/jiantou-A.png
  11. BIN
      src/assets/images/jiagou/jiantou-D.png
  12. BIN
      src/assets/images/jiagou/jiantou-X.png
  13. BIN
      src/assets/images/jiagou/louyuanxiaozu.png
  14. BIN
      src/assets/images/jiagou/shuoming-X.png
  15. BIN
      src/assets/images/jiagou/tanchuang.png
  16. BIN
      src/assets/images/jiagou/xiaozu-by.png
  17. BIN
      src/assets/images/jiagou/you.png
  18. BIN
      src/assets/images/jiagou/zhibu-by.png
  19. BIN
      src/assets/images/jiagou/zuo.png
  20. BIN
      src/assets/images/map/dotBg.png
  21. BIN
      src/assets/images/map/dto.png
  22. BIN
      src/assets/images/map/dtoBg.png
  23. BIN
      src/assets/images/map/popupBg.png
  24. 7
      src/components/screen-custom-table/index.vue
  25. 438
      src/components/screen-org-tree/index.vue
  26. 1
      src/main.js
  27. 31
      src/utils/common.js
  28. 2
      src/views/screenCenter/markerJson.json
  29. 783
      src/views/screenCenter/screenCenter.vue
  30. 44
      src/views/screenCenter/shibei.json
  31. 540
      src/views/screenLeft/left1.vue
  32. 12
      src/views/screenRight/right1.vue
  33. 7
      src/views/screenRight/right2.vue
  34. 94
      src/views/screenRight/right3.vue

9
src/api/bssbApi.js

@ -176,3 +176,12 @@ export function getItemListByAddress(data) {
params: data
})
}
// 典型案例
export function getResponseSixHoursTotal(data) {
return request({
baseURL,
url: '/events/itemScreen/itemPageList',
method: 'GET',
params: data
})
}

83
src/api/hulianApi.js

@ -65,4 +65,87 @@ export function getGridoption(data) {
data: data
})
}
// 获取阵地房屋列表
export function getStreeHouseStatistics(data) {
return request({
baseURL,
url: '/gov/org/house/screen/getStreeHouseStatistics',
method: 'GET',
params: data
})
}
// 获取房屋类型统计 streetId
export function getStreeHouseTypeStatistics(data) {
return request({
baseURL,
url: '/gov/org/house/screen/getStreeHouseTypeStatistics',
method: 'GET',
params: data
})
}
// 获取阵地居民列表
export function getStreetUserStatistics(data) {
return request({
baseURL,
url: '/epmetuser/icresiuser/screen/getStreetUserStatistics',
method: 'GET',
params: data
})
}
// 获取居民信息类型 streetId
export function getStreetUserTypeStatistics(data) {
return request({
baseURL,
url: '/epmetuser/icresiuser/screen/getStreetUserTypeStatistics',
method: 'GET',
params: data
})
}
// 获取组织架构 angecyId
export function getStructTree(data) {
return request({
baseURL,
url: '/pli/power/data/axis/screen/structTree',
method: 'POST',
data: data
})
}
// 地图房屋统计
export function getScreenHouseStatistics(data) {
return request({
baseURL,
url: '/gov/org/house/screen/getScreenHouseStatistics',
method: 'GET',
params: data
})
}
//地图-房屋列表agencyId=1222094709839659010&level=grid&pageSize=2&pageNo=1
export function getScreenHouseList(data) {
return request({
baseURL,
url: '/gov/org/house/screen/getScreenHouseList',
method: 'GET',
params: data
})
}
//地图-居民统计 agencyId=1202770845325680641&level=street
export function getScreenUserStatistics(data) {
return request({
baseURL,
url: '/epmetuser/icresiuser/screen/getScreenUserStatistics',
method: 'GET',
params: data
})
}
//地图-居民列表 agencyId=1222094709839659010&level=grid&pageSize=2&pageNo=1
export function getScreenUserList(data) {
return request({
baseURL,
url: '/epmetuser/icresiuser/screen/getScreenUserList',
method: 'GET',
params: data
})
}

BIN
src/assets/images/jiagou/close.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/jiagou/danghui.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
src/assets/images/jiagou/dangqi.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/images/jiagou/dangwei-by.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/images/jiagou/dangyuanzhongxinhu.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/jiagou/dian.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
src/assets/images/jiagou/faguang.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/jiagou/jiantou-A.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/assets/images/jiagou/jiantou-D.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/images/jiagou/jiantou-X.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/images/jiagou/louyuanxiaozu.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/jiagou/shuoming-X.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/jiagou/tanchuang.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/assets/images/jiagou/xiaozu-by.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
src/assets/images/jiagou/you.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/jiagou/zhibu-by.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/images/jiagou/zuo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/map/dotBg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
src/assets/images/map/dto.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/images/map/dtoBg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
src/assets/images/map/popupBg.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 157 KiB

7
src/components/screen-custom-table/index.vue

@ -41,7 +41,7 @@
}"
v-for="(td, order) in item"
:key="order"
v-html="td"></div>
v-html="td" @click="handelClickItem(td,item)"></div>
<img v-if="showTableLine"
src="./../../assets/icon/xjph-table.png" />
</div>
@ -209,6 +209,11 @@ export default {
} else {
return str
}
},
handelClickItem(td,item){
if(td == '查看'){
this.$emit('handleLook',item)
}
}
}
}

438
src/components/screen-org-tree/index.vue

@ -0,0 +1,438 @@
<template>
<div class="screen-org-tree">
<div class="no-data" v-if="list.length == 0">
<!-- <img
src="../../../../../../assets/img/modules/visual/noData.png"
alt=""
srcset=""
class="no-data-img"
/> -->
<span class="no-data-text">暂无数据~</span>
</div>
<div class="level-row" v-for="(level1, index1) in list" :key="index1">
<div class="level-1-row">
<div class="level-1-row-item">
<img class="level-1-row-item-line" src="../../assets/images/jiagou/zuo.png">
<div class="level-1-row-item-content">
<div class="level-1-row-item-content-info" @click.stop="onClickNode(level1.id)">
<img src="../../assets/images/jiagou/dangqi.png" class="level-1-row-item-content-info-icon">
<div class="level-1-row-item-content-info-text">
<div class="level-1-row-item-content-info-text-title">{{ level1.name }}</div>
<div class="level-1-row-item-content-info-text-leader">书记: {{ level1.leaderName }}
<img src="../../assets/images/jiagou/shuoming-X.png"
class="level-1-row-item-content-info-text-leader-icon"
@click.stop="onShowInfoDialog(level1.id, level1.leaderId, $event)">
</div>
</div>
</div>
<img src="../../assets/images/jiagou/jiantou-D.png" class="level-1-row-item-content-arrow">
</div>
<img class="level-1-row-item-line" src="../../assets/images/jiagou/you.png">
</div>
</div>
<div class="level-2-row">
<div class="level-2-row-item" v-for="(level2, index2) in level1.children" :key="index2"
@click.stop="onClickNode(level2.id)">
<img class="level-2-row-item-top" src="../../assets/images/jiagou/jiantou-A.png">
<div class="level-2-row-item-content">
<img src="../../assets/images/jiagou/danghui.png" class="level-2-row-item-content-icon">
<div class="level-2-row-item-content-title">{{ level2.name }}</div>
<div class="level-2-row-item-content-leader">书记: {{ level2.leaderName }}
<img src="../../assets/images/jiagou/shuoming-X.png"
class="level-2-row-item-content-leader-icon"
@click.stop="onShowInfoDialog(level2.id, level2.leaderId, $event)">
</div>
</div>
<img class="level-2-row-item-bottom" src="../../assets/images/jiagou/jiantou-X.png">
<div class="level-3-item" v-for="(level3, index3) in level2.children" :key="index3"
@click.stop="onClickNode(level3.id)">
<img src="../../assets/images/jiagou/dian.png" class="level-3-item-icon">
<div class="level-3-item-title">{{ level3.name }}</div>
<div class="level-3-item-leader">{{ level3.leaderName }}</div>
<img class="level-3-item-leader-icon" src="../../assets/images/jiagou/shuoming-X.png"
@click.stop="onShowInfoDialog(level3.id, level3.leaderId, $event)">
</div>
</div>
</div>
</div>
<!-- 个人信息弹窗 -->
<!-- <transition name="el-fade-in-linear">
<info-dialog v-if="showInfo"
:axisStructId="axisStructId"
:leaderId="leaderId"
:position="pos"
@close="showInfo = false"></info-dialog>
</transition> -->
</div>
</template>
<script>
// import infoDialog from './info-dialog'
export default {
name: "screen-org-tree",
components: {
// infoDialog
},
props: {
list: {
type: Array
}
},
data() {
return {
// list: [
// {
// id: '0',
// name: '',
// leaderId: '0',
// leaderName: '',
// children: [
// {
// id: '1',
// name: '',
// leaderId: '1',
// leaderName: '',
// children: [
// {
// id: '11',
// name: '',
// leaderId: '11',
// leaderName: '',
// children: []
// },
// {
// id: '12',
// name: '',
// leaderId: '12',
// leaderName: '',
// children: []
// },
// {
// id: '31',
// name: '',
// leaderId: '31',
// leaderName: '',
// children: []
// },
// {
// id: '42',
// name: '',
// leaderId: '42',
// leaderName: '',
// children: []
// }
// ]
// },
// {
// id: '2',
// name: '',
// leaderId: '2',
// leaderName: '',
// children: [
// {
// id: '21',
// name: '',
// leaderId: '21',
// leaderName: '',
// children: []
// },
// {
// id: '22',
// name: '',
// leaderId: '22',
// leaderName: '',
// children: []
// },
// {
// id: '31',
// name: '',
// leaderId: '31',
// leaderName: '',
// children: []
// },
// {
// id: '42',
// name: '',
// leaderId: '42',
// leaderName: '',
// children: []
// }
// ]
// },
// {
// id: '3',
// name: '',
// leaderId: '3',
// leaderName: '',
// children: [
// {
// id: '31',
// name: '',
// leaderId: '31',
// leaderName: '',
// children: []
// },
// {
// id: '32',
// name: '',
// leaderId: '32',
// leaderName: '',
// children: []
// }
// ]
// },
// {
// id: '4',
// name: '',
// leaderId: '4',
// leaderName: '',
// children: [
// {
// id: '41',
// name: '',
// leaderId: '41',
// leaderName: '',
// children: []
// },
// {
// id: '42',
// name: '',
// leaderId: '42',
// leaderName: '',
// children: []
// }
// ]
// },
// {
// id: '5',
// name: '',
// leaderId: '5',
// leaderName: '',
// children: [
// {
// id: '51',
// name: '',
// leaderId: '51',
// leaderName: '',
// children: []
// },
// {
// id: '52',
// name: '',
// leaderId: '52',
// leaderName: '',
// children: []
// }
// ]
// }
// ]
// }
// ],
showInfo: false, //
pos: { x: 0, y: 0 }, //
axisStructId: '', // id
leaderId: '', // id
}
},
mounted() {
},
methods: {
onShowInfoDialog(axisStructId, leaderId, e) {
this.axisStructId = axisStructId
this.leaderId = leaderId
this.pos.x = e.layerX
this.pos.y = e.layerY
this.showInfo = true
},
onClickNode(id) {
console.log(id)
this.$emit('onClickNode', { id: id })
}
},
}
</script>
<style lang="scss" >
.screen-org-tree {
width: 100%;
height: 100%;
.level-row {
overflow: auto;
}
.level-1-row {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
&-item {
width: 80%;
display: flex;
justify-content: center;
border-bottom: 1px dashed #2b85ff;
cursor: pointer;
&-line {
width: 178px;
height: 16px;
margin-top: 30px;
}
&-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 7px;
&-info {
width: 300px;
height: 80px;
background: url('../../assets/images/jiagou/dangwei-by.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
&-icon {
width: 57px;
height: 41px;
margin-left: 12px;
}
&-text {
width: calc(100% - 70px);
height: 100%;
text-align: center;
&-title {
height: 30px;
font-size: 26px;
font-weight: bold;
display: flex;
align-items: flex-end;
letter-spacing: 3px;
margin-left: 7px;
margin-top: 20px;
background-image: linear-gradient(to top, #00a2ff, #56f9ff, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
&-leader {
height: calc(100% - 50px);
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 2px;
font-size: 16px;
&-icon {
margin-left: 7px;
width: 14px;
height: 14px;
cursor: help;
}
}
}
}
}
}
}
.level-2-row {
display: flex;
align-items: flex-start;
justify-content: space-around;
&-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&-top {}
&-bottom {}
&-content {
width: 170px;
height: 110px;
background: url('../../assets/images/jiagou/zhibu-by.png') no-repeat;
background-size: 100% 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
cursor: pointer;
&-icon {
margin-top: 10px;
}
&-title {
font-size: 20px;
font-weight: bold;
letter-spacing: 1px;
width: 100%;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
}
&-leader {
display: flex;
align-items: center;
&-icon {
width: 14px;
height: 14px;
margin-left: 4px;
cursor: help;
}
}
}
.level-3-item {
width: 170px;
height: 38px;
background: url('../../assets/images/jiagou/xiaozu-by.png') no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-around;
cursor: pointer;
margin-bottom: 16px;
&-leader-icon {
width: 14px;
height: 14px;
cursor: help;
}
}
}
}
//
.no-data {
width: 100%;
height: calc(100% - 50px);
display: flex;
align-items: center;
justify-content: center;
&-text {
width: 249px;
height: 172px;
line-height: 172px;
color: #fff;
}
}
}</style>

1
src/main.js

@ -11,6 +11,7 @@ import 'element-ui/lib/theme-chalk/index.css';
import Vue2OrgTree from 'vue-tree-color';
import './style/font.scss'; // 字体文件
import './style/global.scss';
Vue.prototype.$EventBus = new Vue();
Vue.use(Vue2OrgTree)
Vue.use(ElementUI);
Vue.config.productionTip = false

31
src/utils/common.js

@ -155,3 +155,34 @@ export function getCookies(key) {
export function removeCookies(key) {
Cookies.remove(key)
}
/**
* @method
* @description 深拷贝
* @param obj 要拷贝的对象
*/
export const deepClone = (obj) => {
const newobj = Array.isArray(obj) ? [] : {};
(function clone(sourse, dest) {
for (const key in dest) {
const item = dest[key]
if (item instanceof Date) {
sourse[key] = new Date(item.getTime());
continue;
}
if (item instanceof RegExp) {
sourse[key] = item;
continue;
}
if (item && typeof item === 'object') {
if (!(key in sourse)) {
sourse[key] = (Array.isArray(item) ? [] : {})
}
clone(sourse[key], item)
} else {
sourse[key] = item;
}
}
})(newobj, obj);
return newobj;
}

2
src/views/screenCenter/markerJson.json

@ -7,7 +7,7 @@
"properties": {
"name": "居民",
"type": "marker",
"resiNum":"8"
"resiNum":"居民:8"
},
"geometry": {
"type": "Point",

783
src/views/screenCenter/screenCenter.vue

File diff suppressed because it is too large

44
src/views/screenCenter/shibei.json

@ -9,7 +9,7 @@
"name": "大港街道党工委",
"center": [120.3337627495665, 36.097438422309494],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -1070,7 +1070,7 @@
"name": "即墨路街道党工委",
"center": [120.31935953776099, 36.08052585178],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -1910,7 +1910,7 @@
"name": "辽宁路街道党工委",
"center": [120.3327688259555, 36.079975585938],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -2588,7 +2588,7 @@
"name": "兴隆路街道党工委",
"center": [120.3425374348965, 36.109391004775],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -3468,7 +3468,7 @@
"name": "延安路街道党工委",
"center": [120.345838758681, 36.073510742188],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -4130,7 +4130,7 @@
"name": "湖岛街道党工委",
"center": [120.3477992079, 36.137754991319994],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -5303,7 +5303,7 @@
"name": "登州路街道党工委",
"center": [120.35036159939301, 36.079196370443],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -5679,7 +5679,7 @@
"name": "台东街道党工委",
"center": [120.3543279351135, 36.0859617784295],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -6007,7 +6007,7 @@
"name": "阜新路街道党工委",
"center": [120.362190755209, 36.0997500271275],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -6536,7 +6536,7 @@
"name": "镇江路街道党工委",
"center": [120.365053710938, 36.0876307508685],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -7048,7 +7048,7 @@
"name": "洛阳路街道党工委",
"center": [120.39310519748301, 36.1431841362855],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -7267,7 +7267,7 @@
"name": "浮山新区街道党工委",
"center": [120.416170654297, 36.100919867622],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -8015,7 +8015,7 @@
"name": "四方街道党工委",
"center": [120.360758056641, 36.1133078342015],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -8976,7 +8976,7 @@
"name": "开平路街道党工委",
"center": [120.369328070747, 36.1448555501305],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -9312,7 +9312,7 @@
"name": "宁夏路街道党工委",
"center": [120.36573879665849, 36.0754874674485],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -10039,7 +10039,7 @@
"name": "海伦路街道党工委",
"center": [120.373414306641, 36.1092022026915],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -11139,7 +11139,7 @@
"name": "敦化路街道党工委",
"center": [120.3759648980035, 36.094208306207],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -11892,7 +11892,7 @@
"name": "双山街道党工委",
"center": [120.388498399523, 36.117409667969],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -12734,7 +12734,7 @@
"name": "辽源路街道党工委",
"center": [120.39122328016549, 36.0991404893665],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -13239,7 +13239,7 @@
"name": "河西街道党工委",
"center": [120.40195488823849, 36.130747477214],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -13641,7 +13641,7 @@
"name": "合肥路街道党工委",
"center": [120.4084261067715, 36.1125183105475],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},
@ -14138,7 +14138,7 @@
"name": "水清沟街道党工委",
"center": [120.3701881239155, 36.1290470377605],
"childrenNum": 16,
"level": "province",
"level": "street",
"parent": {
"adcode": 100000
},

540
src/views/screenLeft/left1.vue

@ -1,3 +1,4 @@
<template>
<div class="bg-content left1">
<div class='b-dlzz'>
@ -41,23 +42,28 @@
</div>
</div>
<div class='b-dyfc'>
<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 === 2 }]" @click="active = 2">房子</div>
</div>
<div :class="['item', { 'item-active': active === 3 }]" @click="active = 3">居民</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 == 2">
<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="noData" :pageSize="pageSize"
:headerList="headerList">
: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>
<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;">27</b></span></div>
<div class="item"><img src="../../assets/icon/ansc.png" alt=""> <span>医院</span><img src="" alt=""> <span><b
@ -67,21 +73,31 @@
<div class="item"><img src="../../assets/icon/csgl.png" alt=""> <span>健身活动</span><img src="" alt=""> <span><b
style="color: #0bdbc0;;">27</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="90%" :modal="false">
<div style="color: #fff;display: flex; align-items: center;
<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"
:src="require('../../assets/images/zzjg.png')"></el-image> -->
<!-- <div class="first"
@click="NodeClick(null,{label:'市北区委'})">
{{list.label}}
</div> -->
<!-- <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 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">
@ -89,20 +105,23 @@
</div>
</div> -->
<!-- <vue2-org-tree :data="list"
<!-- <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>
<!-- </div> -->
</el-dialog>
</div>
</template>
<script>
import { getOrgTree } from "api/index"
// 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() {
@ -123,219 +142,109 @@ export default {
title: '驿站总数',
num: 45
},
//
optionHover: {
step: 0.1, //
limitMoveNum: 3, // this.dataList.length
hoverStop: true, // stop
direction: 2, // 0 1 2 3
openWatch: true, // dom
singleHeight: 0, // (0) direction => 0/1
singleWidth: 0, // (0) direction => 2/3
waitTime: 2000, // (1000ms)
},
dyfcList: [],
showContent: '',
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: [['敦化路街道', '1860', '查看'], ['浮山新区街道', '1340', '查看'], ['延安路街道', '1752', '查看'], ['大港路街道', '1654', '查看'], ['海伦路街道', '1524', '查看'],]
dataListResult: [],
noDataH: false,
houseList: [],
charsData: [],
showCharts: false,
charts: null,
treeList: []
}
},
computed: {
...mapGetters(['shibeiAId'])
},
components: {
screenOrgTree
},
created() {
this.getDyfcList()
this.getStreetUserStatistics()
this.getStreeHouseStatistics()
},
watch: {
shibeiAId: {
handler() {
if (this.shibeiAId != '') {
this.getDyfcList()
}
}
}
},
methods: {
async getDyfcList() {
// const res = await getDyfcList()
const data = {
"total": 6,
"list": [
{
"id": "201539a9e43e4db188e90c8768063ff6",
"customerId": "3fdd0380deff5b30f45376cdf995d1c1",
"agencyId": "a017dfca013710a86d318b8393911666",
"gridId": "fdfd28568e4246dd91992dea39de24fd",
"gridPids": "a017dfca013710a86d318b8393911666",
"gridName": "崂山第一网格",
"name": "人员1",
"mainDeed": "于海俊同志为守护祖国北疆生态安全屏障,在内蒙古大兴安岭林区默默坚守32年,致力于建设美丽林区、发展现代林业,直到生命最后一息。他先后参与编制《森林抚育工程实施指南》等4项国家标准,累计完成科研课题10余项,撰写学术论文20余篇;带领科研团队完成国家林业局和大兴安岭管理局天然林保护工程方案、森林资源调查规划、生态保护建设、国有林区改革、企业经营管理和产业转型发展等重大项目100余项;创造性提出的“补植补造”概念及森林经营措施,被纳入国家《东北内蒙古国有林区森林培育实施方案》和检查验收办法,在全国五大国有林区全面实施;提出并推动林区建设以生态旅游为主体的森林公园网络,编制完成大兴安岭莫尔道嘎、阿尔山天池、毕拉河、达尔滨湖等4个国家级森林公园建设可行性研究报告;大胆采用损益分析、敏感分析、有无项目分析和造林模型技术等经济理论,全面推广使用先进设备、先进技术,不断提升林业科技成果转化能力。他在根河林业局推动构建了以森林资源管理为责任主体,生态建设监测中心和森林资源监督机构为两翼的“一体两翼”森林资源监管新格局,将“绿水青山就是金山银山”“生态优先、绿色发展”的理念转化为推动林业林区发展的具体行动,走出了生态保护建设良性发展新路子。他视森林资源如生命般宝贵,在根河林业局期间共带队扑打山火12次,每次都是第一时间主动请战、冲锋在前,每次都出色地完成扑火任务,最大可能地减少火灾损失,最大限度地保护森林资源。",
"delFlag": "0",
"revision": 0,
"createdBy": "APP_USER",
"createdTime": "2022-03-04 18:48:34",
"updatedBy": "APP_USER",
"updatedTime": "2022-03-04 18:48:34",
"imageList": [],
"categoryName": "爱岗敬业",
"categoryId": "1494563884313395202"
},
{
"id": "2b884f78228e473cb8cbeabbb61c15d4",
"customerId": "3fdd0380deff5b30f45376cdf995d1c1",
"agencyId": "a017dfca013710a86d318b8393911666",
"gridId": "fdfd28568e4246dd91992dea39de24fd",
"gridPids": "a017dfca013710a86d318b8393911666",
"gridName": "崂山第一网格",
"name": "人员2",
"mainDeed": "卢永根同志一生学农、爱农、为农,全心全意奋斗在祖国最需要的地方,把毕生精力献给了祖国的农业科学和教育事业。他主持完成的《中国水稻品种的光温生态》,成为我国水稻育种工作者最重要的参考书之一,获得全国科学大会奖。他和助手提出的水稻“特异亲和基因”的新学术观点以及相关设想,被认为是目前对栽培稻杂种不育性和亲和性比较完整系统的新认识,对水稻育种实践具有指导意义。他常年跋山涉水寻找野生稻,在继承导师丁颖生前收集的7000多份野生稻种基础上,逐步扩充到1万多份水稻种质资源,为我国水稻种质资源收集、保护、研究和利用作出巨大贡献。他担任华南农业大学校长12年间,始终把党的教育事业放在首位,以身作则公而忘私,大刀阔斧推动改革,不拘一格选人用人,深受广大师生的崇敬和爱戴。他坚持“科学家有祖国”,把爱国之情、报国之志自觉融入中华民族伟大复兴的历史进程中。他时刻以党员标准严格要求自己,即便晚年身患重病卧床,仍然坚持参加病房临时党支部组织生活,认真学习习近平新时代中国特色社会主义思想。他穿不讲究、吃不挑剔,家中一床简席、四壁白墙,却将一辈子省吃俭用积攒下的880余万元全部捐献给华南农业大学,用于支持农业教育事业,还提前办理了遗体捐献卡,去世后将遗体无偿捐献给医学科研事业。",
"delFlag": "0",
"revision": 0,
"createdBy": "APP_USER",
"createdTime": "2022-03-04 18:48:34",
"updatedBy": "APP_USER",
"updatedTime": "2022-03-04 18:48:34",
"imageList": [],
"categoryName": "党员先锋",
"categoryId": "1494563769276219394"
},
{
"id": "3cf739d220fd4d8980b01c59692786de",
"customerId": "3fdd0380deff5b30f45376cdf995d1c1",
"agencyId": "a017dfca013710a86d318b8393911666",
"gridId": "fdfd28568e4246dd91992dea39de24fd",
"gridPids": "a017dfca013710a86d318b8393911666",
"gridName": "崂山第一网格",
"name": "人员3",
"mainDeed": "周永开同志是践行共产党人初心使命的典范,是党员干部学习的榜样。他对党的事业无限忠诚,解放前冒着生命危险从事川北地区党的地下工作,新中国成立后全心全意为百姓造福,一辈子听党话、跟党走,用实际行动践行“党是一生的追随”的座右铭。在职期间,他恪尽职守、苦干实干,带领广大群众植树造林;顶着压力查办案件,坚决同腐败行为作斗争。离休后,他积极投身生态环境保护事业,牵头组建退休干部义务护林队,不遗余力参与万源市花萼山护林造林,推动花萼山建成国家级自然保护区,始终以旺盛的革命热情践行“人可以离休但共产党员永不会离休”的朴实承诺。他把群众当亲人,多次拿出离休费捐资助学、扶贫济困,先后捐资18.9万余元,连续10余年资助数十名花萼山贫困学生。他自掏腰包为花萼山群众购买中药材种苗,推动成立川陕萼贝专业合作社,带动老区人民规模种植、脱贫致富,被群众亲切地称为“周老革命”。他对自己和家人始终严格要求,主动放弃单位集资建房选房名额,至今仍住在上世纪80年代修建的老家属院,绝大部分家具仍然是上世纪90年代的用品。周永开同志几十年如一日坚守共产党人的初心使命,把一辈子奉献给了革命老区,奉献给了花萼山,被当地人称颂为“花萼愚公”。",
"delFlag": "0",
"revision": 0,
"createdBy": "APP_USER",
"createdTime": "2022-03-04 18:48:34",
"updatedBy": "APP_USER",
"updatedTime": "2022-03-04 18:48:34",
"imageList": [],
"categoryName": "党员先锋",
"categoryId": "1494563769276219394"
},
{
"id": "415b881ce98e4873bc79f31a6e772b2e",
"customerId": "3fdd0380deff5b30f45376cdf995d1c1",
"agencyId": "a017dfca013710a86d318b8393911666",
"gridId": "fdfd28568e4246dd91992dea39de24fd",
"gridPids": "a017dfca013710a86d318b8393911666",
"gridName": "崂山第一网格",
"name": "人员4",
"mainDeed": "张小娟同志是在习近平新时代中国特色社会主义思想指引下成长起来的优秀党员干部,她认真学习党的理论路线方针政策,对党忠诚、政治过硬,自觉在艰苦岗位和急难险重任务中接受党性锻炼、提升人生境界,不断增强“四个意识”,坚定“四个自信”,做到“两个维护”。上学期间,她品学兼优,大学毕业后舍弃在大城市生活的机会,毅然返回家乡参与脱贫攻坚,一直坚守在甘肃民族地区农村基层和脱贫攻坚一线。她勇于担当、埋头苦干,在“5·12”地震灾后重建和“8·8”山洪泥石流抢险救灾中,不惧危险、冲锋在前,用实际行动践行全心全意为人民服务的宗旨。她专业本领强、业务水平高,在乡镇工作时,她坚持深入群众宣传党的政策,丰富群众文化生活,积极为群众发展致富产业出主意、想办法,被老百姓亲切地称为“乖女儿”“好亲戚”。到扶贫部门工作后,她深入学习领会习近平总书记关于扶贫工作的重要论述,刻苦钻研扶贫政策和业务知识,被誉为舟曲扶贫的“活字典”和“移动数据库”。她勇挑组织交给的重担,倾注自己全部的时间和精力,跋山涉水、走村入户,摸情况、提建议、解难题、抓落实,用漫画图解等通俗易懂的形式让贫困户了解党的惠民政策,用自己的努力和付出推动各项扶贫举措在乡村落地见效,成为全县扶贫“排头兵”、攻坚“急先锋”。她勤奋敬业、默默奉献,始终把责任扛在肩上、把事业放在首位,面对艰巨而繁重的扶贫工作任务,始终保持昂扬向上的精神状态和精益求精的工作作风。作为基层领导干部和业务骨干,她坚持与身边的同志干在一起、苦在一起、乐在一起,用人格力量感染和温暖周围的每个人;作为家中的女儿、妻子和母亲,她无暇更多关心和照顾家人,舍小家顾大家,一心扑在工作上,直至为党的事业献出宝贵的生命。",
"delFlag": "0",
"revision": 0,
"createdBy": "APP_USER",
"createdTime": "2022-03-04 18:48:34",
"updatedBy": "APP_USER",
"updatedTime": "2022-03-04 18:48:34",
"imageList": [],
"categoryName": "爱岗敬业",
"categoryId": "1494563884313395202"
},
{
"id": "8e789eca003e4f26906caa540843fda8",
"customerId": "3fdd0380deff5b30f45376cdf995d1c1",
"agencyId": "a017dfca013710a86d318b8393911666",
"gridId": "fdfd28568e4246dd91992dea39de24fd",
"gridPids": "a017dfca013710a86d318b8393911666",
"gridName": "崂山第一网格",
"name": "人员5",
"mainDeed": "李夏同志工作以来,扎根奉献,无论在哪个乡镇、哪个岗位,都时刻以党员标准严格要求自己,恪尽职守,勇于担当,始终冲在抗洪抢险救灾等急难险重任务的最前线。他真心实意为群众干实事谋福祉,指导所联系村发展黄山贡菊、淡水养殖等特色产业,推动改善村级基础设施,使过去离镇最偏远、工作拖后腿的薄弱村,变成干群关系密切、产业兴旺发达的先进村。他服务群众不分上下班,也不分白天黑夜,只要听到大院里一叫李夏,哪怕正在吃饭,也立刻放下饭碗出门,总是随叫随到,时间一长,当地群众都知道“有事情、找李夏”。他把贫困户当亲人,即使工作调离,仍然真心实意、尽心尽力地去关心帮助他们。2019年初,长安镇高杨村村民葛洪亮因摔倒昏迷在医院抢救,李夏此时已经调到荆州乡工作,得知消息后立即赶到150公里外的医院,陪伴其度过危险期,带头捐款并组织募捐7万多元。在绩溪工作8年中,他从事过纪检监察、政府文书、城乡建设等多项工作,干一行、爱一行、精一行。从事纪检监察工作,敢于较真碰硬,得到干部群众的一致好评。他艰苦朴素、真诚质朴,住在条件简陋的乡镇宿舍,生活简单有规律,总是尽心尽力帮助他人,接触过他的人都会被打动。",
"delFlag": "0",
"revision": 0,
"createdBy": "APP_USER",
"createdTime": "2022-03-04 18:48:34",
"updatedBy": "APP_USER",
"updatedTime": "2022-03-04 18:48:34",
"imageList": [],
"categoryName": "爱岗敬业",
"categoryId": "1494563884313395202"
},
{
"id": "b916b26365804848afd4e084b6b7f431",
"customerId": "3fdd0380deff5b30f45376cdf995d1c1",
"agencyId": "a017dfca013710a86d318b8393911666",
"gridId": "fdfd28568e4246dd91992dea39de24fd",
"gridPids": "a017dfca013710a86d318b8393911666",
"gridName": "崂山第一网格",
"name": "人员6",
"mainDeed": "张桂梅同志对党忠诚,始终听党话、跟党走,在脱贫攻坚一线坚决贯彻党中央决策部署,坚守贫困地区40多年,把全部身心投入深度贫困山区教育扶贫主战场,在平凡的岗位上做出了不平凡的事业。她牢记宗旨,坚持为民情怀,为阻断贫困的代际传递,从2002年起锲而不舍四处奔走,克服资金难以筹集、贫困山区群众不理解不支持等一系列困难,在2008年8月成功创办全国第一所全免费女子高中,为贫困山区女孩的追梦人生点亮了希望之光。她坚守初心,坚韧执着,面对女高初创时条件艰苦、缺少师资力量的不利局面,推动发挥党员先锋模范作用和党支部战斗堡垒作用,坚持开展党员一律佩戴党员徽章上课、每周重温一次入党誓词、每周合唱一支革命歌曲、每周观看一部红色影片、每周组织一次理论学习的“五个一”活动,以党建引领办教育,帮助1804名贫困山区女孩考上大学、走出大山,连续10年高考综合上线率保持100%。在1997年4月查出患有子宫肌瘤后,她仍然坚持站在讲台上教书育人,坚持家访11年,行程近11万公里,覆盖学生1345名。为让失去双亲的孤儿有一个“家”,她从2001年起一边任教、一边兼任华坪县儿童福利院院长,当好136个孤儿的“妈妈”,被评为“全国百名优秀母亲”。她将自己的工资、奖金和社会各界捐款累计100多万元全部投入教育事业,把一切都献给了党、献给了贫困山区的孩子们。",
"delFlag": "0",
"revision": 0,
"createdBy": "APP_USER",
"createdTime": "2022-03-04 18:48:34",
"updatedBy": "APP_USER",
"updatedTime": "2022-03-04 18:48:34",
"imageList": [],
"categoryName": "爱岗敬业",
"categoryId": "1494563884313395202"
}
],
// 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
}
this.dyfcList = data.list
// this.dyfcList.forEach(element => {
// this.popupVisible.push(true)
// });
// console.log(this.dyfcList)
},
onHover(e) {
console.log(e.target.className)
if (e.target.className === 'dyfc-item-row3') {
// console.log(e.target);
let index = e.target.id;
let item = JSON.parse(e.target.dataset.obj);
// console.log(item)
// console.log(index)
this.showContent = this.dyfcList[index - 1].mainDeed
this.popupVisible = true
} else if (e.target.className === 'screen-popup-content') {
this.popupVisible = true
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.popupVisible = false
this.$message.error(msg)
}
},
onClickNode(){
},
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)
}
},
goShowDlzz() {
this.ifShowDlzz = true;
this.getOrgTree()
// 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, '查看'])
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.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 = []
@ -346,10 +255,153 @@ export default {
})
}
if (data.label == "市北区委") {
this.getOrgTree()
// this.getOrgTree()
}
}
},
handleLook(item) {
let str = item[0]
let id = this.houseList.filter(item => item.name == str)[0].streeId
if (id && this.active == 2) {
this.getStreeHouseTypeStatistics(id)
} else if (id && this.active == 3) { } {
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: "微软雅黑"
}
},
series: [
{
type: "pie",
radius: ["30%", "50%"],
center: ["50%", "30%"],//
label: {
show: false,
position: 'center'
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
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>
@ -409,81 +461,29 @@ export default {
}
}
.b-dyfc {
box-sizing: border-box;
margin-top: 8px;
margin-left: 1px;
&-scroll {
overflow: hidden;
padding: 0 10px;
.dyfc-main {
margin-top: 16px;
display: flex;
justify-content: space-around;
.dyfc-item {
padding: 10px 11px 18px 11px;
width: 190px;
height: 230px;
background: rgba(68, 216, 243, 0.16);
// opacity: 0.16;
margin-left: 10px;
.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;
>img {
height: 110px;
width: 190px;
display: block;
}
&-row1 {
margin-top: 10px;
display: flex;
justify-content: space-between;
.item-name {
font-size: 18px;
font-family: Alibaba PuHuiTi;
font-weight: 400;
color: #ffffff;
}
.item-type {
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 300;
color: #00eccd;
}
}
&-row2 {
margin-top: 10px;
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 300;
color: #c1e8ff;
}
&-row3 {
position: relative;
margin-top: 13px;
font-size: 16px;
font-family: Alibaba PuHuiTi;
font-weight: 300;
color: #ffffff;
line-height: 24px;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
// &-row3:hover {
// overflow: visible;
// }
}
}
}

12
src/views/screenRight/right1.vue

@ -25,7 +25,7 @@
<screen-title :titleName="'党员风采'"></screen-title>
<div class="b-dyfc-scroll"
v-on:mouseover="onHover($event)"
v-on:mouseout="onHover">
v-on:mouseout="onHover" v-if="dyfcList">
<div style="overflow: hidden">
<screen-popup bottom="80px"
left="4200px"
@ -57,6 +57,9 @@
</div>
</div>
<div class="no-data" v-else>
暂无数据~
</div>
</div>
<!-- <div class='b-ytal'>
<screen-title :titleName="'议题案例'"></screen-title>
@ -315,4 +318,11 @@ export default {
}
}
}
.no-data{
width: 620px;
height: 269px;
line-height: 269px;
text-align: center;
color: #fff;
}
</style>

7
src/views/screenRight/right2.vue

@ -141,9 +141,9 @@ export default {
watch: {
shibeiAId: {
handler() {
if (this.shibeiAId !== "") {
// if (this.shibeiAId !== "") {
this.getData();
}
// }
},
immediate: true,
},
@ -154,7 +154,7 @@ export default {
methods: {
getLineChart() {
const params = {};
params.deptId = this.deptId_;
params.deptId = this.shibeiAId || '1175270520603930625' ;
const currentDate = new Date();
params.yearMonth = currentDate.getFullYear()
this.lineChartFlag = false;
@ -211,6 +211,7 @@ export default {
};
getEfficiencyEvaluation(params).then(res => {
if (res.code == 0) {
this.dataListResult = []
this.dataListResult = res.data.map((item, index) => [index + 1, item.deptName, item.closedRatio, item.responseRatio, item.satisfiedRatio])
if (this.dataListResult.length === 0) {
this.noData = true

94
src/views/screenRight/right3.vue

@ -9,7 +9,7 @@
<el-image style="width: 120px; height: 100px;margin-right: 8px;"
:src="require('../../assets/images/dataicon.png')"></el-image>
<div style="color:#fff;font-weight: 600;">
<div style="font-size: 24px;margin-bottom: 6px;" >
<div style="font-size: 24px;margin-bottom: 6px;">
{{ format(dataTotal) }}
</div>
<div style="font-size: 16px;">总数</div>
@ -38,7 +38,7 @@
</div>
</div>
<div v-else>
<screen-loading style="width: 290px;height: 290px;" >加载中...</screen-loading>
<screen-loading style="width: 290px;height: 290px;">加载中...</screen-loading>
</div>
</div>
<div b-myd>
@ -47,26 +47,26 @@
<div style="width: 290px;height: 290px;" ref="chart"></div>
</div>
<div v-else>
<screen-loading style="width: 290px;height: 290px;" >加载中...</screen-loading>
<screen-loading style="width: 290px;height: 290px;">加载中...</screen-loading>
</div>
</div>
</div>
<div class='b-row2'>
<div >
<screen-title :titleName="'事件类型分析'" style="width:310px" :type="'short'" ></screen-title>
<div>
<screen-title :titleName="'事件类型分析'" style="width:310px" :type="'short'"></screen-title>
<div class="Satisfaction" v-if="charsData.length">
<div style="width: 290px;height: 290px;" ref="charts"></div>
</div>
<div v-else>
<screen-loading style="width: 290px;height: 290px;" >加载中...</screen-loading>
<screen-loading style="width: 290px;height: 290px;">加载中...</screen-loading>
</div>
</div>
<div b-dxal>
<screen-title :titleName="'典型案例'" style="width:310px" :type="'short'"></screen-title>
<div @mouseenter="tableMouseEnter" @mouseleave="tableMouseLeave" class="ytal-list">
<div class="ytal-list-tran" :style="{ top: top, transition: transition }">
<div class="ytal-item" v-for="(item, index) in ytalList" :key="index">
<div class="ytal-item-detail">{{ item.detail }}</div>
<div class="ytal-item" v-for="(item, index) in ytalList" :key="index" @click="handleClickEvent(item)">
<div class="ytal-item-detail">{{ item.itemContent }}</div>
<div class="ytal-item-line"></div>
</div>
</div>
@ -77,9 +77,9 @@
<screen-title :titleName="'汇总统计'">
<slot>
<div class="flex">
<div class="item"> <span>民生</span>{{totalLivelihoodCount|| 0}} </div>
<div class="item"> <span>发展</span>{{developCountTotal || 0}} </div>
<div class="item"> <span>执法</span> {{lawCountCountTotal || 0}}</div>
<div class="item"> <span>民生</span>{{ totalLivelihoodCount || 0 }} </div>
<div class="item"> <span>发展</span>{{ developCountTotal || 0 }} </div>
<div class="item"> <span>执法</span> {{ lawCountCountTotal || 0 }}</div>
</div>
</slot>
</screen-title>
@ -96,8 +96,8 @@
</template>
<script>
import * as echarts from 'echarts';
import { loadXjphList, loadYtalList } from './../../data/index';
import { getItemdailystatis, getCategoryAnalysis, getEventStat,getEvaluationTotal } from '../../../src/api/bssbApi'
import { loadXjphList, } from './../../data/index';
import { getItemdailystatis, getCategoryAnalysis, getEventStat, getEvaluationTotal,getResponseSixHoursTotal } from '../../../src/api/bssbApi'
import { mapGetters } from 'vuex'
export default {
name: "screen-right3",
@ -160,9 +160,9 @@ export default {
eventStatList: [],//
lawCountCountTotal:0,
developCountTotal:0,
totalLivelihoodCount:0
lawCountCountTotal: 0,
developCountTotal: 0,
totalLivelihoodCount: 0
}
},
async mounted() {
@ -175,7 +175,8 @@ export default {
await this.getEventStat()//
await this.getEvaluationTotal()//
await this.getCategoryAnalysis()//
_this.ytalList = loadYtalList()
this.getResponseSixHoursTotal() //
_this.$nextTick(function () {
this.renderChart()
this.renderCharts()
@ -186,7 +187,6 @@ export default {
immediate: true,
handler: function (newvalue) {
if (newvalue.length > 0) {
this.scrollView()
} else {
clearInterval(this.timer)
@ -195,14 +195,15 @@ export default {
},
shibeiAId: {
handler() {
if (this.shibeiAId != '') {
this.getItemdailystatis()
this.getCategoryAnalysis()
this.getEventStat()
this.getEvaluationTotal()
this.renderChart()
this.renderCharts()
}
// if (this.shibeiAId != '') {
this.getItemdailystatis()
this.getCategoryAnalysis()
this.getEventStat()
this.getEvaluationTotal()
this.renderChart()
this.renderCharts()
this.getResponseSixHoursTotal()
// }
}
}
},
@ -211,8 +212,8 @@ export default {
},
methods: {
async getEvaluationTotal(){
try {
async getEvaluationTotal() {
try {
let parm = {
endTime: "",
peopleFlag: "",// 1 2 3 4
@ -221,7 +222,9 @@ export default {
}
let { data, code, msg } = await getEvaluationTotal(parm)
if (code == 0) {
this.charData = []
this.charData = data
this.renderChart()
} else {
console.log(msg);
}
@ -229,6 +232,28 @@ export default {
console.log(err);
}
},
getResponseSixHoursTotal() {
this.buttonDisabled = true
this.showParas = []
this.noData = false
const params = {}
params.page = 1
params.limit = 50
params.startTime = ''
params.endTime = ''
params.deptId = this.shibeiAId || '1175270520603930625'
params.listType = '1'
// params.peopleFlag = this.appealValue
getResponseSixHoursTotal(params).then(res => {
this.ytalList = res.data.list
}).catch(err => {
this.buttonDisabled = false
console.log(err)
})
},
handleClickEvent(item){
this.$EventBus.$emit('handleClickEvent', item)
},
//
async getEventStat() {
try {
@ -242,7 +267,7 @@ export default {
if (code == 0) {
this.eventStatList = data
this.initList(data)
if(this.eventStatList.length === 0){
if (this.eventStatList.length === 0) {
this.noData = true
}
} else {
@ -285,6 +310,7 @@ export default {
}
let { data, code, msg } = await getItemdailystatis(parm)
if (code == 0) {
this.dataTotal = null
const idMap = {
0: 'pendingTotal',
1: 'processingTotal',
@ -503,7 +529,7 @@ export default {
},
initList(data) {
//
if(data.length === 0) return
if (data.length === 0) return
this.totalLivelihoodCount = data.reduce((sum, element) => {
return sum + element.livelihoodCount;
}, 0);
@ -511,8 +537,8 @@ export default {
this.developCountTotal = data.reduce((sum, element) => {
return sum + element.developCount;
}, 0);
//
this.lawCountCountTotal = data.reduce((sum, element) => {
//
this.lawCountCountTotal = data.reduce((sum, element) => {
return sum + element.lawCount;
}, 0);
this.eventStatList = data.map(element => [
@ -545,7 +571,9 @@ export default {
padding: 24px 0 0 24px;
}
}
.ytal-item{
cursor: pointer;
}
.flex {
display: flex;
font-size: 14px;

Loading…
Cancel
Save