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

措施清单111

shibei_master
13176889840 4 years ago
parent
4b207f1200
commit
2b0c749886
6 changed files with 515 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/img/shuju/measure/bg-left.png
  2. BIN
      src/assets/img/shuju/measure/dangyuan.png
  3. BIN
      src/assets/img/shuju/measure/jumin.png
  4. 2
      src/views/modules/visual/components/screen-table/index.vue
  5. 23
      src/views/modules/visual/measure/service.vue
  6. 495
      src/views/modules/visual/measure/volunteer.vue

BIN
src/assets/img/shuju/measure/bg-left.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
src/assets/img/shuju/measure/dangyuan.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/img/shuju/measure/jumin.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

2
src/views/modules/visual/components/screen-table/index.vue
View File

@ -175,14 +175,12 @@ export default {
watch: {
tableData(arr) {
if (Array.isArray(arr)) {
console.log('tabldate-dddsss', this.tableData)
this.visiblePopList = new Array(arr.length).fill(false);
}
},
},
mounted() {
console.log('tabldate-ddd', this.tableData)
window.addEventListener("click", (e) => {
this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
});

23
src/views/modules/visual/measure/service.vue
View File

@ -182,6 +182,7 @@ export default {
let _charts = echarts.init(eId)
let option = {
tooltip: {
show: false,
trigger: 'item'
},
legend: {
@ -220,19 +221,32 @@ export default {
left: 'center',
width: 400,
label: {
show: true,
position: 'outer',
alignTo: 'edge',
formatter: '{a|{c}}\n{name|{b}}',
formatter: '{a|{c}}\n{r|}\n{name|{b}}',
minMargin: 5,
edgeDistance: 20,
lineHeight: 15,
color: '#fff',
fontSize: 12,
// padding: [5],
distanceToLabelLine: 10,
rich: {
name: {
padding: [0, 6, 0, 6]
},
a: {
fontSize: 15,
color: '#fff'
color: '#fff',
padding: [0, 6, 0, 6]
},
r: {
backgroundColor: 'auto',
borderRadius: 6,
width: 6,
height: 6,
// padding: [3, 3, 0, -12]
}
}
},
@ -247,7 +261,10 @@ export default {
show: true,
length: 20,
length2: 0,
maxSurfaceAngle: 80
maxSurfaceAngle: 80,
lineStyle: {
cap: 'round'
}
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < _charts.getWidth() / 2;

495
src/views/modules/visual/measure/volunteer.vue
View File

@ -0,0 +1,495 @@
<template>
<div class="warning-box">
<cpt-card class="card-wr">
<div class="card-title">
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
<div class="title-label">
志愿者服务情况
</div>
</div>
<div class="card-echart">
<div class="card-left">
<div class="card-count">
<div class="card-count-item">
<div class="card-count-content">
<div class="card-count-num">6500</div>
<div class="card-count-label">党员数量</div>
</div>
</div>
<div class="card-count-item">
<div class="card-count-content">
<div class="card-count-num">6500</div>
<div class="card-count-label">居民数量</div>
</div>
</div>
</div>
<div class="echart-wr">
<!-- <div class="echart-cicle"></div> -->
<div id="echartService" class="echart-org"></div>
</div>
</div>
</div>
<div class="card-echart">
<div class="card-left">
<div class="card-count">
<div class="card-count-item">
<div class="card-count-content">
<div class="card-count-num">6500</div>
<div class="card-count-label">党员数量</div>
</div>
</div>
<div class="card-count-item">
<div class="card-count-content">
<div class="card-count-num">6500</div>
<div class="card-count-label">居民数量</div>
</div>
</div>
</div>
<div class="echart-wr">
<!-- <div class="echart-cicle"></div> -->
<div id="echartCount" class="echart-org"></div>
</div>
</div>
</div>
</cpt-card>
<cpt-card class="card-wr">
<div class="card-title">
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
<div class="title-label">
多元化治理平面图
</div>
</div>
<div class="map-tips">
<div class="map-tips-item">
<div class="map-tips-icon"></div>
<div class="map-tips-label">调解员</div>
</div>
<div class="map-tips-item">
<div class="map-tips-icon"></div>
<div class="map-tips-label">调解员</div>
</div>
<div class="map-tips-item">
<div class="map-tips-icon"></div>
<div class="map-tips-label">能人达人</div>
</div>
<div class="map-tips-item">
<div class="map-tips-icon"></div>
<div class="map-tips-label">治安巡逻</div>
</div>
<div class="map-tips-item">
<div class="map-tips-icon"></div>
<div class="map-tips-label">代办员</div>
</div>
</div>
<div class="card-map">
这里是地图容器
</div>
</cpt-card>
</div>
</template>
<script>
import { requestPost } from "@/js/dai/request";
import screenTable from "../components/screen-table/index";
import cptCard from "@/views/modules/visual/cpts/card";
import nextTick from "dai-js/tools/nextTick";
import * as echarts from 'echarts';
export default {
name: "warning-box",
components: {
cptCard,
screenTable,
},
data() {
return {
warningList: [],
headerList: [
{ title: "序号", coulmn: 'index' },
{ title: "需求类型", coulmn: 'gridName' },
{ title: "具体内容", coulmn: 'buildingName' },
{ title: "上报情况", coulmn: 'neighborhoodName' },
{ title: "上报人", coulmn: 'residentNames' },
{ title: "上报时间", coulmn: 'residentNames' },
{ title: "是否认领", coulmn: 'residentNames' },
{ title: "认领方", coulmn: 'residentNames' },
{ title: "认领时间", coulmn: 'residentNames' }
],
tableData: [
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
],
value2: '',
visibleLoading: true,
pageNo: 1,
pageSize: 10,
total: 0,
activeIndex: 0,
activeLevel: "1",
};
},
async mounted() {
await nextTick(100);
this.initCharts()
this.initCount()
this.getBuildingwarnlist();
},
methods: {
initCharts() {
const eId = document.getElementById('echartService')
let _charts = echarts.init(eId)
let option = {
tooltip: {
trigger: 'item'
},
legend: {
show: true,
top: 'bottom',
left: 'center',
textStyle: {
color: '#fff'
}
},
title: {
text: '12000', //图形标题，配置在中间对应效果图的80%
subtext: '志愿者总数',
left: "center",
top: "center",
textStyle: {
color: "#fff",
fontSize: 28,
align: "center"
},
subtextStyle: {
fontSize: 16,
color: '#fff'
}
},
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['50%', '60%'],
avoidLabelOverlap: false,
left: 'center',
width: 400,
label: {
show: false,
},
emphasis: {
label: {
show: false,
fontSize: '14',
fontWeight: 'bold'
}
},
data: [
{
value: 104,
name: '党员',
itemStyle: {
color: 'rgba(26, 178, 255, 1)'
}
},
{
value: 735,
name: '居民',
itemStyle: {
color: 'rgba(250, 193, 38, 1)'
}
}
]
}
]
}
option && _charts.setOption(option);
},
initCount() {
const eId = document.getElementById('echartCount')
let _charts = echarts.init(eId)
let option = {
tooltip: {
trigger: 'item'
},
legend: {
show: true,
top: 'bottom',
left: 'center',
textStyle: {
color: '#fff'
}
},
title: {
text: '12000', //图形标题，配置在中间对应效果图的80%
subtext: '志愿者服务总数',
left: "center",
top: "center",
textStyle: {
color: "#fff",
fontSize: 28,
align: "center"
},
subtextStyle: {
fontSize: 16,
color: '#fff'
}
},
series: [
{
// name: 'Access From',
type: 'pie',
// center: ['10%', '50%'],
radius: ['50%', '60%'],
avoidLabelOverlap: false,
// top: top + '%',
// height: '80%',
left: 'center',
width: 400,
label: {
show: false,
},
emphasis: {
label: {
show: false,
fontSize: '14',
fontWeight: 'bold'
}
},
data: [
{
value: 1048,
name: '党员',
itemStyle: {
color: 'rgba(26, 178, 255, 1)'
}
},
{
value: 735,
name: '居民',
itemStyle: {
color: 'rgba(250, 193, 38, 1)'
}
}
]
}
]
}
option && _charts.setOption(option);
},
onClickList(index, level) {
this.activeIndex = index;
this.activeLevel = level;
this.pageNo = 1;
this.getUserwarnlist();
},
//具体人员列表
async getUserwarnlist() {
const { activeIndex, activeLevel, warningList } = this;
const reqItem = warningList[activeIndex];
let tableData = [];
const url = "/epmetuser/statsresiwarn/userwarnlist";
let params = {
configId: reqItem.configId,
buildingIdList: reqItem["buildingIdList" + activeLevel],
pageNo: this.pageNo,
pageSize: this.pageSize,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
tableData = data.list.map((item, index) => {
return {
...item,
index: index + 1,
residentNames: item.residentNames || "暂无"
}
});
this.tableData = tableData;
this.total = data.total;
} else {
}
},
// 【人员预警】 楼宇预警数量列表
async getBuildingwarnlist() {
const url = "/epmetuser/statsresiwarn/buildingwarnlist";
let params = {
agencyId: this.$store.state.user.agencyId,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.warningList = data;
this.visibleLoading = false;
this.getUserwarnlist();
} else {
}
},
pageSizeChangeHandleNew(val) {
this.pageNo = 1;
this.pageSize = val;
},
pageCurrentChangeHandleNew(val) {
this.pageNo = val;
this.getUserwarnlist();
},
},
};
</script>
<style
lang="scss"
src="@/assets/scss/modules/visual/warning.scss"
scoped
></style>
<style lang="scss" scoped>
.warning-box {
display: flex;
.card-wr {
flex: 1;
}
.card-wr:last-child {
margin-left: 20px;
}
}
.card-title {
display: flex;
align-items: center;
cursor: pointer;
.title-icon {
display: block;
width: 46px;
height: 34px;
box-sizing: border-box;
margin-right: 6px;
}
.title-label {
font-size: 16px;
font-weight: 800;
}
::v-deep .el-dropdown {
font-size: 16px;
color: #fff;
font-weight: 800;
}
}
.card-echart {
display: flex;
margin-top: 40px;
.card-left {
position: relative;
flex: 1;
display: flex;
}
}
.card-echart:last-child {
padding-bottom: 40px;
}
.echart-wr {
position: relative;
flex-shrink: 0;
width: 50%;
height: 320px;
box-sizing: border-box;
.echart-org {
width: 100%;
height: 100%;
}
.echart-cicle {
position: absolute;
top: 50%;
left: 50%;
width: 240px;
height: 240px;
box-sizing: border-box;
margin-top: -120px;
margin-left: -120px;
border: 1px dashed rgba(0, 96, 240, 1);
border-radius: 50%;
}
}
.card-count {
flex: 1;
.card-count-item {
display: flex;
align-items: center;
justify-content: center;
width: 418px;
height: 124px;
box-sizing: border-box;
margin-top: 20px;
// padding-left: 192px;
background: url('../../../../assets/img/shuju/measure/dangyuan.png') center no-repeat;
background-size: cover;
.card-count-content {
position: relative;
box-sizing: border-box;
padding-left: 30px;
color: #fff;
cursor: pointer;
.card-count-num {
font-size: 32px;
font-weight: bold;
}
.card-count-label {
margin-top: 6px;
font-size: 16px;
color: rgba(255, 255, 255, .72);
}
}
.card-count-content::after {
position: absolute;
top: 50%;
left: 0;
content: '';
width: 1px;
height: 50px;
margin-top: -25px;
background: rgba(98, 162, 205, 1);
}
}
.card-count-item:last-child {
background: url('../../../../assets/img/shuju/measure/jumin.png') center no-repeat;
}
}
.map-tips {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 20px;
.map-tips-item {
display: flex;
align-items: center;
margin-top: 20px;
margin-right: 40px;
.map-tips-icon {
width: 20px;
height: 10px;
box-sizing: border-box;
margin-right: 10px;
background: #DD2719;
border-radius: 2px;
}
.map-tips-label {
font-size: 16px;
color: #fff;
}
}
}
</style>
Write Preview
Loading…
Cancel
Save