10 changed files with 2011 additions and 625 deletions
@ -1,20 +1,20 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<router-view /> |
|||
</div> |
|||
<div id="app"> |
|||
<router-view /> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss"> |
|||
html, |
|||
body { |
|||
margin: 0; |
|||
padding: 0; |
|||
background: #d3d3d3; |
|||
margin: 0; |
|||
padding: 0; |
|||
background: #d3d3d3; |
|||
} |
|||
#app { |
|||
width: 100%; |
|||
height: 100vh; |
|||
// overflow: hidden; |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100vh; |
|||
// overflow: hidden; |
|||
position: relative; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,109 +1,109 @@ |
|||
<template> |
|||
<!-- <div class="shibei-screen-home" |
|||
<!-- <div class="shibei-screen-home" |
|||
:style="{ |
|||
width: width + 'px', |
|||
height: height + 'px', |
|||
transform: `scale(${shibeiScale}) translate(-50%, -50%)` |
|||
}"> --> |
|||
<!--屏幕调整--> |
|||
<div class="shibei-screen-home" |
|||
:style="{ |
|||
<!--屏幕调整--> |
|||
<!-- class="shibei-screen-home" |
|||
:style="{ |
|||
width: width + 'px', |
|||
height: height + 'px', |
|||
transform: `scale(0.6) ` |
|||
|
|||
}"> |
|||
<screen-header></screen-header> |
|||
<agency-select></agency-select> |
|||
<screen-content></screen-content> |
|||
<!-- <screen-content></screen-content> |
|||
}" --> |
|||
<div style="background-color: #052431;width: fit-content;"> |
|||
<screen-header></screen-header> |
|||
<agency-select></agency-select> |
|||
<screen-content></screen-content> |
|||
<!-- <screen-content></screen-content> |
|||
<project-box></project-box> --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
//屏幕调整 |
|||
import { debounce } from './../utils/common' |
|||
import screenHeader from './screenHeader' |
|||
import agencySelect from './agencySelect' |
|||
import screenContent from './screenContent' |
|||
import screenHeader from './screenHeader' |
|||
// import projectBox from './components/projectBox' |
|||
import { mapGetters, mapActions } from 'vuex' |
|||
import { mapActions, mapGetters } from 'vuex' |
|||
let width = 0 |
|||
let height = 0 |
|||
export default { |
|||
name: 'shibei-screen-home', |
|||
data () { |
|||
return { |
|||
width: 5760, |
|||
height: 1080 |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['shibeiScale']) |
|||
}, |
|||
components: { |
|||
screenHeader, |
|||
agencySelect, |
|||
screenContent, |
|||
// projectBox |
|||
}, |
|||
beforeRouteEnter (to, from, next) { |
|||
if (window.location.search) { |
|||
const totalArr = window.location.search.split('?')[1].split('&') |
|||
totalArr.forEach(item => { |
|||
if (item.indexOf('width') > -1) { |
|||
width = item.split('=')[1] |
|||
} else if (item.indexOf('height') > -1) { |
|||
height = item.split('=')[1] |
|||
name: 'shibei-screen-home', |
|||
data() { |
|||
return { |
|||
width: 5760, |
|||
height: 1080 |
|||
} |
|||
}) |
|||
} |
|||
next() |
|||
}, |
|||
created () { |
|||
if (width && height) { |
|||
this.width = width |
|||
this.height = height |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.setScale() |
|||
//屏幕调整 |
|||
// window.addEventListener('resize', debounce(this.setScale)) |
|||
}, |
|||
computed: { |
|||
...mapGetters(['shibeiScale']) |
|||
}, |
|||
components: { |
|||
screenHeader, |
|||
agencySelect, |
|||
screenContent, |
|||
// projectBox |
|||
}, |
|||
beforeRouteEnter(to, from, next) { |
|||
if (window.location.search) { |
|||
const totalArr = window.location.search.split('?')[1].split('&') |
|||
totalArr.forEach(item => { |
|||
if (item.indexOf('width') > -1) { |
|||
width = item.split('=')[1] |
|||
} else if (item.indexOf('height') > -1) { |
|||
height = item.split('=')[1] |
|||
} |
|||
}) |
|||
} |
|||
next() |
|||
}, |
|||
created() { |
|||
if (width && height) { |
|||
this.width = width |
|||
this.height = height |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.setScale() |
|||
//屏幕调整 |
|||
// window.addEventListener('resize', debounce(this.setScale)) |
|||
|
|||
}, |
|||
methods: { |
|||
...mapActions({ |
|||
set_shibeiScale: 'SET_SHIBEISCALE' |
|||
}), |
|||
// 获取缩放比 |
|||
getScale () { |
|||
const { width, height } = this |
|||
const ww = window.innerWidth / width |
|||
const wh = window.innerHeight / height |
|||
return ww < wh ? ww : wh |
|||
}, |
|||
// 设置缩放比 |
|||
setScale () { |
|||
this.set_shibeiScale(this.getScale()) |
|||
methods: { |
|||
...mapActions({ |
|||
set_shibeiScale: 'SET_SHIBEISCALE' |
|||
}), |
|||
// 获取缩放比 |
|||
getScale() { |
|||
const { width, height } = this |
|||
const ww = window.innerWidth / width |
|||
const wh = window.innerHeight / height |
|||
return ww < wh ? ww : wh |
|||
}, |
|||
// 设置缩放比 |
|||
setScale() { |
|||
this.set_shibeiScale(this.getScale()) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.shibei-screen-home { |
|||
box-sizing: border-box; |
|||
background-image: url("./../assets/icon/bc.png"); |
|||
background-size: 100% 100%; |
|||
position: absolute; |
|||
//屏幕调整 |
|||
// left: 50%; |
|||
// top: 50%; |
|||
left: -110%; |
|||
top: 10%; |
|||
transition: 0.2s; |
|||
transform-origin: 0 0; |
|||
box-sizing: border-box; |
|||
background-image: url("./../assets/icon/bc.png"); |
|||
background-size: 100% 100%; |
|||
position: absolute; |
|||
//屏幕调整 |
|||
left: 50%; |
|||
top: 50%; |
|||
left: -110%; |
|||
top: 10%; |
|||
transition: 0.2s; |
|||
transform-origin: 0 0; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,23 +1,879 @@ |
|||
<template> |
|||
<div class="screen-center"> |
|||
screen-left |
|||
</div> |
|||
<div class="screen-center"> |
|||
<div id="map" |
|||
style="height: 100%;width: 100%;position: relative;min-width:1000px"> |
|||
<div style="position: absolute;left:16%;top: 10px;cursor: pointer;z-index: 100;color: #fff;font-size: 40px;"> |
|||
<div style="display: flex;justify-content: space-around;flex-direction: row;width: 30vw;"> |
|||
<div v-for="item in topNum" |
|||
:key="item.value" |
|||
style="background-color: rgba(8, 31, 45, 0.6);padding: 30px;display: flex;flex-direction: column;align-items: center;"> |
|||
<div style="padding-bottom: 20px;"> |
|||
{{item.value&&getThousandth(item.value)}} |
|||
</div> |
|||
<div style="border-top: 5px solid #36acd3;padding-top: 20px;display: flex;align-items: center;white-space: nowrap;"> |
|||
<el-image style="height: 60px;" |
|||
:src="require('../../assets/shuline.png')" |
|||
fit="fill"></el-image> |
|||
{{item.label||"--" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div @click="initialization" |
|||
style="position: absolute;left: 100px;bottom: 100px;cursor: pointer;z-index: 100;"> |
|||
<el-image style="width: 50px; height: 50px;" |
|||
:src="require('../../assets/back.png')" |
|||
fit="fill"></el-image> |
|||
</div> |
|||
<div style="position: absolute;right:50px;bottom:50px;z-index: 100;border-radius: 16px;padding:20px; border: 1px solid #045775;font-size: 40px;color: #fff;height: 400px;display: flex;flex-direction: column;justify-content: space-around;" |
|||
v-if="layersIndex==3"> |
|||
<div v-for="item in buttonPiece" |
|||
:key="item.value" |
|||
style="display: flex;align-items: center;cursor: pointer;padding: 8px 0;" |
|||
@click="selectType(item.value,item.label)" |
|||
:style="{background: item.value==buttonIndex?'linear-gradient(to top, rgba(16, 98, 130,1), rgba(16, 98, 130,0))':''}"> |
|||
<el-image style="width: 40px; height: 40px;margin-right: 12px;" |
|||
:src="require('../../assets/ling.png')" |
|||
fit="fill"></el-image> |
|||
{{item.label}} |
|||
</div> |
|||
</div> |
|||
<div v-if="showFirst" |
|||
style="position: absolute;right:1200px;bottom:200px;z-index: 100;padding:20px;font-size: 40px;color: #fff;height: 500px;display: flex;flex-direction: column;justify-content:space-around;border-radius: 16px;padding:20px; border: 1px solid #045775;align-items: center;background-color: rgba(5, 36, 49,0.5);"> |
|||
<div style="margin-bottom: 24px;display: flex;justify-content: space-between;align-items: center;width: 100%;"> |
|||
<div> |
|||
|
|||
</div> |
|||
<div> |
|||
微网格信息 |
|||
</div> |
|||
<div style="color: #fff;cursor: pointer;" |
|||
@click="close"> |
|||
x |
|||
</div> |
|||
</div> |
|||
<div v-for="item in microgridArr" |
|||
:key="item.value" |
|||
style="display: flex;flex-direction: row;align-items: center;cursor: pointer;padding: 4px;" |
|||
@click="microgridDetails(item)" |
|||
:style="{background: item.value==microgridIndex?'linear-gradient(to right, rgba(16, 98, 130,1), rgba(16, 98, 130,0))':''}"> |
|||
<div style="margin-right:80px"> |
|||
<el-image style="width: 40px; height: 40px;margin-right: 12px;vertical-align: text-top;" |
|||
:src="require('../../assets/ling.png')" |
|||
fit="fill"></el-image> |
|||
{{ item.label }} |
|||
</div> |
|||
<div> |
|||
> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="showMicrogridDetails" |
|||
style="position: absolute;right:400px;bottom:100px;z-index: 100;padding:20px;font-size: 40px;color: #fff;height: auto;display: flex;flex-direction: column;border-radius: 16px;padding:20px; border: 1px solid #045775;background-color: rgba(7, 100, 133,0.5);"> |
|||
<div style="margin-bottom: 38px;"> |
|||
<div |
|||
style="background: linear-gradient(to right, rgba(6, 227, 218,1), rgba(6, 227, 218,0));display: flex;justify-content: space-between;flex-direction: row;padding: 12px;margin-bottom: 38px;"> |
|||
<div> |
|||
{{ microgridObj.firstTitle||"--" }} |
|||
</div> |
|||
<div style="color: #fff;cursor: pointer;" |
|||
@click="showMicrogridDetails=false"> |
|||
x |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div style="margin-bottom: 38px;"> |
|||
微网格长：{{microgridObj.leader}} |
|||
</div> |
|||
<div style="margin-bottom: 38px;"> |
|||
性别：{{microgridObj.gender}} |
|||
</div> |
|||
<div style="margin-bottom: 38px;"> |
|||
电话：{{microgridObj.phone}} |
|||
</div> |
|||
<div style="margin-bottom: 38px;"> |
|||
住址：{{microgridObj.address}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div |
|||
style="background: linear-gradient(to right, rgba(6, 227, 218,1), rgba(6, 227, 218,0));display: flex;justify-content: space-between;flex-direction: row;padding: 12px;margin-bottom: 38px;"> |
|||
<div> |
|||
{{ microgridObj.secondTitle||"--" }} |
|||
</div> |
|||
<div> |
|||
总数：{{ microgridObj.total||"--" }}户 |
|||
</div> |
|||
</div> |
|||
<div style="max-width: 700px;min-width: 700px;overflow-x: clip; text-overflow:ellipsis;white-space: nowrap;"> |
|||
<div v-for="item in microgridObj.list" |
|||
:key="item.value" |
|||
style="margin-bottom: 30px;cursor: pointer;" |
|||
:title="item.label"> |
|||
<span style="margin-right: 12px;"> |
|||
{{ item.value }} |
|||
</span> |
|||
<span> |
|||
{{ item.label }} |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div style="display: flex;justify-content: flex-end;"> |
|||
<el-pagination background |
|||
layout="prev, pager, next" |
|||
:total="microgridObj.total" |
|||
@current-change="handleCurrentChange"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import markIcon from "@/assets/position.png"; |
|||
import markIcons from "@/assets/positions.png"; |
|||
import * as turf from '@turf/turf'; |
|||
import axios from 'axios'; |
|||
import mapboxgl from 'mapbox-gl'; |
|||
import 'mapbox-gl/dist/mapbox-gl.css'; |
|||
import { mapGetters } from "vuex"; |
|||
const md5 = require('blueimp-md5'); |
|||
export default { |
|||
name: "screen-center", |
|||
data() { |
|||
return { |
|||
map: null, |
|||
colorList: ["#F84E2D", "#1372EC", "#44DEA3", "#FFC544", "#6C44FF"], |
|||
attrAndColor: [], |
|||
shibeiJson: null, |
|||
resolutions: [ |
|||
156543.03392800014, 78271.516963999937, 39135.758482000092, 19567.879240999919, |
|||
9783.9396204999593, 4891.9698102499797, 2445.9849051249898, 1222.9924525624949, 611.49622628137968, |
|||
305.74811314055756, 152.87405657041106, 76.437028285073239, 38.21851414253662, 19.10925707126831, |
|||
9.5546285356341549, 4.7773142679493699, 2.3886571339746849, 1.1943285668550503, 0.59716428355981721, |
|||
0.29858214164761665, 0.149291070823808325, 0.0746455354119041625 |
|||
], |
|||
hoveredStateId: null, |
|||
topNum: [ |
|||
{ |
|||
label: "用户总数", |
|||
value: 330195 |
|||
}, |
|||
{ |
|||
label: "党员总数", |
|||
value: 74830 |
|||
}, |
|||
{ |
|||
label: "党群总数", |
|||
value: 9501 |
|||
}, |
|||
{ |
|||
label: "话题总数", |
|||
value: 286508 |
|||
}, |
|||
{ |
|||
label: "议题总数", |
|||
value: 223829 |
|||
}, |
|||
{ |
|||
label: "诉求总数", |
|||
value: 215450 |
|||
} |
|||
], |
|||
buttonPiece: [ |
|||
{ |
|||
value: 1, |
|||
label: "居民" |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "房屋" |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "党支部" |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "用户" |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: "党员" |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: "事件" |
|||
} |
|||
], |
|||
buttonIndex: 0, |
|||
markerJson: null, |
|||
layersIndex: 1, |
|||
features: {}, |
|||
showFirst: false, |
|||
showMicrogridDetails: false, |
|||
microgridArr: [ |
|||
{ |
|||
value: 1, |
|||
label: "第一微网格" |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "第二微网格" |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "第三微网格" |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "第四微网格" |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: "第五微网格" |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: "第六微网格" |
|||
}, |
|||
], |
|||
microgridIndex: 0, |
|||
microgridObj: { |
|||
firstTitle: "", |
|||
leader: "张俊凯", |
|||
gender: "男", |
|||
phone: "15623523200", |
|||
address: "市北区", |
|||
secondTitle: "包干房屋", |
|||
total: 37, |
|||
list: [ |
|||
{ |
|||
value: 1, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "市北区敦化路53号4号楼2单元202" |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "市北区山东路168号时代国际广场1402号" |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "市北区山东路120号玫瑰花园6号楼3单元506" |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: "市北区南宁路32号2单元501" |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 10, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 11, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 12, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 13, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 14, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 15, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 16, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 17, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 18, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 19, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 20, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
] |
|||
}, |
|||
microgridObjCopy: { |
|||
firstTitle: "", |
|||
leader: "张俊凯", |
|||
gender: "男", |
|||
phone: "15623523200", |
|||
address: "市北区", |
|||
secondTitle: "包干房屋", |
|||
total: 37, |
|||
list: [ |
|||
{ |
|||
value: 1, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 2, |
|||
label: "市北区敦化路53号4号楼2单元202" |
|||
}, |
|||
{ |
|||
value: 3, |
|||
label: "市北区山东路168号时代国际广场1402号" |
|||
}, |
|||
{ |
|||
value: 4, |
|||
label: "市北区山东路120号玫瑰花园6号楼3单元506" |
|||
}, |
|||
{ |
|||
value: 5, |
|||
label: "市北区南宁路32号2单元501" |
|||
}, |
|||
{ |
|||
value: 6, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 7, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 8, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 9, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 10, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 11, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 12, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 13, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 14, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 15, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 16, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 17, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 18, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 19, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
{ |
|||
value: 20, |
|||
label: "市北区台柳路12号4单元101" |
|||
}, |
|||
] |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.shibeiJson = require('./shibei.json'); |
|||
this.markerJson = require('./markerJson.json'); |
|||
this.init() |
|||
this.microgridObj.list = JSON.parse(JSON.stringify(this.microgridObjCopy.list)).slice(0, 5) |
|||
}, |
|||
computed: { |
|||
...mapGetters(['shibeiAId', 'shibeiName', 'shibeiAgencyType']), |
|||
getThousandth() { |
|||
return function (val) { |
|||
if (!val) { |
|||
return "--" |
|||
} |
|||
return val.toLocaleString() |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
shibeiAId(value) { |
|||
this.topNum.forEach((f, i, arr) => { |
|||
arr[i]["value"] = f.value - 1000 |
|||
}) |
|||
} |
|||
}, |
|||
methods: { |
|||
init() { |
|||
// 初始化map对象，加载天地图底图 |
|||
mapboxgl.accessToken = "pk.eyJ1IjoiZGp4YyIsImEiOiJjanlxdzNlbW0wNHNyM29yMzZibHczOHlpIn0.TOUXgB6IHHhnmA6RsL6pWw"; |
|||
this.map = new mapboxgl.Map({ |
|||
container: 'map', // container id |
|||
center: [120.38140448734, 36.11044959486], // starting position [lng, lat] |
|||
zoom: 12.5, // starting zoom |
|||
// maxZoom: 12.5, // 22 |
|||
// minZoom: 9, |
|||
bearing: 0, |
|||
pitch: 40, |
|||
style: { |
|||
version: 8, |
|||
sources: {}, |
|||
glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", |
|||
layers: [] |
|||
} |
|||
}); |
|||
const _this = this; |
|||
this.map.on('load', function () { |
|||
_this.getPolygonJson(_this.shibeiJson) |
|||
_this.map.on('mousemove', 'shibeiPolygonLayer', function (e) { |
|||
_this.map.getCanvas().style.cursor = 'pointer'; // 鼠标样式 |
|||
|
|||
}); |
|||
_this.map.on("click", "shibeiPolygonLayer", function (e) { |
|||
const features = _this.map.queryRenderedFeatures(e.point); |
|||
if (features.length > 0) { |
|||
_this.features = features[0] |
|||
if (features[0]["properties"]["type"] && features[0]["properties"]["type"] == "marker") { |
|||
_this.makeMarker(features[0]) |
|||
return |
|||
} |
|||
if (features[0]["properties"]["name"].indexOf("网格") != -1) { |
|||
return |
|||
} |
|||
_this.getBoundary(features[0]["properties"]["adcode"] || features[0]["properties"]["subId"]) |
|||
|
|||
export default { |
|||
name: "screen-center", |
|||
data () { |
|||
return { |
|||
_this.map.setZoom(13.5) |
|||
_this.map.setCenter(features[0]["geometry"]["coordinates"][0][0]) |
|||
|
|||
if (_this.map.getLayer("shibeiPolygonLayer")) { |
|||
_this.map.removeLayer("shibeiPolygonLayer") |
|||
_this.map.removeLayer("text_JSON_layer") |
|||
_this.map.removeSource("shibeiPolygonSource") |
|||
} |
|||
if (_this.map.getLayer("SinglePolygonLayer")) { |
|||
_this.map.removeLayer("SinglePolygonLayer") |
|||
_this.map.removeLayer("SingleTextLayer") |
|||
_this.map.removeSource("SinglePolygonSource") |
|||
} |
|||
for (let i = 8; i <= 18; i++) { |
|||
if (_this.map.getLayer("lineBufferLayer-" + i)) { |
|||
_this.map.removeLayer("lineBufferLayer-" + i) |
|||
_this.map.removeSource("lineBufferSource-" + i) |
|||
} |
|||
} |
|||
} |
|||
// _this.addSinglePolygon(features[0]) |
|||
}); |
|||
// 鼠标移入要素时的高亮效果 |
|||
// _this.map.on('mousemove', 'shibeiPolygonLayer', function (e) { |
|||
// _this.map.getCanvas().style.cursor = 'pointer'; // 鼠标样式 |
|||
// if (_this.map.getLayer("heightPolygonLayer")) { |
|||
// _this.map.removeLayer("heightPolygonLayer") |
|||
// _this.map.removeSource("heightPolygonSource") |
|||
// } |
|||
// let feature = e.features[0]; |
|||
// _this.addHeightPolygon(feature) |
|||
// }); |
|||
// _this.map.on('mouseleave', 'shibeiPolygonLayer', function (e) { |
|||
// if (_this.map.getLayer("heightPolygonLayer")) { |
|||
// _this.map.removeLayer("heightPolygonLayer") |
|||
// _this.map.removeSource("heightPolygonSource") |
|||
// } |
|||
// }); |
|||
}) |
|||
}, |
|||
getPolygonJson(obj) { |
|||
let shibeiPolyline = JSON.parse(JSON.stringify(obj)) |
|||
for (let i = 0; i < shibeiPolyline.features.length; i++) { |
|||
shibeiPolyline.features[i].geometry.type = 'MultiLineString' //面转线 |
|||
shibeiPolyline.features[i].geometry.coordinates = this.convertPolygonToPolyline(shibeiPolyline.features[ |
|||
i].geometry.coordinates) |
|||
} |
|||
|
|||
this.addPolygon(obj) |
|||
this.addPolyline(shibeiPolyline) |
|||
|
|||
}, |
|||
convertPolygonToPolyline(MultiPolygon) { |
|||
let MultiLineString = [] |
|||
MultiPolygon.forEach(Polygon => { |
|||
Polygon.forEach(LinearRing => { |
|||
let LineString = LinearRing |
|||
MultiLineString.push(LineString) |
|||
}) |
|||
}); |
|||
return MultiLineString |
|||
}, |
|||
addPolygon(geojson) { |
|||
this.map.addSource('shibeiPolygonSource', { |
|||
'type': 'geojson', |
|||
'data': geojson |
|||
}); |
|||
|
|||
this.map.addLayer({ |
|||
'id': 'shibeiPolygonLayer', |
|||
'type': 'fill-extrusion', |
|||
'source': 'shibeiPolygonSource', |
|||
'paint': { |
|||
'fill-extrusion-vertical-gradient': true, |
|||
'fill-extrusion-color': "#1d597b", |
|||
'fill-extrusion-height': 300, |
|||
'fill-extrusion-base': 0, |
|||
'fill-extrusion-opacity': 1 |
|||
} |
|||
}); |
|||
this.map.addLayer({ |
|||
id: "text_JSON_layer", |
|||
type: "symbol", |
|||
source: "shibeiPolygonSource", |
|||
// minzoom: 5, |
|||
// maxzoom: 22, |
|||
interactive: true, |
|||
paint: { |
|||
'text-color': '#fff', |
|||
}, |
|||
"layout": { |
|||
"text-field": "{name}", |
|||
'text-size': 40 |
|||
} |
|||
}); |
|||
}, |
|||
addSinglePolygon(geojson) { |
|||
this.map.addSource('SinglePolygonSource', { |
|||
'type': 'geojson', |
|||
'data': geojson |
|||
}); |
|||
|
|||
this.map.addLayer({ |
|||
'id': 'SinglePolygonLayer', |
|||
'type': 'fill-extrusion', |
|||
'source': 'SinglePolygonSource', |
|||
'paint': { |
|||
'fill-extrusion-vertical-gradient': true, |
|||
'fill-extrusion-color': "#1d597b", |
|||
'fill-extrusion-height': 300, |
|||
'fill-extrusion-base': 0, |
|||
'fill-extrusion-opacity': 1 |
|||
} |
|||
}); |
|||
this.map.addLayer({ |
|||
id: "SingleTextLayer", |
|||
type: "symbol", |
|||
source: "SinglePolygonSource", |
|||
// minzoom: 5, |
|||
// maxzoom: 22, |
|||
interactive: true, |
|||
paint: { |
|||
'text-color': '#fff', |
|||
}, |
|||
"layout": { |
|||
"text-field": "{name}", |
|||
'text-size': 40 |
|||
} |
|||
}); |
|||
}, |
|||
addHeightPolygon(geojson) { |
|||
this.map.addSource('heightPolygonSource', { |
|||
'type': 'geojson', |
|||
'data': geojson |
|||
}); |
|||
this.map.addLayer({ |
|||
'id': 'heightPolygonLayer', |
|||
'type': 'fill-extrusion', |
|||
'source': 'heightPolygonSource', |
|||
'paint': { |
|||
'fill-extrusion-vertical-gradient': true, |
|||
'fill-extrusion-color': "#b3b817", |
|||
'fill-extrusion-height': 300, |
|||
'fill-extrusion-base': 0, |
|||
'fill-extrusion-opacity': 1 |
|||
}, |
|||
}); |
|||
}, |
|||
addPolyline(geojson) { |
|||
// 8 ~ 18 级 |
|||
for (let i = 8; i <= 18; i++) { |
|||
let radius = 1 * this.resolutions[i + 1] // 2个像素，缓冲后4个像素 |
|||
let lineBuffer = turf.buffer(geojson, radius, { |
|||
units: 'meters' |
|||
}); |
|||
this.map.addSource('lineBufferSource-' + i, { |
|||
'type': 'geojson', |
|||
'data': lineBuffer |
|||
}); |
|||
this.map.addLayer({ |
|||
'id': 'lineBufferLayer-' + i, |
|||
'type': 'fill-extrusion', |
|||
'source': 'lineBufferSource-' + i, |
|||
"minzoom": (i - 1), |
|||
"maxzoom": (i + 1), |
|||
'paint': { |
|||
'fill-extrusion-vertical-gradient': true, |
|||
'fill-extrusion-color': '#4bbdd8', |
|||
'fill-extrusion-height': 310, // 挤出高度 |
|||
'fill-extrusion-base': 300,// 底部的高度。必须小于或等于挤出高度 |
|||
'fill-extrusion-opacity': 0.3 |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
initialization() { |
|||
if (this.map.getLayer("shibeiPolygonLayer")) { |
|||
this.map.removeLayer("shibeiPolygonLayer") |
|||
this.map.removeLayer("text_JSON_layer") |
|||
this.map.removeSource("shibeiPolygonSource") |
|||
} |
|||
if (this.map.getLayer("SinglePolygonLayer")) { |
|||
this.map.removeLayer("SinglePolygonLayer") |
|||
this.map.removeLayer("SingleTextLayer") |
|||
this.map.removeSource("SinglePolygonSource") |
|||
} |
|||
for (let i = 8; i <= 18; i++) { |
|||
if (this.map.getLayer("lineBufferLayer-" + i)) { |
|||
this.map.removeLayer("lineBufferLayer-" + i) |
|||
this.map.removeSource("lineBufferSource-" + i) |
|||
} |
|||
} |
|||
if (this.map.getLayer("pointDimensions")) { |
|||
this.map.removeLayer("pointDimensions") |
|||
this.map.removeSource("pointDimensions") |
|||
this.map.removeImage("markIcons") |
|||
} |
|||
if (this.map.getLayer("pointDimension")) { |
|||
this.map.removeLayer("pointDimension") |
|||
this.map.removeSource("pointDimension") |
|||
this.map.removeImage("markIcon") |
|||
} |
|||
this.layersIndex = 1 |
|||
this.buttonIndex = 0 |
|||
this.getPolygonJson(this.shibeiJson) |
|||
this.map.setZoom(12.5) |
|||
this.map.setCenter([120.38140448734, 36.11044959486]) |
|||
}, |
|||
selectType(value, label) { |
|||
if (value === this.buttonIndex) { |
|||
this.buttonIndex = 0 |
|||
this.makeMarkers(this.markerJson) |
|||
return |
|||
} |
|||
this.buttonIndex = value |
|||
let json = { |
|||
"type": "FeatureCollection", |
|||
"features": JSON.parse(JSON.stringify(this.markerJson.features)).filter(f => { |
|||
return f.properties.name == label |
|||
}) |
|||
} |
|||
this.makeMarkers(json) |
|||
}, |
|||
getBoundary(id) { |
|||
|
|||
const ts = Date.now(); |
|||
let signConfig = { |
|||
key: '612d304095c50369c3ef06e490f05779eeb8f19ff16566c73aeafafc5fa01970', |
|||
dataType: 'real', |
|||
appId: 'acc4ad66c82a7b46e741364b4c62dce2', |
|||
customerId: 'b09527201c4409e19d1dbc5e3c3429a1', |
|||
authType: 'md5', |
|||
} |
|||
const token = md5(`${signConfig.key}:${ts}`); |
|||
axios({ |
|||
method: "post", |
|||
url: "https://epmet-open.elinkservice.cn/api/data/report/screen/agency/compartment", |
|||
data: { |
|||
agencyId: id |
|||
}, |
|||
headers: { |
|||
AccessToken: token, |
|||
AppId: signConfig.appId, |
|||
CustomerId: signConfig.customerId, |
|||
AuthType: signConfig.authType, |
|||
ts |
|||
} |
|||
}).then(e => { |
|||
if (e.data.code == 0 && e.data.data) { |
|||
if (e.data.data.agencyDistribution && e.data.data.agencyDistribution.length == 0) { |
|||
return |
|||
} |
|||
if (this.map.getLayer("shibeiPolygonLayer")) { |
|||
this.map.removeLayer("shibeiPolygonLayer") |
|||
this.map.removeLayer("text_JSON_layer") |
|||
this.map.removeSource("shibeiPolygonSource") |
|||
} |
|||
if (this.map.getLayer("SinglePolygonLayer")) { |
|||
this.map.removeLayer("SinglePolygonLayer") |
|||
this.map.removeLayer("SingleTextLayer") |
|||
this.map.removeSource("SinglePolygonSource") |
|||
} |
|||
for (let i = 8; i <= 18; i++) { |
|||
if (this.map.getLayer("lineBufferLayer-" + i)) { |
|||
this.map.removeLayer("lineBufferLayer-" + i) |
|||
this.map.removeSource("lineBufferSource-" + i) |
|||
} |
|||
} |
|||
let obj = { |
|||
type: "FeatureCollection", |
|||
name: "index", |
|||
features: e.data.data.agencyDistribution |
|||
} |
|||
obj.features.forEach(f => { |
|||
f.type = "Feature" |
|||
f.properties = {} |
|||
f.geometry = {} |
|||
f.properties.subId = f.subId || "" |
|||
f.properties.name = f.subName || "" |
|||
f.geometry.type = "MultiPolygon" |
|||
f.geometry.coordinates = [[JSON.parse(f.subAreaMarks)]] || [] |
|||
delete f.agencyLevel |
|||
delete f.subAreaMarks |
|||
delete f.subCenterMark |
|||
delete f.subId |
|||
delete f.subName |
|||
}) |
|||
this.getPolygonJson(obj) |
|||
|
|||
if (this.features["properties"]["name"].indexOf("社区") != -1) { |
|||
this.selectType(0, "") |
|||
this.layersIndex = 3 |
|||
} |
|||
} |
|||
}).catch(f => { |
|||
console.log(f); |
|||
}) |
|||
}, |
|||
makeMarkers(json) { |
|||
const _this = this; |
|||
if (_this.map.getLayer("pointDimension")) { |
|||
_this.map.removeLayer("pointDimension") |
|||
_this.map.removeSource("pointDimension") |
|||
_this.map.removeImage("markIcon") |
|||
} |
|||
_this.map.loadImage(markIcon, function (error, image) { |
|||
_this.map.addImage("markIcon", image); |
|||
_this.map.addSource("pointDimension", { |
|||
type: "geojson" /* geojson类型资源 */, |
|||
data: json |
|||
}); |
|||
|
|||
_this.map.addLayer({ |
|||
id: "pointDimension", |
|||
type: "symbol" /* symbol类型layer，一般用来绘制点*/, |
|||
source: "pointDimension", |
|||
layout: { |
|||
"icon-image": "markIcon", |
|||
"icon-size": 2, |
|||
}, |
|||
// paint: { |
|||
// "circle-radius": 4, |
|||
// "circle-color": "#B42222" |
|||
// } |
|||
}); |
|||
_this.layersIndex = 3 |
|||
}); |
|||
}, |
|||
makeMarker(json) { |
|||
const _this = this; |
|||
if (_this.map.getLayer("pointDimensions")) { |
|||
_this.map.removeLayer("pointDimensions") |
|||
_this.map.removeSource("pointDimensions") |
|||
_this.map.removeImage("markIcons") |
|||
} |
|||
_this.showFirst = true |
|||
_this.map.loadImage(markIcons, function (error, image) { |
|||
_this.map.addImage("markIcons", image); |
|||
_this.map.addSource("pointDimensions", { |
|||
type: "geojson" /* geojson类型资源 */, |
|||
data: json |
|||
}); |
|||
|
|||
_this.map.addLayer({ |
|||
id: "pointDimensions", |
|||
type: "symbol" /* symbol类型layer，一般用来绘制点*/, |
|||
source: "pointDimensions", |
|||
layout: { |
|||
"icon-image": "markIcons", |
|||
"icon-size": 2, |
|||
}, |
|||
// paint: { |
|||
// "circle-radius": 4, |
|||
// "circle-color": "#B42222" |
|||
// } |
|||
}); |
|||
}); |
|||
}, |
|||
microgridDetails(item) { |
|||
this.showMicrogridDetails = true |
|||
this.microgridIndex = item.value |
|||
this.microgridObj.firstTitle = item.label |
|||
}, |
|||
close() { |
|||
this.showFirst = false |
|||
this.showMicrogridDetails = false |
|||
}, |
|||
handleCurrentChange(e) { |
|||
let times = 5 |
|||
this.microgridObj.list = JSON.parse(JSON.stringify(this.microgridObjCopy.list)).slice(e * times - times, e * times) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.screen-center { |
|||
flex: 1; |
|||
min-width: 1000px; |
|||
} |
|||
::v-deep .mapboxgl-ctrl { |
|||
display: none !important; |
|||
} |
|||
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
background-color: #0aabca; |
|||
} |
|||
</style> |
|||
@ -1,119 +1,119 @@ |
|||
<template> |
|||
<div id="screen-header" |
|||
class="m-header"> |
|||
<div class="subtitle-left"> |
|||
<img src="./../assets/icon/subtitle.png" /> |
|||
<span class="subtitle-span">党建引领</span> |
|||
</div> |
|||
<div class="main-title"> |
|||
<div id="screen-header" |
|||
class="m-header"> |
|||
<div class="subtitle-left"> |
|||
<img src="./../assets/icon/subtitle.png" /> |
|||
<span class="subtitle-span">党建引领</span> |
|||
</div> |
|||
<div class="main-title"> |
|||
|
|||
<img class="title-img" |
|||
:src="titleImg" /> |
|||
<img class="title-img" |
|||
:src="titleImg" /> |
|||
|
|||
<span class="title-span">党建引领基层治理大数据</span> |
|||
</div> |
|||
<span class="title-span">党建引领基层治理大数据</span> |
|||
</div> |
|||
|
|||
<div class="subtitle-right1"> |
|||
<img src="./../assets/icon/subtitle.png" /> |
|||
<span class="subtitle-span">基层治理</span> |
|||
</div> |
|||
<div class="subtitle-right2"> |
|||
<img src="./../assets/icon/subtitle.png" /> |
|||
<span class="subtitle-span">北尚诉办</span> |
|||
</div> |
|||
<div class="subtitle-right1"> |
|||
<img src="./../assets/icon/subtitle.png" /> |
|||
<span class="subtitle-span">基层治理</span> |
|||
</div> |
|||
<div class="subtitle-right2"> |
|||
<img src="./../assets/icon/subtitle.png" /> |
|||
<span class="subtitle-span">北尚诉办</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { debounce } from './../utils/common' |
|||
export default { |
|||
name: 'screen-header', |
|||
data () { |
|||
return { |
|||
titleImg: require('./../assets/icon/title.png'), |
|||
imgWidth: 2110, |
|||
imgHeight: 120, |
|||
scale: 1 |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.setScale() |
|||
window.addEventListener('resize', debounce(this.setScale)) |
|||
}, |
|||
methods: { |
|||
getScale () { |
|||
const oHeader = document.querySelector('#screen-header') |
|||
const vh = oHeader.clientHeight / this.imgHeight |
|||
const vw = oHeader.clientWidth / this.imgWidth |
|||
return vh < vw ? vw : vh |
|||
name: 'screen-header', |
|||
data() { |
|||
return { |
|||
titleImg: require('./../assets/icon/title.png'), |
|||
imgWidth: 2110, |
|||
imgHeight: 120, |
|||
scale: 1 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.setScale() |
|||
window.addEventListener('resize', debounce(this.setScale)) |
|||
}, |
|||
setScale () { |
|||
this.scale = this.getScale() |
|||
methods: { |
|||
getScale() { |
|||
const oHeader = document.querySelector('#screen-header') |
|||
const vh = oHeader.clientHeight / this.imgHeight |
|||
const vw = oHeader.clientWidth / this.imgWidth |
|||
return vh < vw ? vw : vh |
|||
}, |
|||
setScale() { |
|||
this.scale = this.getScale() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
img { |
|||
width: 100%; |
|||
height: 100%; |
|||
float: left; |
|||
width: 100%; |
|||
height: 100%; |
|||
float: left; |
|||
} |
|||
.m-header { |
|||
display: flex; |
|||
display: flex; |
|||
} |
|||
.main-title { |
|||
margin-left: 499px; |
|||
position: relative; |
|||
margin-left: 15vw; |
|||
position: relative; |
|||
|
|||
.title-img { |
|||
width: 2110px; |
|||
height: 120px; |
|||
} |
|||
.title-span { |
|||
font-size: 46px; |
|||
font-family: "HYZongYiJ"; |
|||
color: #ffffff; |
|||
letter-spacing: 8px; |
|||
.title-img { |
|||
width: 2110px; |
|||
height: 120px; |
|||
} |
|||
.title-span { |
|||
font-size: 46px; |
|||
font-family: "HYZongYiJ"; |
|||
color: #ffffff; |
|||
letter-spacing: 8px; |
|||
|
|||
position: absolute; |
|||
left: 50%; |
|||
top: 35%; |
|||
transform-origin: 0 0; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 35%; |
|||
transform-origin: 0 0; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
|
|||
.subtitle-left, |
|||
.subtitle-right1, |
|||
.subtitle-right2 { |
|||
width: 788px; |
|||
height: 60px; |
|||
position: relative; |
|||
width: 788px; |
|||
height: 60px; |
|||
position: relative; |
|||
|
|||
.subtitle-span { |
|||
font-size: 32px; |
|||
font-family: "Alibaba-PuHuiTi-Bold"; |
|||
background: linear-gradient(0deg, #93c8ff 0%, #ffffff 77.4658203125%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
.subtitle-span { |
|||
font-size: 32px; |
|||
font-family: "Alibaba-PuHuiTi-Bold"; |
|||
background: linear-gradient(0deg, #93c8ff 0%, #ffffff 77.4658203125%); |
|||
-webkit-background-clip: text; |
|||
-webkit-text-fill-color: transparent; |
|||
|
|||
position: absolute; |
|||
left: 50%; |
|||
top: 40%; |
|||
transform-origin: 0 0; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 40%; |
|||
transform-origin: 0 0; |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
} |
|||
.subtitle-left { |
|||
margin-left: 565px; |
|||
margin-left: 565px; |
|||
} |
|||
.subtitle-right1 { |
|||
margin-left: 111px; |
|||
margin-left: 111px; |
|||
} |
|||
.subtitle-right2 { |
|||
margin-left: 176px; |
|||
margin-left: 176px; |
|||
} |
|||
</style> |
|||
|
|||
@ -1,434 +1,548 @@ |
|||
<template> |
|||
<div class="bg-content left1"> |
|||
<div class='b-dlzz'> |
|||
<screen-title :titleName="'动力主轴'"></screen-title> |
|||
<div class="dlzz-tree"></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="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 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-dyfc'> |
|||
<screen-title :titleName="'党员风采'"></screen-title> |
|||
<div class="b-dyfc-scroll" |
|||
v-on:mouseover="onHover($event)" |
|||
v-on:mouseout="onHover"> |
|||
<div style="overflow: hidden"> |
|||
<screen-popup bottom="80px" |
|||
left="120px" |
|||
height="300px" |
|||
width="500px" |
|||
:showContent="showContent" |
|||
:visible.sync="popupVisible"> |
|||
</screen-popup> |
|||
<vue-seamless-scroll :class-option="optionHover" |
|||
:data="dyfcList"> |
|||
<div class="dyfc-main"> |
|||
<div class="dyfc-item" |
|||
v-for="(item,index) in dyfcList" |
|||
:key="'dyfc'+index"> |
|||
|
|||
<img src="./../../assets/icon/dyfc1.png" /> |
|||
<div class="dyfc-item-row1"> |
|||
<div class="item-name">{{item.name}}</div> |
|||
<div class="item-type">{{item.categoryName}}</div> |
|||
</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="dyfc-item-row2">{{item.gridName}}</div> |
|||
|
|||
<div class="dyfc-item-row3" |
|||
:data-obj="JSON.stringify(item)" |
|||
:id="index+1">{{item.mainDeed}} |
|||
<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> |
|||
|
|||
</vue-seamless-scroll> |
|||
</div> |
|||
<div class='b-dyfc'> |
|||
<screen-title :titleName="'党员风采'"></screen-title> |
|||
<div class="b-dyfc-scroll" |
|||
v-on:mouseover="onHover($event)" |
|||
v-on:mouseout="onHover"> |
|||
<div style="overflow: hidden"> |
|||
<screen-popup bottom="80px" |
|||
left="120px" |
|||
height="300px" |
|||
width="500px" |
|||
:showContent="showContent" |
|||
:visible.sync="popupVisible"> |
|||
</screen-popup> |
|||
<vue-seamless-scroll :class-option="optionHover" |
|||
:data="dyfcList"> |
|||
<div class="dyfc-main"> |
|||
<div class="dyfc-item" |
|||
v-for="(item,index) in dyfcList" |
|||
:key="'dyfc'+index"> |
|||
|
|||
<img src="./../../assets/icon/dyfc1.png" /> |
|||
<div class="dyfc-item-row1"> |
|||
<div class="item-name">{{item.name}}</div> |
|||
<div class="item-type">{{item.categoryName}}</div> |
|||
</div> |
|||
<div class="dyfc-item-row2">{{item.gridName}}</div> |
|||
|
|||
<div class="dyfc-item-row3" |
|||
:data-obj="JSON.stringify(item)" |
|||
:id="index+1">{{item.mainDeed}} |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</vue-seamless-scroll> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
<el-dialog :visible.sync="ifShowDlzz" |
|||
width="90%" |
|||
:modal="false"> |
|||
<div style="color: #fff;display: flex; align-items: center; |
|||
justify-content: center;flex-direction: column;"> |
|||
<div class="first" |
|||
@click="NodeClick(null,{label:'市北区委'})"> |
|||
<el-image style="width: 80px; height: 60px;margin-right: 8px;" |
|||
:src="require('../../assets/images/hq.png')"></el-image> |
|||
{{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> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { getOrgTree } from "api/index" |
|||
import { mapGetters } from 'vuex' |
|||
import { getDyfcList } from 'api/index' |
|||
|
|||
export default { |
|||
name: "screen-left1", |
|||
data () { |
|||
return { |
|||
lyxz: { |
|||
title: '楼院党小组', |
|||
num: 32 |
|||
}, |
|||
dyzx: { |
|||
title: '党员中心户', |
|||
num: 187 |
|||
}, |
|||
dqff: { |
|||
title: '党群服务中心', |
|||
num: 32 |
|||
}, |
|||
yz: { |
|||
title: '驿站总数', |
|||
num: 45 |
|||
}, |
|||
|
|||
|
|||
//党员风采 |
|||
optionHover: { |
|||
step: 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 |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['shibeiAId']) |
|||
}, |
|||
|
|||
created () { |
|||
this.getDyfcList() |
|||
}, |
|||
|
|||
watch: { |
|||
shibeiAId: { |
|||
handler () { |
|||
if (this.shibeiAId != '') { |
|||
this.getDyfcList() |
|||
name: "screen-left1", |
|||
data() { |
|||
return { |
|||
lyxz: { |
|||
title: '楼院党小组', |
|||
num: 32 |
|||
}, |
|||
dyzx: { |
|||
title: '党员中心户', |
|||
num: 187 |
|||
}, |
|||
dqff: { |
|||
title: '党群服务中心', |
|||
num: 32 |
|||
}, |
|||
yz: { |
|||
title: '驿站总数', |
|||
num: 45 |
|||
}, |
|||
|
|||
|
|||
//党员风采 |
|||
optionHover: { |
|||
step: 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: {}, |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapGetters(['shibeiAId']) |
|||
}, |
|||
|
|||
created() { |
|||
this.getDyfcList() |
|||
}, |
|||
|
|||
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" |
|||
} |
|||
], |
|||
} |
|||
|
|||
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 |
|||
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" |
|||
} |
|||
], |
|||
} |
|||
|
|||
} else if (e.target.className === 'screen-popup-content') { |
|||
this.popupVisible = true |
|||
} else { |
|||
this.popupVisible = false |
|||
} |
|||
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 |
|||
} else { |
|||
this.popupVisible = false |
|||
} |
|||
|
|||
|
|||
|
|||
}, |
|||
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() |
|||
|
|||
}, |
|||
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() |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.left1 { |
|||
margin-right: 12px; |
|||
margin-right: 12px; |
|||
|
|||
.b-dlzz { |
|||
margin-top: 5px; |
|||
box-sizing: border-box; |
|||
height: 618px; |
|||
.b-dlzz { |
|||
margin-top: 5px; |
|||
box-sizing: border-box; |
|||
height: 618px; |
|||
|
|||
.dlzz-tree { |
|||
height: 484px; |
|||
} |
|||
|
|||
.dlzz-static { |
|||
background: linear-gradient( |
|||
0deg, |
|||
rgba(0, 204, 211, 0.38) 0%, |
|||
rgba(10, 218, 234, 0) 100% |
|||
); |
|||
|
|||
box-sizing: border-box; |
|||
padding: 14px 24px 16px 17px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
&-item { |
|||
display: flex; |
|||
.item-img { |
|||
height: 50px; |
|||
width: 50px; |
|||
.dlzz-tree { |
|||
height: 484px; |
|||
background-color: #03364b; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
.dlzz-static { |
|||
background: #03364b; |
|||
|
|||
.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; |
|||
} |
|||
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-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; |
|||
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; |
|||
} |
|||
.b-dyfc { |
|||
box-sizing: border-box; |
|||
margin-top: 8px; |
|||
margin-left: 1px; |
|||
|
|||
.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; |
|||
&-scroll { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
-webkit-line-clamp: 2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
// &-row3:hover { |
|||
// overflow: visible; |
|||
// } |
|||
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; |
|||
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; |
|||
// } |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.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; |
|||
} |
|||
::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; |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,59 +1,471 @@ |
|||
<template> |
|||
<div class="bg-content right3"> |
|||
<div class='b-row1'> |
|||
<div b-sjtj> |
|||
<screen-title :titleName="'数据统计'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
</div> |
|||
<div b-myd> |
|||
<screen-title :titleName="'满意度'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
</div> |
|||
</div> |
|||
<div class='b-row2'> |
|||
<div b-sjlx> |
|||
<screen-title :titleName="'事件类型分析'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
</div> |
|||
<div b-dxal> |
|||
<screen-title :titleName="'典型案例'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
</div> |
|||
</div> |
|||
<div class='b-hztj'> |
|||
<screen-title :titleName="'汇总统计'"></screen-title> |
|||
<div class="bg-content right3"> |
|||
<div class='b-row1'> |
|||
<div b-sjtj> |
|||
<screen-title :titleName="'数据统计'" |
|||
style="width:310px" |
|||
:type="'short'" |
|||
:ifShowDropdown="true"></screen-title> |
|||
<div class="dataStatistics"> |
|||
<div> |
|||
<div style="display: flex;"> |
|||
<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;"> |
|||
{{format(dataTotal)}} |
|||
</div> |
|||
<div style="font-size: 16px;">总数</div> |
|||
</div> |
|||
</div> |
|||
<div> |
|||
<div style="display: flex;flex-direction: row;width: 100%;flex-wrap: wrap;justify-content: space-between;"> |
|||
<div v-for="item in type" |
|||
:key="item.id" |
|||
style="width: 33%;display: flex;margin-bottom: 18px;"> |
|||
|
|||
<div :style="{width: '8px',height: '8px',backgroundColor:item.color,margin:'8px 8px 0 0'}"></div> |
|||
<div> |
|||
<div> |
|||
<span style="color:#188ab3;font-size: 18px;">{{ item.title }}</span> |
|||
</div> |
|||
<div style="color: #fff;font-size: 20px;"> |
|||
{{format(item.num ) }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div b-myd> |
|||
<screen-title :titleName="'满意度'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
<div class="Satisfaction"> |
|||
<div style="width: 290px;height: 290px;" |
|||
ref="chart"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class='b-row2'> |
|||
<div b-sjlx> |
|||
<screen-title :titleName="'事件类型分析'" |
|||
style="width:310px" |
|||
:type="'short'"></screen-title> |
|||
<div class="Satisfaction"> |
|||
<div style="width: 290px;height: 290px;" |
|||
ref="charts"></div> |
|||
</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-line"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class='b-hztj'> |
|||
<screen-title :titleName="'汇总统计'"></screen-title> |
|||
<div class="table"> |
|||
<screen-custom-table :headerColor="'#BDE8FF'" |
|||
:headerHeight="'36px'" |
|||
:bodyTdColor="'#FFFFFF'" |
|||
:bodyTdFontSize="'18px'" |
|||
:tableHeight="104" |
|||
:showTableLine="true" |
|||
:dataList="dataListResult" |
|||
:isChangeColor=false |
|||
:rowColor="'rgba(11,68,135,0.16)'" |
|||
:noData="noData" |
|||
:pageSize="pageSize" |
|||
:headerList="headerList"> |
|||
</screen-custom-table> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import * as echarts from 'echarts'; |
|||
import { loadXjphList, loadYtalList } from './../../data/index'; |
|||
|
|||
export default { |
|||
name: "screen-right3", |
|||
data () { |
|||
return { |
|||
name: "screen-right3", |
|||
data() { |
|||
return { |
|||
DropdownData: [ |
|||
{ id: 1, name: "测试测试测试测试测试测试" }, |
|||
{ id: 2, name: "测试测试测试" }, |
|||
{ id: 3, name: "测试测试" }, |
|||
], |
|||
dataTotal: 27054, |
|||
type: [{ |
|||
id: 0, |
|||
title: "待响应", |
|||
num: 20, |
|||
color: "#f54f05" |
|||
}, { |
|||
id: 1, |
|||
title: "处理中", |
|||
num: 542, |
|||
color: "#00f097" |
|||
}, { |
|||
id: 2, |
|||
title: "已结案", |
|||
num: 26492, |
|||
color: "#00c3ff" |
|||
}, { |
|||
id: 3, |
|||
title: "红灯事件", |
|||
num: 21, |
|||
color: "#ff1466" |
|||
}, { |
|||
id: 4, |
|||
title: "黄灯事件", |
|||
num: 4, |
|||
color: "#f1be01" |
|||
}, { |
|||
id: 5, |
|||
title: "绿灯事件", |
|||
num: 537, |
|||
color: "#08c42c" |
|||
}], |
|||
charData: [ |
|||
{ |
|||
name: '不满意', |
|||
value: 20 |
|||
}, |
|||
{ |
|||
name: '非常满意', |
|||
value: 45 |
|||
}, |
|||
{ |
|||
name: '基本满意', |
|||
value: 35 |
|||
} |
|||
], |
|||
charsData: [ |
|||
{ |
|||
name: '城市管理', |
|||
value: 20 |
|||
}, |
|||
{ |
|||
name: '居民生活', |
|||
value: 45 |
|||
}, |
|||
{ |
|||
name: '城管执法', |
|||
value: 35 |
|||
}, |
|||
{ |
|||
name: '环境保护', |
|||
value: 20 |
|||
}, |
|||
{ |
|||
name: '交通运输', |
|||
value: 45 |
|||
}, |
|||
{ |
|||
name: '其他', |
|||
value: 35 |
|||
} |
|||
], |
|||
chart: null, |
|||
charts: null, |
|||
ytalList: [], |
|||
|
|||
top: 0, |
|||
scrollTime: 0, |
|||
transition: 'top 1s linear', |
|||
timer: '', |
|||
pageSize: 7, |
|||
tableHeight: 104, |
|||
dataList: [], |
|||
dataListResult: [], |
|||
|
|||
headerList: [{ title: '排名', width: '400px' }, { title: '街道', width: '1000px' }, { title: '诉求总数', width: '800px' }, { title: '民生诉求', width: '800px' }, { title: '发展诉求', width: '800px' }, '执法', { title: '响应率', color: '#00E099' }, { title: '办事率', color: '#FFB400' }], |
|||
noData: false, |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
this.renderChart() |
|||
this.renderCharts() |
|||
const _this = this |
|||
window.addEventListener("resize", () => { |
|||
_this.chart.resize(); |
|||
_this.charts.resize(); |
|||
}); |
|||
_this.ytalList = loadYtalList() |
|||
_this.dataList = loadXjphList() |
|||
_this.$nextTick(function () { |
|||
|
|||
_this.initList() |
|||
}); |
|||
}, |
|||
watch: { |
|||
ytalList: { |
|||
immediate: true, |
|||
handler: function (newvalue) { |
|||
if (newvalue.length > 0) { |
|||
|
|||
this.scrollView() |
|||
} else { |
|||
clearInterval(this.timer) |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
format(num) { |
|||
var reg = /\d{1,3}(?=(\d{3})+$)/g; |
|||
return (num + '').replace(reg, '$&,'); |
|||
}, |
|||
renderChart() { |
|||
const chart = echarts.init(this.$refs.chart); |
|||
let option; |
|||
if (this.charData.length > 0) { |
|||
option = { |
|||
title: { |
|||
textStyle: { |
|||
fontWeight: "normal", |
|||
fontSize: 16 |
|||
}, |
|||
left: "center" |
|||
}, |
|||
color: ["#f14f0c", "#15aae4", "#16e49c"], |
|||
tooltip: { |
|||
trigger: "item", |
|||
formatter: "{b}：{d}%" |
|||
}, |
|||
series: [ |
|||
{ |
|||
type: "pie", |
|||
center: ["50%", "30%"],//饼状图位置 |
|||
radius: ["20%", "40%"], |
|||
label: { |
|||
show: true, |
|||
}, |
|||
labelLine: { |
|||
normal: { |
|||
lineStyle: { |
|||
color: 'rgba(255, 255, 255, 0.3)' |
|||
}, |
|||
smooth: 0.2, |
|||
length: "10" |
|||
} |
|||
}, |
|||
data: this.charData |
|||
} |
|||
] |
|||
}; |
|||
} else { |
|||
option = { |
|||
title: { |
|||
// text: this.charTitle, |
|||
textStyle: { |
|||
fontWeight: "normal", |
|||
fontSize: 16 |
|||
}, |
|||
left: "center" |
|||
}, |
|||
tooltip: { |
|||
trigger: "none" |
|||
}, |
|||
color: ["#d3d3d3"], |
|||
series: [ |
|||
{ |
|||
type: "pie", |
|||
radius: ["30%", "60%"], |
|||
left: "center", |
|||
label: { |
|||
show: true, |
|||
formatter: "{b}" |
|||
}, |
|||
data: [{ value: 1, name: "暂无数据" }] |
|||
} |
|||
] |
|||
}; |
|||
} |
|||
chart.setOption(option); |
|||
this.chart = chart; |
|||
}, |
|||
renderCharts() { |
|||
const chart = echarts.init(this.$refs.charts); |
|||
let option; |
|||
if (this.charData.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: 200, |
|||
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: "暂无数据" }] |
|||
} |
|||
] |
|||
}; |
|||
} |
|||
chart.setOption(option); |
|||
this.charts = chart; |
|||
}, |
|||
tableMouseEnter() { |
|||
clearInterval(this.timer) |
|||
}, |
|||
tableMouseLeave() { |
|||
this.scrollView() |
|||
}, |
|||
scrollView() { |
|||
clearInterval(this.timer) |
|||
this.timer = setInterval(() => { |
|||
|
|||
if (this.ytalList.length % this.pageSize === 0) { |
|||
|
|||
if (this.scrollTime < this.ytalList.length / this.pageSize - 1) { |
|||
this.transition = 'top 1s linear' |
|||
this.scrollTime += 1 |
|||
this.top = `-${this.tableHeight * this.scrollTime}%` |
|||
} else { |
|||
this.transition = 'top 1s ease-in-out' |
|||
this.top = '0px' |
|||
this.scrollTime = 0 |
|||
} |
|||
} else { |
|||
if ( |
|||
this.scrollTime < Math.floor(this.ytalList.length / this.pageSize) |
|||
) { |
|||
this.transition = 'top 1s linear' |
|||
this.scrollTime += 1 |
|||
this.top = `-${this.tableHeight * this.scrollTime}%` |
|||
} else { |
|||
this.transition = 'top 1s ease-in-out' |
|||
this.top = '0px' |
|||
this.scrollTime = 0 |
|||
} |
|||
} |
|||
}, 5000) |
|||
}, |
|||
initList() { |
|||
this.dataListResult = [] |
|||
this.dataList.forEach(element => { |
|||
this.dataListResult.push([ |
|||
element.no, |
|||
element.unit, |
|||
element.dys, |
|||
element.hts, |
|||
element.yts, |
|||
element.sqs, |
|||
element.jal, |
|||
element.myl, |
|||
]) |
|||
}); |
|||
|
|||
}, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" src="style/right1.scss" scoped></style> |
|||
<style src="style/right2.scss" lang="scss" scoped></style> |
|||
<style lang="scss" scoped> |
|||
.right3 { |
|||
margin-left: 12px; |
|||
margin-left: 12px; |
|||
} |
|||
.b-row1 { |
|||
height: 328px; |
|||
display: flex; |
|||
height: 328px; |
|||
display: flex; |
|||
.dataStatistics { |
|||
padding: 24px 0 0 24px; |
|||
} |
|||
|
|||
.Satisfaction { |
|||
padding: 24px 0 0 24px; |
|||
} |
|||
} |
|||
|
|||
.b-row2 { |
|||
height: 327px; |
|||
display: flex; |
|||
height: 327px; |
|||
display: flex; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue