elink-star
/
epmet-work-pc-chengyang
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

静态居民分类信息不完整数量统计(echarts图表柱状图)居民分类信息更新情况(表格实现)

feature
李素 2 years ago
parent
5d6474153e
commit
1b984e0464
2 changed files with 305 additions and 198 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. 170
      src/assets/scss/modules/index.scss
  2. 333
      src/views/modules/home/index.vue

170
src/assets/scss/modules/index.scss
View File

@ -22,91 +22,69 @@
.white-box {
background-color: white;
margin-top: 10px;
height: calc(100% - 10px);
background-color: white;
margin-top: 10px;
flex-grow: 0;
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
flex-grow: 1;
max-height: calc(50% - 10px);
overflow: hidden scroll;
position: relative;
}
.group_20 {
background-color: rgba(255, 255, 255, 1);
border-radius: 4px;
height: 382px;
margin-top: 16px;
width: 590px;
position: relative;
}
.section_24 {
width: 575px;
height: 19px;
margin-top: 18px;
display: flex;
justify-content: space-between;
}
.group_22 {
background-color: rgba(0, 86, 214, 1);
border-radius: 2px;
width: 4px;
height: 16px;
margin-top: -23px;
}
.text_72 {
width: 160px;
height: 16px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 16px;
font-family: PingFang-SC-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 32px;
margin-left: 9px;
}
.image-text_6 {
width: 77px;
height: 18px;
margin: 1px 0 0 325px;
}
// .noe-text{
// border-left: 4px solid #2683DB;
// padding-left: 10px;
// height: 30px;
// margin-right: 10px;
// size: 15px;
// z-index: 1;
// display: flex;
// justify-content: space-between;
// position: fixed;
// background: white;
// width: 551px;
// }
.noe-text {
position: relative;
padding-left: 14px; /* 调整左边距以容纳边框 */
height: 30px;
margin-right: 10px;
font-size: 15px; /* 正确的属性名称应为 font-size */
z-index: 1;
display: flex;
justify-content: space-between;
position: fixed;
background: white;
width: 551px;
.thumbnail_4 {
width: 18px;
height: 18px;
}
.text-group_9 {
width: 56px;
height: 14px;
overflow-wrap: break-word;
color: rgba(51, 51, 51, 1);
font-size: 14px;
font-family: PingFang-SC-Medium;
font-weight: 500;
text-align: left;
white-space: nowrap;
line-height: 32px;
margin-top: 1px;
.noe-text::before {
content: "";
position: absolute;
top: 5px;
left: 0;
height: 70%; /* 控制边框的长度 */
width: 4px; /* 控制边框的宽度 */
background-color: #2683DB;
}
.g-row {
padding: 5px 6px;
display: flex;
height: 100%;
.g-row-left {
margin-right: auto;
width: calc(66% - 16px);
// margin-right: auto;
margin-right: 15px;
width: calc(60% - 20px);
flex-direction: column;
// justify-content: space-around;
}
.g-row-right {
display: flex;
margin-left: auto;
width: calc(34%);
margin-right: 5px;
flex-grow: 0.5;
width: calc(40% - 20px);
flex-direction: column;
justify-content: space-around;
}
@ -116,6 +94,7 @@
position: relative;
// padding: 16px;
margin-top: 10px;
margin-left: 10px;
background: #ffffff;
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
border-radius: 2px;
@ -131,6 +110,8 @@
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
line-height: 17px;
margin-top: 10px;
margin-left: 10px;
> img {
vertical-align: bottom;
@ -357,6 +338,10 @@
display: flex;
overflow: hidden;
height: 100%;
.echart {
max-width: 100%;
max-height: 100%;
}
.cnt-left {
box-sizing: border-box;
padding: 16px;
@ -460,10 +445,14 @@
.m-tx {
margin-bottom: 13px;
width: 100%;
height: calc(84vh - 430px);
height: 65px;
overflow: hidden;
padding-right: 5px;
box-sizing: border-box;
flex-grow: 1;
// max-height: calc(50% - 10px);
overflow: hidden scroll;
.cnt {
box-sizing: border-box;
margin-top: 12px;
@ -499,6 +488,7 @@
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 22px;
margin-left: 10px;
&:hover {
color: $c1;
cursor: pointer;
@ -510,6 +500,7 @@
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
line-height: 17px;
margin-left: 10px;
}
}
.item_left{
@ -600,24 +591,41 @@
}
}
}
.table {
border-collapse: collapse;
width: 90%;
margin: 0 auto;
}
.table th, .table td {
border: 1px solid rgb(230, 230, 230);
padding: 8px;
text-align: center;
}
.tablee {
display: flex;
flex-direction: column;
max-width: 320px;
max-height: 220px;
margin-top: 25px;
margin-left: 10px;
margin-right: 10px;
}
.table th {
background-color: #F5F7FB;
padding: 8px;
text-align: center;
width: 100px;
}
.row {
display: flex;
}
.cell {
border: 1px solid #ccc;
border: 1px solid #F5F7FB;
padding: 8px;
}
}
.special-header {
background-color: #FFFCF1; /* 设置特定表头的背景颜色为 #FFFCF1 */
}
.update-settings {
margin-right: 25px;
}
.table-container{
// overflow: hidden scroll;
overflow: auto;
}

333
src/views/modules/home/index.vue
View File

@ -15,7 +15,8 @@
<div class="search">
<div class="search-input">
<div class="input">
<input type="text" :placeholder="typePlaceholder[searchData.type]" v-model="searchData.searchKey" @keyup.enter="handleClickSearchBtn" />
<input type="text" :placeholder="typePlaceholder[searchData.type]" v-model="searchData.searchKey"
@keyup.enter="handleClickSearchBtn" />
<div class="close-btn" v-if="searchData.searchKey != ''" @click="searchData.searchKey = ''">
<img src="@/assets/img/shequ/close.png" />
@ -29,54 +30,54 @@
<div class="mewq">
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">93,242</span>
<br>
<span style="color: #858585; font-size: 12px;">居民总数</span>
</div>
<span style="color: #2683DB; font-size: 25px;">93,242</span>
<br>
<span style="color: #858585; font-size: 12px;">居民总数</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">71,320</span>
<br>
<span style="color: #858585; font-size: 12px;">常住人口</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">22,122</span>
<br>
<span style="color: #858585; font-size: 12px;">流动人口</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">26,004</span>
<br>
<span style="color: #858585; font-size: 12px;">房屋总数</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">25,531</span>
<br>
<span style="color: #858585; font-size: 12px;">自住房屋</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">464</span>
<br>
<span style="color: #858585; font-size: 12px;">出租房屋</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">39</span>
<br>
<span style="color: #858585; font-size: 12px;">闲置房屋</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">71,320</span>
<br>
<span style="color: #858585; font-size: 12px;">常住人口</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">22,122</span>
<br>
<span style="color: #858585; font-size: 12px;">流动人口</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">26,004</span>
<br>
<span style="color: #858585; font-size: 12px;">房屋总数</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">25,531</span>
<br>
<span style="color: #858585; font-size: 12px;">自住房屋</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">464</span>
<br>
<span style="color: #858585; font-size: 12px;">出租房屋</span>
</div>
</div>
<div class="boxss">
<div style="margin-top: 10px;">
<span style="color: #2683DB; font-size: 25px;">39</span>
<br>
<span style="color: #858585; font-size: 12px;">闲置房屋</span>
</div>
</div>
</div>
</div>
<div class="m-pan m-box">
@ -86,6 +87,10 @@
</div> -->
<div class="flex_box">
<div class="cnt">
<!-- 树状图 -->
<div class="echart" id="mychart" :style="myChartStyle"></div>
<!-- 树状图end -->
<!-- <div class="cnt-left">
<div class="subtitle">
<img src="@/assets/images/index/i-sqjj.png"/>
@ -120,11 +125,12 @@
三类群体，开展相关的社区服务和活动。
</p>
</div> -->
<el-tabs v-model="activeName" style="width:100%">
<!-- <el-tab-pane label="居民分类信息不完整数量统计" name="resi"> -->
<!-- <el-tabs v-model="activeName" style="width:100%">
<el-tab-pane label="居民分类信息不完整数量统计" name="resi">
<div class="cnt-right">
<div class="list">
<div class="item" @click="handleClickCategory(item)" :key="item.code" v-for="(item, index) in resiCategory.list">
<div class="item" @click="handleClickCategory(item)" :key="item.code"
v-for="(item, index) in resiCategory.list">
<div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
<div class="item-name">
{{ item.name }}
@ -132,17 +138,14 @@
<div class="item-div"></div>
<div class="item-count">{{ item.count }}人</div>
<div class="item-progress">
<b
:style="{
width: item.per + '%',
}"></b>
<b :style="{ width: item.per + '%', }"></b>
</div>
<div class="item-per">{{ item.per }} %</div>
</div>
</div>
</div>
<!-- </el-tab-pane> -->
<!-- <el-tab-pane label="智能预测"
</el-tab-pane> -->
<!-- <el-tab-pane label="智能预测"
name="zhineng">
<div class="cnt-right">
<div class="list">
@ -164,7 +167,7 @@
</div>
</div>
</el-tab-pane> -->
</el-tabs>
<!-- </el-tabs> -->
</div>
</div>
</div>
@ -185,57 +188,36 @@
</div>
<div class="g-row-right">
<div class="m-box m-tx">
<div class="header">
<img src="@/assets/images/index/title-icon-zntx.png" />
<!-- <img src="@/assets/images/index/title-icon-zntx.png" /> -->
<span>消息提醒</span>
</div>
<div class="more" @click="toNoticePage">更多></div>
<div class="cnt" v-if="noticeData.length > 0">
<div @click="handleClickNotice(item)" class="item" :key="'notice' + item.targetId + index" v-for="(item, index) in noticeData">
<div class="item_left">
<div @click="handleClickNotice(item)" class="item" :key="'notice' + item.targetId + index"
v-for="(item, index) in noticeData">
<!-- <div class="item_left">
<i class="i-tag" v-if="item.readFlag == 1">已读</i>
<i class="i-tag" v-else>未读</i>
</div>
</div> -->
<div class="item_right">
<div class="item-date">
{{ item.createdTime }}
</div>
<div class="item-title">
{{ item.content }}
<div class="item-title"
style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 450px;">
<img class="thumbnail_1" referrerpolicy="no-referrer"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjidpevo98fb607sd028bliakr139r25k82b2fbda-8291-4fe3-b190-bfe723a10036" />{{
item.content }}
</div>
</div>
</div>
</div>
<div class="cnt" v-else>
<div class="empty">
<img src="~@/assets/images/shuju/renfang/index/empty.png" />
<span>暂无提醒～</span>
</div>
</div>
</div>
<div class="white-box">
<div class="group_20 flex-col">
<div class="m-box m-tx">
<div class="header">
<img src="@/assets/images/index/title-icon-zntx.png" />
<span>消息提醒</span>
</div>
<div class="more" @click="toNoticePage">更多></div>
<div class="cnt" v-if="noticeData.length > 0">
<div @click="handleClickNotice(item)" class="item" :key="'notice' + item.targetId + index" v-for="(item, index) in noticeData">
<div class="item_left">
<i class="i-tag" v-if="item.readFlag == 1">已读</i>
<i class="i-tag" v-else>未读</i>
</div>
<div class="item_right">
<div class="item-date">
{{ item.createdTime }}
</div>
<div class="item-title">
{{ item.content }}
</div>
</div>
</div>
</div>
<div class="cnt" v-else>
@ -245,31 +227,41 @@
</div>
</div>
</div>
<!-- <div class="section_24 flex-row">
<span class="text_72">居民分类信息更新情况</span>
<div class="nsddak">
<img
class="thumbnail_4"
referrerpolicy="no-referrer"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskhmf0717eflwg54wn73s6spnsg6u48r0f69e94b-2bc8-4156-8330-902087b72e0b"
/>
<span class="text-group_9">更新设置</span>
</div>
</div> -->
<!-- <div class="tablee" style="width: 420px;height: 120px;margin-top: 25px;margin-left: 10px; margin-right: 10px;">
<div class="row" v-for="row in 8" :key="row">
<div class="cell" v-for="col in 6" :key="col">
Row {{ row }} - Column {{ col }}
</div>
</div>
</div> -->
<div class="white-box">
<div class="noe-text"> <span style="margin-top: 10px;">居民分类更新情况</span> <span class="update-settings"
style="margin-top: 10px;"><img referrerpolicy="no-referrer"
src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskhmf0717eflwg54wn73s6spnsg6u48r0f69e94b-2bc8-4156-8330-902087b72e0b" />更新设置</span>
</div>
<el-tabs v-model="activeName" style="width:100%;margin-top: 30px;">
<div class="table-container">
<table class="table">
<thead>
<tr>
<th>居民类别</th>
<th>总人数</th>
<th>分类信息不完整数</th>
<th>更新负责人</th>
<th>更新周期</th>
<th>更新人数</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in tableList" :key="item.code">
<td>{{ item.shenfen }}</td>
<td style="color: #2683DB;">{{ item.zongNumber }}</td>
<td style="color: red;">{{ item.noAllNuber }}</td>
<td class="special-header">{{ item.fuzeren }}</td>
<td class="special-header">{{ item.zhouqi }}</td>
<td class="special-header">{{ item.addNum }}</td>
</tr>
</tbody>
</table>
</div>
</el-tabs>
</div>
</div>
</div>
<fastcall ref="fastcall" />
@ -305,6 +297,18 @@ export default {
total: "",
list: [],
},
tableList: [
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
{ shenfen: '党员', zongNumber: '10', noAllNuber: '1', fuzeren: '王五', zhouqi: '1', addNum: '1' },
],
znycCategory: {
loading: false,
total: "",
@ -329,9 +333,38 @@ export default {
noticeData: [],
activeName: "resi",
numberLiM: [{ mer: 720, bilv: 0.45 }, { mer: 724, bilv: 0.56 }, { mer: 718, bilv: 0.54 }, { mer: 725, bilv: 0.69 }, { mer: 727, bilv: 0.36 }, { mer: 728, bilv: 0.64 }, { mer: 725, bilv: 0.78 }, { mer: 750, bilv: 0.25 }, { mer: 760, bilv: 0.96 }, { mer: 700, bilv: 0.38 }, { mer: 710, bilv: 0.62 }],
myChart: {},
agencyLevel:'',
agencyLevel: '',
xData: ["党员", "残疾人", "退役军人", "失业人员", "低保人员", "保障房人员", "特殊人员", "大病人员", "慢病人员", "特扶人员", "老年人"],
yData: [
// {
// value: 720,
// itemStyle: {
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [{
// offset: 0, color: '#2D7DF2' // 上部颜色
// }, {
// offset: 0.45, color: '#7EB1FE' // 中部颜色
// }, {
// offset: 0.45, color: '#EFB632' // 中部颜色
// }, {
// offset: 1, color: '#FDD77D' // 下部颜色
// }],
// global: false // 默认为 false
// },
// shadowColor: "#91cc75",
// borderType: "dashed",
// // opacity: 0.5
// }
// },725,165,765,742,710,720,730,735,762,754
],
myChartStyle: { float: "left", width: "120%", height: "500px"},
}
},
computed: {
@ -358,20 +391,30 @@ export default {
},
},
mounted() {
this.ehso();
//图形
this.initEcharts();
this.getApiData();
this.$nextTick(() => {
this.initChart()
})
this.agencyLevel = localStorage.getItem("level", data.level);
console.log(
"dynamicMenuRoutes----------------------------",
this.$store.state.sidebarMenuList
"dynamicMenuRoutes----------------------------",
this.$store.state.sidebarMenuList
);
},
methods: {
initChart() {
this.$http.get("/governance/satisfactionOverview/notSatisfactionTrend").then(({ data: { data } }) => {
this.myChart = echarts.init(document.getElementById("my_chart"));
let series = data.series.map((item, index) => {
return {
...item,
@ -601,7 +644,63 @@ export default {
this.$message.error(msg);
}
},
},
initEcharts() {
// 基本柱状图
const option = {
xAxis: {
type: 'category',
axisLabel: {
rotate: -45,
// textStyle: {
// fontSize: 9.1
// }
},
data: this.xData,
},
yAxis: {},
series: [
{
type: "bar", //形状为柱状图
barWidth: '40%',
data: this.yData,
},
],
};
const myChart = echarts.init(document.getElementById("mychart"));
myChart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
myChart.resize();
});
},
ehso() {
this.yData = this.numberLiM.map(item => ({
value: item.mer,
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: '#2D7DF2' },
{ offset: item.bilv, color: '#7EB1FE' },
{ offset: item.bilv, color: '#EFB632' },
{ offset: 1, color: '#FDD77D' }
],
global: false
},
shadowColor: "#91cc75",
borderType: "dashed",
// opacity: 0.5
}
}));
},
},
};
</script>

Write Preview
Loading…
Cancel
Save