elink-star
/
ShibeiWorkPlatform_Frontend
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

ss

shibei_master
dai 4 years ago
parent
2c33340bb9
commit
cc8b4303bd
3 changed files with 195 additions and 145 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/shuju/people/ren.png
  2. 26
      src/assets/scss/people.scss
  3. 314
      src/views/modules/visual/basicinfo/people.vue

BIN
src/assets/img/shuju/people/ren.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 301 KiB

After

Width:  |  Height:  |  Size: 308 KiB

26
src/assets/scss/people.scss
View File

@ -58,8 +58,34 @@
margin-top: 0; margin-top: 0;
padding-bottom: 15px; padding-bottom: 15px;
.ren-name {
position: absolute;
left: 0;
right: 0;
top: -10px;
width: 400px;
margin: 0 auto;
font-size: 24px;
line-height: 40px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
> span {
@include toe;
display: block;
text-align: center;
}
> img {
display: block;
margin: 3px auto;
}
}
.pic-ren { .pic-ren {
margin: 0 auto; margin: 0 auto;
display: block;
pointer-events: none; pointer-events: none;
} }
.ren-prop { .ren-prop {

314
src/views/modules/visual/basicinfo/people.vue
View File

@ -7,16 +7,22 @@
<img src="@/assets/img/shuju/title-tip.png" /> <img src="@/assets/img/shuju/title-tip.png" />
<span>人员情况</span> <span>人员情况</span>
</div> </div>
<div class="more" @click="showedMoreInfo=true">查看更多</div> <div class="more" @click="showedMoreInfo = true">查看更多</div>
<div class="ren"> <div class="ren">
<img class="pic-ren" src="@/assets/img/shuju/people/ren.png" /> <img class="pic-ren" src="@/assets/img/shuju/people/ren.png" />
<div class="ren-name">
<span>{{ info.name }}</span>
<img src="@/assets/img/shuju/people/arrow.png" />
</div>
<div class="ren-prop z-1"> <div class="ren-prop z-1">
<img src="@/assets/img/shuju/people/ren-prop-1.png" /> <img src="@/assets/img/shuju/people/ren-prop-1.png" />
<span>所属网格</span> <span>所属网格</span>
<div class="ren-cnt"> <div class="ren-cnt">
<h5>所属网格：</h5> <h5>所属网格：</h5>
<p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p> <p>
{{ info.gridName }}
</p>
</div> </div>
</div> </div>
@ -26,7 +32,9 @@
<div class="ren-cnt"> <div class="ren-cnt">
<h5>人员类别：</h5> <h5>人员类别：</h5>
<p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p> <p>
{{ info.personCategory.join("、") }}
</p>
</div> </div>
</div> </div>
@ -36,7 +44,9 @@
<div class="ren-cnt"> <div class="ren-cnt">
<h5>工作单位：</h5> <h5>工作单位：</h5>
<p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p> <p>
{{ info.workUnit }}
</p>
</div> </div>
</div> </div>
@ -46,7 +56,9 @@
<div class="ren-cnt"> <div class="ren-cnt">
<h5>志愿者类别：</h5> <h5>志愿者类别：</h5>
<p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p> <p>
{{ info.volunteerCategory.join("、") }}
</p>
</div> </div>
</div> </div>
@ -56,7 +68,9 @@
<div class="ren-cnt"> <div class="ren-cnt">
<h5>房屋信息：</h5> <h5>房屋信息：</h5>
<p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p> <p>
{{ info.houseInfo.join("、") }}
</p>
</div> </div>
</div> </div>
@ -66,7 +80,7 @@
<div class="ren-cnt"> <div class="ren-cnt">
<h5>经济状况：</h5> <h5>经济状况：</h5>
<p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p> <p>月薪{{ info.financialSituation.monthlyIncome }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -81,7 +95,7 @@
<span>更多信息</span> <span>更多信息</span>
</div> </div>
<div class="btn-close" @click="showedMoreInfo=false"> <div class="btn-close" @click="showedMoreInfo = false">
<img src="@/assets/img/shuju/people/close.png" /> <img src="@/assets/img/shuju/people/close.png" />
</div> </div>
@ -135,60 +149,112 @@
<div class="info"> <div class="info">
<div class="huzhu"> <div class="huzhu">
<img class="huzhu-bg" src="@/assets/img/shuju/people/huzhu.png" /> <img class="huzhu-bg" src="@/assets/img/shuju/people/huzhu.png" />
<img class="huzhu-ico" src="@/assets/img/shuju/people/huzhu-home.png" /> <img
<div class="huzhu-name">爱新觉罗玄烨</div> class="huzhu-ico"
src="@/assets/img/shuju/people/huzhu-home.png"
/>
<div class="huzhu-name">{{ houseInfo.ownerName }}</div>
<p>（户主）</p> <p>（户主）</p>
</div> </div>
<div class="rel z-zuo-2"> <div class="rel z-zuo-2" v-if="houseInfo.list[0]">
<img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" /> <img
<img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/zuo2.png" /> class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo2.png"
/>
<div class="rel-text"> <div class="rel-text">
<span class="rel-call">妻子</span> <span class="rel-call">{{ houseInfo.list[0].relation }}</span>
<span class="rel-name">（西门吹雪）</span> <span class="rel-name"
>（{{ houseInfo.list[0].userName }}）</span
>
</div> </div>
</div> </div>
<div class="rel z-you-2">
<img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-you.png" /> <div class="rel z-you-2" v-if="houseInfo.list[1]">
<img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/you2.png" /> <img
class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-you.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you2.png"
/>
<div class="rel-text"> <div class="rel-text">
<span class="rel-call">妻子</span> <span class="rel-call">{{ houseInfo.list[1].relation }}</span>
<span class="rel-name">（西门吹雪）</span> <span class="rel-name"
>（{{ houseInfo.list[1].userName }}）</span
>
</div> </div>
</div> </div>
<div class="rel z-zuo-1"> <div class="rel z-zuo-1" v-if="houseInfo.list[2]">
<img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" /> <img
<img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/zuo1.png" /> class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo1.png"
/>
<div class="rel-text"> <div class="rel-text">
<span class="rel-call">妻子</span> <span class="rel-call">{{ houseInfo.list[2].relation }}</span>
<span class="rel-name">（西门吹雪）</span> <span class="rel-name"
>（{{ houseInfo.list[2].userName }}）</span
>
</div> </div>
</div> </div>
<div class="rel z-you-1"> <div class="rel z-you-1" v-if="houseInfo.list[3]">
<img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-you.png" /> <img
<img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/you1.png" /> class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-you.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you1.png"
/>
<div class="rel-text"> <div class="rel-text">
<span class="rel-call">妻子</span> <span class="rel-call">{{ houseInfo.list[3].relation }}</span>
<span class="rel-name">（西门吹雪）</span> <span class="rel-name"
>（{{ houseInfo.list[3].userName }}）</span
>
</div> </div>
</div> </div>
<div class="rel z-zuo-3"> <div class="rel z-zuo-3" v-if="houseInfo.list[4]">
<img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-zuo.png" /> <img
<img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/zuo3.png" /> class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-zuo.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/zuo3.png"
/>
<div class="rel-text"> <div class="rel-text">
<span class="rel-call">妻子</span> <span class="rel-call">{{ houseInfo.list[4].relation }}</span>
<span class="rel-name">（西门吹雪）</span> <span class="rel-name"
>（{{ houseInfo.list[4].userName }}）</span
>
</div> </div>
</div> </div>
<div class="rel z-you-3"> <div class="rel z-you-3" v-if="houseInfo.list[5]">
<img class="rel-bg" src="@/assets/img/shuju/people/huzhu-kuang-you.png" /> <img
<img class="rel-line" src="@/assets/img/shuju/people/huzhu-line/you3.png" /> class="rel-bg"
src="@/assets/img/shuju/people/huzhu-kuang-you.png"
/>
<img
class="rel-line"
src="@/assets/img/shuju/people/huzhu-line/you3.png"
/>
<div class="rel-text"> <div class="rel-text">
<span class="rel-call">妻子</span> <span class="rel-call">{{ houseInfo.list[5].relation }}</span>
<span class="rel-name">（西门吹雪）</span> <span class="rel-name"
>（{{ houseInfo.list[5].userName }}）</span
>
</div> </div>
</div> </div>
</div> </div>
@ -200,145 +266,103 @@
</template> </template>
<script> <script>
import { Loading } from 'element-ui'; //引入Loading服务 import { Loading } from "element-ui"; //引入Loading服务
import { requestPost } from "@/js/dai/request"; import { requestPost } from "@/js/dai/request";
import cptCard from "@/views/modules/visual/cpts/card"; import cptCard from "@/views/modules/visual/cpts/card";
export default { export default {
name: 'HomeMap', name: "HomeMap",
data () { data() {
return { return {
showedMoreInfo: false showedMoreInfo: false,
} info: {
financialSituation: { monthlyIncome: "", retirementAmount: "" },
gridName: "",
houseInfo: [],
name: "",
personCategory: [],
volunteerCategory: [],
workUnit: "",
},
houseInfo: {
ownerName: "",
list: [
{
userId: "",
userName: "",
isSelf: "",
relation: "",
},
],
},
};
}, },
props: { props: {
userId: {
vueFlag: {
type: String, type: String,
default: "alarm" default: "",
} },
}, },
computed: {
mapHeight () { computed: {},
return this.clientHeight - 120; components: {
cptCard,
},
watch: {
userId() {
this.getApiData();
}, },
// zoom: {
// get () {
// //根据不同屏幕分辨率，控制zoom大小
// if (this.clientHeight < 900) {
// return 2.3
// } else {
// return 2.8
// }
// },
// set (value) {
// }
// },
},
components: {
cptCard
}, },
async mounted () {
async mounted() {
this.getApiData();
}, },
methods: { methods: {
handleSearch () { handleSearch() {},
getApiData() {
this.getInfo();
this.getHouseInfo();
}, },
//加载组织数据 //加载组织数据
async loadOrgData () { async getInfo() {
const url = "/gov/org/agency/maporg" const url = "/epmetuser/icresiuser/persondata";
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
let params = { let params = {
orgId: this.orgId, userId: this.userId,
level: this.orgLevel };
}
const { data, code, msg } = await requestPost(url, params) const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
this.orgData = data this.info = { ...this.info, ...data };
this.runAgency.push(data)
if (data.children && data.children.length > 0) {
this.subAgencyArray = data.children
}
} else { } else {
this.$message.error(msg) this.$message.error(msg);
} }
}, },
//加载当前园区的标注 //加载组织数据
loadPolygon (subAgencyArray) { async getHouseInfo() {
polygonSource.clear()//清空变电站标注 const url = "/epmetuser/icresiuser/ownerrelation";
let params = {
let featureData = []//标注数据 userId: this.userId,
if (subAgencyArray && subAgencyArray.length > 0) {//判断是否存在下级标注 };
let oneData = {}
subAgencyArray.forEach(agencyItem => {
if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
oneData = {
type: 'Feature',
id: agencyItem.id,
properties: {
id: agencyItem.id,
level: agencyItem.level,
name: agencyItem.name
},
geometry: {
type: 'Polygon',
coordinates: [],
},
}
let coorArray = agencyItem.coordinates.split(',')//坐标数组
let itemArray = []//单个点位的[lon,lat]，数组
let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组
coorArray.forEach((item, index) => {
itemArray.push(item)
if (index % 2 == 0) {//偶
} else {//奇
polygonArray.push(itemArray)
itemArray = []
}
});
oneData.geometry.coordinates.push(polygonArray)
featureData.push(oneData)
}
});
}
if (featureData && featureData.length > 0) { const { data, code, msg } = await requestPost(url, params);
var geojsonObject = {
'type': 'FeatureCollection',
'features': featureData
};
let feature = (new GeoJSON()).readFeatures(geojsonObject)
polygonSource.addFeatures(feature)
if (code === 0) {
this.houseInfo = { ...this.houseInfo, ...data };
} else {
this.$message.error(msg);
} }
}, },
} },
}; };
</script> </script>
<style lang="scss" src="@/assets/scss/people.scss" scoped></style> <style lang="scss" src="@/assets/scss/people.scss" scoped></style>
Write Preview
Loading…
Cancel
Save