城阳pc工作端前端代码
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

883 lines
23 KiB

4 years ago
<template>
<div class="warning-box">
<cpt-card>
<div class="card-title">
<img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
<div class="title-label">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
全部网格<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>黄金糕</el-dropdown-item>
<el-dropdown-item>狮子头</el-dropdown-item>
<el-dropdown-item>螺蛳粉</el-dropdown-item>
<el-dropdown-item>双皮奶</el-dropdown-item>
<el-dropdown-item>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- <div class="title-time">
<div class="title-time-label">选择时间</div>
<div class="">
<el-date-picker
v-model="value2"
type="month"
placeholder="选择月">
</el-date-picker>
</div>
</div> -->
</div>
<div class="card-echart">
<div class="card-left">
<div class="card-left-title">党员年龄统计</div>
<div class="card-flex">
<div class="echart-wr">
<!-- <div class="echart-cicle"></div> -->
<screen-echarts-frame class="echart-org"
@myChartMethod="pieInitOk"
ref="ageChart"></screen-echarts-frame>
<!-- <div id="echartOrg" class="echart-org"></div> -->
4 years ago
</div>
<div class="echarts-tips echarts-tips-wd50">
<div class="tips-lists">
<div v-for="item in ageItem" :key="item.value" class="tips-items">
<div class="tips-items-title" :class="'tips-items-title' + item.value">
{{ item.name }}
</div>
<div class="tips-items-num">
<div class="tips-item-count">{{item.value}}</div>
<div class="tips-item-has">25%</div>
</div>
</div>
</div>
</div>
</div>
<div class="warning-box-bottom">
<screen-table
:headerList="headerList"
:tableData="tableData"
:visibleLoading="visibleLoading"
:operate="false"
></screen-table>
<div class="pagination">
<el-pagination
:current-page="pageNo"
:page-size="pageSize"
background
layout="prev, pager, next"
@size-change="pageSizeChangeHandleNew"
@current-change="pageCurrentChangeHandleNew"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
<div class="card-left">
<div class="card-left-title">党员学历统计</div>
<div class="card-flex">
<div class="echart-wr echart-wr100">
<!-- <div class="echart-cicle echart-cicle0"></div> -->
<!-- <div id="echartType" class="echart-org"></div> -->
<screen-echarts-frame class="echart-org"
@myChartMethod="pieInitOks"
ref="eduChart"></screen-echarts-frame>
4 years ago
</div>
<div v-if="false" class="echarts-tips">
<div class="tips-list">
<div v-for="item in eduItem" :key="item.value" class="tips-item">
<div class="tips-item-icon" :style="'background:' + item.color"></div>
<div class="tips-item-text">{{item.name}}</div>
</div>
</div>
</div>
</div>
<div class="warning-box-bottom">
<screen-table
:headerList="headerList"
:tableData="tableData"
:visibleLoading="visibleLoading"
:operate="false"
></screen-table>
<div class="pagination">
<el-pagination
:current-page="pageNo"
:page-size="pageSize"
background
layout="prev, pager, next"
@size-change="pageSizeChangeHandleNew"
@current-change="pageCurrentChangeHandleNew"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</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 screenEchartsFrame from "../components/screen-echarts-frame";
import { pieOption } from './options'
4 years ago
import * as echarts from 'echarts';
export default {
name: "warning-box",
components: {
cptCard,
screenTable,
screenEchartsFrame
4 years ago
},
data() {
return {
warningList: [],
headerList: [
{ title: "序号", coulmn: 'index' },
{ title: "姓名", coulmn: 'gridName' },
{ title: "年龄", coulmn: 'buildingName' },
{ title: "手机号码", coulmn: 'neighborhoodName' }
],
tableData: [
// [1,'商丘路社区第一网格','商丘路小区','2号楼','杨颖、王平、刘佳敏、丁辉、杨萍'],
],
value2: '',
visibleLoading: true,
pageNo: 1,
pageSize: 10,
total: 0,
activeIndex: 0,
activeLevel: "1",
eduItem: [
{
name: '小学',
value: 0,
color: 'rgba(27, 81, 255, 1)'
}, {
name: '初中',
value: 1,
color: 'rgba(0, 229, 237, 1)'
}, {
name: '高中',
value: 2,
color: 'rgba(120, 0, 255, 1)'
}, {
name: '中专',
value: 3,
color: 'rgba(255, 120, 0, 1)'
}, {
name: '大专',
value: 4,
color: 'rgba(255, 186, 0, 1)'
}, {
name: '本科',
value: 5,
color: 'rgba(22, 215, 131, 1)'
}, {
name: '硕士',
value: 6,
color: 'rgba(42, 0, 255, 1)'
}, {
name: '博士',
value: 7,
color: 'rgba(198, 0, 255, 1)'
}, {
name: '其他',
value: 8,
color: 'rgba(255, 42, 0, 1)'
}
],
ageItem: [
{
name: '50岁以下',
value: 1,
color: 'rgba(27, 81, 255, 1)'
}, {
name: '50-59岁',
value: 2,
color: 'rgba(0, 229, 237, 1)'
}, {
name: '60-69岁',
value: 3,
color: 'rgba(120, 0, 255, 1)'
}, {
name: '70-79岁',
value: 4,
color: 'rgba(255, 120, 0, 1)'
}, {
name: '80岁以上',
value: 5,
color: 'rgba(255, 186, 0, 1)'
}
],
pieAgeChartS: null,
pieEduChartSs: null,
pieAgeOptions: null,
pieEduOptions: null
4 years ago
};
},
async mounted() {
4 years ago
await nextTick(100);
this.initAgeCharts()
this.initEduCharts()
// this.initChartType()
4 years ago
this.getBuildingwarnlist();
},
methods: {
pieInitOk (dom) {
console.log('pie准备好了', dom)
this.pieAgeChartS = dom
// this.pieInitState = true
},
pieInitOks (dom) {
console.log('pies准备好了', dom)
this.pieEduChartS = dom
// this.pieInitState = true
},
initAgeCharts() {
// const eId = document.getElementById('echartOrg')
// let _charts = echarts.init(eId)
4 years ago
let option = {
// tooltip: {
// show: false,
// trigger: 'item'
// },
// legend: {
// show: false,
// orient: 'vertical',
// top: '40%',
// left: 'right',
// 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: ['40%', '60%'],
// avoidLabelOverlap: true,
// // top: top + '%',
// // height: '80%',
// left: 'center',
// width: 400,
// label: {
// show: true,
// position: 'outer',
// alignTo: 'edge',
// 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',
// padding: [0, 6, 0, 6]
// },
// r: {
// backgroundColor: 'auto',
// borderRadius: 6,
// width: 6,
// height: 6,
// // padding: [3, 3, 0, -12]
// }
// }
// },
// emphasis: {
// label: {
// show: true,
// fontSize: '14',
// fontWeight: 'bold'
// }
// },
// labelLine: {
// show: false,
// length: 20,
// length2: 0,
// maxSurfaceAngle: 80,
// lineStyle: {
// cap: 'round'
// }
// },
// labelLayout: function (params) {
// const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2;
// const points = params.labelLinePoints;
// // Update the end point.
// points[2][0] = isLeft
// ? params.labelRect.x
// : params.labelRect.x + params.labelRect.width;
// return {
// labelLinePoints: points
// };
// },
// data: this.ageItem
// }
// ]
}
this.pieAgeOptions = pieOption(this.pieAgeChartS)
this.clickAgePie(0)
let fun = params => {
this.clickAgePie(params.dataIndex)
}
this.$refs.ageChart.handleClick(fun)
// option && this.$refs.pieChart.setOption(option);
},
initEduCharts() {
// const eId = document.getElementById('echartOrg')
// let _charts = echarts.init(eId)
let option = {
}
let legend = {
show: true,
orient: 'vertical',
top: '20%',
right: 0,
textStyle: {
width: 90,
color: '#fff',
rich: {
a: {
width: 90
}
4 years ago
}
},
formatter: name => {
for (let a = 0; a < this.eduItem.length; a++) {
// this.data 这个数据中有名称和次数
if (this.eduItem[a].name === name) {
//两个名称进行对比,取出对应的次数
let params1 = name + "\n"; //然后return你需要的legend格式即可
console.log(params1);
let tmp = params1.split("\n");
let res = "" + params1;
for (let i in tmp) {
res = res.replace(tmp[i], "");
4 years ago
}
return res + params1;
}
4 years ago
}
}
4 years ago
}
this.pieEduOptions = pieOption(this.pieEduChartS)
this.pieEduOptions.legend = { ...legend }
// this.pieEduOptions.series[1].width = 400
this.clickEduPie(0)
let fun = params => {
this.clickEduPie(params.dataIndex)
}
this.$refs.eduChart.handleClick(fun)
// option && this.$refs.pieChart.setOption(option);
4 years ago
},
initChartType() {
const eId = document.getElementById('echartType')
let _charts = echarts.init(eId)
4 years ago
let option = {
tooltip: {
trigger: 'item'
},
legend: {
show: true,
orient: 'vertical',
top: '20%',
right: 0,
textStyle: {
width: 90,
color: '#fff',
rich: {
a: {
width: 90
}
}
},
formatter: name => {
for (let a = 0; a < this.eduItem.length; a++) {
// this.data 这个数据中有名称和次数
if (this.eduItem[a].name === name) {
//两个名称进行对比,取出对应的次数
let params1 = name + "\n"; //然后return你需要的legend格式即可
console.log(params1);
let tmp = params1.split("\n");
let res = "" + params1;
for (let i in tmp) {
res = res.replace(tmp[i], "");
}
return res + params1;
}
}
}
},
title: {
text: '12000', //图形标题,配置在中间对应效果图的80%
subtext: '总数',
left: 196,
top: "center",
textAlign: 'center',
textStyle: {
color: "#fff",
fontSize: 28,
align: "center"
},
subtextStyle: {
fontSize: 16,
color: '#fff',
align: 'center'
}
},
series: [
{
// name: 'Access From',
type: 'pie',
// center: ['50%', '50%'],
radius: ['40%', '60%'],
avoidLabelOverlap: true,
// top: top + '%',
// height: '80%',
// left: 0,
width: 400,
label: {
position: 'outside',
alignTo: 'edge',
formatter: '{a|{c}}\n{r|}\n{name|{b}}',
minMargin: 5,
edgeDistance: 20,
lineHeight: 15,
color: '#fff',
fontSize: 15,
rich: {
name: {
padding: [0, 6, 0, 6]
},
a: {
fontSize: 15,
color: '#fff',
padding: [0, 6, 0, 6]
},
r: {
backgroundColor: 'auto',
borderRadius: 6,
width: 6,
height: 6,
// padding: [3, 3, 0, -12]
}
}
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
labelLine: {
show: true,
length: 20,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < _charts.getWidth() / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: this.eduItem
}
]
}
option && _charts.setOption(option);
},
clickAgePie (seriesIndex) {
this.ageItem.forEach((element, index) => {
if (index === seriesIndex) {
element.label = {
show: true,
};
element.labelLine = {
show: true,
lineStyle: {
opacity: 1,
}
};
console.log('zlcm')
} else {
element.label = {
show: false,
};
element.labelLine = {
show: false,
lineStyle: {
opacity: 0,
color: 'rgba(255,255,255,0)'
}
};
}
});
this.pieAgeOptions.series[1].data = this.ageItem
// this.$refs.pieChart.hideLoading()
this.$refs.ageChart.setOption(this.pieAgeOptions)
},
clickEduPie (seriesIndex) {
this.eduItem.forEach((element, index) => {
if (index === seriesIndex) {
element.label = {
show: true,
};
element.labelLine = {
show: true,
lineStyle: {
opacity: 1,
}
};
console.log('zlcm')
} else {
element.label = {
show: false,
};
element.labelLine = {
show: false,
lineStyle: {
opacity: 0,
color: 'rgba(255,255,255,0)'
}
};
}
});
this.pieEduOptions.series[1].data = this.eduItem
// this.$refs.pieChart.hideLoading()
this.$refs.eduChart.setOption(this.pieEduOptions)
4 years ago
},
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>
.card-title {
display: flex;
align-items: center;
cursor: pointer;
.title-icon {
display: block;
width: 46px;
height: 34px;
box-sizing: border-box;
margin-right: 6px;
}
::v-deep .el-dropdown {
font-size: 18px;
color: #fff;
font-weight: 800;
}
.title-time {
display: flex;
align-items: center;
box-sizing: border-box;
margin-left: 30px;
font-size: 14px;
color: #fff;
.title-time-label {
margin-right: 10px;
}
::v-deep .el-date-editor--month {
width: 100px;
.el-input__inner {
width: 100px;
height: 24px;
box-sizing: border-box;
padding: 0;
font-size: 14px;
color: #fff;
line-height: 24px;
text-align: center;
background: #06186D;
border: 1px solid #1A64CC;
border-radius: 2px;
}
.el-input__prefix {
display: none;
}
.el-input__suffix {
right: 0;
.el-input__icon {
line-height: 24px;
}
}
}
}
}
.card-echart {
display: flex;
margin-top: 40px;
height: 100%;
.card-left {
position: relative;
flex: 1;
// display: flex;
height: 100%;
.card-flex {
width: 100%;
display: flex;
}
}
}
.card-left-title {
position: relative;
padding-left: 40px;
font-size: 16px;
font-weight: 500;
color: #fff;
}
.card-left-title::after {
content: '';
position: absolute;
top: 50%;
left: 20px;
width: 12px;
height: 12px;
box-sizing: border-box;
margin-top: -6px;
background: #2865FA;
border-radius: 50%;
}
.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%;
}
.echart-cicle0 {
left: 80px;
margin-left: 0;
}
}
.echart-wr100 {
width: 70%;
}
.echarts-tips {
width: 40%;
// flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.echarts-tips-wd50 {
width: 320px;
}
.tips-list, .tips-item, .tips-lists, .tips-items-num {
display: flex;
align-items: center;
}
.tips-list {
// width: 100%;
// height: 100%;
flex-wrap: wrap;
// justify-content: center;
.tips-item {
// flex: 1;
width: 50%;
margin-top: 20px;
// margin-right: 40px;
cursor: pointer;
.tips-item-icon {
width: 20px;
height: 10px;
box-sizing: border-box;
margin-right: 8px;
background: #1B51FF;
border-radius: 2px;
}
.tips-item-text {
font-size: 16px;
color: #D2E7FF;
}
}
}
.tips-lists {
width: 100%;
box-sizing: border-box;
padding: 30px 0 0 30px;
flex-wrap: wrap;
.tips-items {
margin-bottom: 30px;
margin-right: 40px;
// width: 50%;
cursor: pointer;
.tips-items-title {
position: relative;
width: 100px;
height: 26px;
box-sizing: border-box;
padding-left: 6px;
font-size: 16px;
color: #EFF0F1;
background: url('../../../../assets/img/shuju/measure/zi@2x.png') no-repeat left bottom;
&1 {
background: url('../../../../assets/img/shuju/measure/huang@2x.png') no-repeat left bottom;
}
&2 {
background: url('../../../../assets/img/shuju/measure/lan@2x.png') no-repeat left bottom;
}
&3 {
background: url('../../../../assets/img/shuju/measure/lanlv@2x.png') no-repeat left bottom;
}
&4 {
background: url('../../../../assets/img/shuju/measure/lv@2x.png') no-repeat left bottom;
}
}
.tips-items-num {
justify-content: space-between;
box-sizing: border-box;
margin-top: 10px;
// padding-right: 30px;
font-size: 20px;
.tips-item-has {
font-size: 14px;
}
}
}
}
.warning-box-bottom {
height: calc(100% - 500px);
box-sizing: border-box;
margin: 0;
padding: 0 30px;
// overflow-y: scroll;
}
</style>