|
|
@ -50,27 +50,27 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="boxss"> |
|
|
|
<div style="margin-top: 10px;"> |
|
|
|
<div style="margin-top: 10px;" @click="jumpToHouse()"> |
|
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.homeCount }}</span> |
|
|
|
<br> |
|
|
|
<span style="color: #858585; font-size: 12px;">房屋总数</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="boxss"> |
|
|
|
<div class="boxss" @click="jumpToHouse('zizhuM')"> |
|
|
|
<div style="margin-top: 10px;"> |
|
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.selfStay }}</span> |
|
|
|
<br> |
|
|
|
<span style="color: #858585; font-size: 12px;">自住房屋</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="boxss"> |
|
|
|
<div class="boxss" @click="jumpToHouse('chuzuM')"> |
|
|
|
<div style="margin-top: 10px;"> |
|
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.rentOut }}</span> |
|
|
|
<br> |
|
|
|
<span style="color: #858585; font-size: 12px;">出租房屋</span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="boxss"> |
|
|
|
<div class="boxss" @click="jumpToHouse('xianzhiM')"> |
|
|
|
<div style="margin-top: 10px;"> |
|
|
|
<span style="color: #2683DB; font-size: 25px;">{{ pandectData.vacantHouse }}</span> |
|
|
|
<br> |
|
|
@ -254,12 +254,12 @@ |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
<tr v-for="(item, index) in tableList" :key="item.code"> |
|
|
|
<td style="opacity: 0.5;">{{ 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> |
|
|
|
<td style="opacity: 0.5;">{{ item.residentCategoryName }}</td> |
|
|
|
<td style="color: #2683DB;">{{ item.total }}</td> |
|
|
|
<td style="color: red;">{{ item.nonIntegratedNum }}</td> |
|
|
|
<td class="special-header">{{ item.updatePeriodName }}</td> |
|
|
|
<td class="special-header">{{ item.updatedTime }}</td> |
|
|
|
<td class="special-header">{{ item.updateResiNum }}</td> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
@ -302,16 +302,16 @@ export default { |
|
|
|
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' }, |
|
|
|
// { 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, |
|
|
@ -333,14 +333,11 @@ export default { |
|
|
|
floatingResiCount: "", |
|
|
|
permanentResiCount: "", |
|
|
|
}, |
|
|
|
|
|
|
|
noticeData: [], |
|
|
|
|
|
|
|
activeName: "resi", |
|
|
|
numberLiM: [{ mer: 820, 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: '', |
|
|
|
xData: ["党员", "残疾人", "退役军人", "失业人员", "低保人员", "保障房人员", "特殊人员", "大病人员", "慢病人员", "特扶人员", "老年人"], |
|
|
|
xData: ["党员", "残疾人", "退役军人", "失业人员", "低保人员", "保障房人员", "特殊人员", "慢病人员", "老年人"], |
|
|
|
yData: [ |
|
|
|
// { |
|
|
|
// value: 720, |
|
|
@ -394,15 +391,15 @@ export default { |
|
|
|
immediate: true, |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.ehso(); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
created() { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
// this.ehso(); |
|
|
|
//图形 |
|
|
|
this.initEcharts(); |
|
|
|
|
|
|
|
|
|
|
|
this.getApiData(); |
|
|
|
this.$nextTick(() => { |
|
|
@ -413,13 +410,13 @@ export default { |
|
|
|
"dynamicMenuRoutes----------------------------", |
|
|
|
this.$store.state.sidebarMenuList |
|
|
|
); |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
initChart() { |
|
|
|
this.$http.get("/governance/satisfactionOverview/notSatisfactionTrend").then(({ data: { data } }) => { |
|
|
|
this.myChart = echarts.init(document.getElementById("my_chart")); |
|
|
|
console.log("123123", data.series) |
|
|
|
|
|
|
|
// console.log("123123", data.series) |
|
|
|
let series = data.series.map((item, index) => { |
|
|
|
return { |
|
|
|
...item, |
|
|
@ -470,7 +467,17 @@ export default { |
|
|
|
this.myChart.setOption(option, true); |
|
|
|
window.addEventListener("resize", this.handleWindowResize); |
|
|
|
}); |
|
|
|
this.borderH(); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
borderH() { |
|
|
|
this.$http.post("/actual/base/residentCategoryUpdateInfo/getUpdateAndintegrityList").then(({ data: { data } }) => { |
|
|
|
this.tableList = data |
|
|
|
console.log("请求成功:", data); |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
handleWindowResize() { |
|
|
|
if (this.myChart) { |
|
|
|
this.myChart.resize(); |
|
|
@ -512,6 +519,16 @@ export default { |
|
|
|
path: "/main/home-notice", |
|
|
|
}); |
|
|
|
}, |
|
|
|
// |
|
|
|
jumpToHouse(e){ |
|
|
|
console.log("看看存进得什么",e) |
|
|
|
this.$router.push({ |
|
|
|
path: "/main/base-community-community", |
|
|
|
query: { |
|
|
|
param1: e, |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
toSearchPage(type, searchKey) { |
|
|
|
this.$router.push({ |
|
|
@ -659,127 +676,140 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
initEcharts() { |
|
|
|
// 基本柱状图 |
|
|
|
const option = { |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
axisLabel: { |
|
|
|
// rotate: -45, |
|
|
|
textStyle: { |
|
|
|
fontSize: 10 |
|
|
|
} |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false, // 不显示x轴刻度线 |
|
|
|
}, |
|
|
|
data: this.xData, |
|
|
|
this.$http.get("/actual/base/residentIntegrity/resiCategoryStats/byOrg/query4Org").then(({ data: { data } }) => { |
|
|
|
this.myChart = echarts.init(document.getElementById("my_chart")); |
|
|
|
|
|
|
|
}, |
|
|
|
yAxis: {}, |
|
|
|
graphic: [{ // 添加自定义的文字块 |
|
|
|
type: 'group', |
|
|
|
left: 'center', |
|
|
|
bottom: 20, |
|
|
|
z: 100, |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
type: 'rect', |
|
|
|
left: 0, |
|
|
|
// top: 'middle', |
|
|
|
shape: { |
|
|
|
width: 30, |
|
|
|
height: 6, |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: '#0056D6', // 蓝色方块 |
|
|
|
this.yData = data.categoryStatsDatas.map(item => { |
|
|
|
const total = Number(item.total); |
|
|
|
const nonIntegratedNum = Number(item.nonIntegratedNum); |
|
|
|
let ratio = ''; |
|
|
|
if (total !== 0) { |
|
|
|
ratio = 1 - (nonIntegratedNum / total); |
|
|
|
} |
|
|
|
// console.log("nonIntegratedNum", nonIntegratedNum) |
|
|
|
// console.log("total", total) |
|
|
|
return { |
|
|
|
value: total, |
|
|
|
itemStyle: { |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 1, |
|
|
|
colorStops: [ |
|
|
|
{ offset: 0, color: '#2D7DF2' }, |
|
|
|
{ offset: ratio, color: '#7EB1FE' }, |
|
|
|
{ offset: ratio, color: '#EFB632' }, |
|
|
|
{ offset: 1, color: '#FDD77D' } |
|
|
|
], |
|
|
|
global: false |
|
|
|
}, |
|
|
|
shadowColor: "#91cc75", |
|
|
|
borderType: "dashed", |
|
|
|
// opacity: 0.5 |
|
|
|
} |
|
|
|
}; |
|
|
|
}); |
|
|
|
// 基本柱状图 |
|
|
|
const option = { |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
axisLabel: { |
|
|
|
// rotate: -45, |
|
|
|
textStyle: { |
|
|
|
fontSize: 10 |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'text', |
|
|
|
left: 35, |
|
|
|
// top: 'middle', |
|
|
|
style: { |
|
|
|
text: '分类居民总数', |
|
|
|
fill: '#333', |
|
|
|
fontSize: 12, |
|
|
|
// fontWeight: 'bold', |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false, // 不显示x轴刻度线 |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'rect', |
|
|
|
left: 130, |
|
|
|
// top: 'middle', |
|
|
|
shape: { |
|
|
|
width: 30, |
|
|
|
height: 6, |
|
|
|
data: this.xData, |
|
|
|
|
|
|
|
}, |
|
|
|
yAxis: {}, |
|
|
|
graphic: [{ // 添加自定义的文字块 |
|
|
|
type: 'group', |
|
|
|
left: 'center', |
|
|
|
bottom: 20, |
|
|
|
z: 100, |
|
|
|
children: [ |
|
|
|
{ |
|
|
|
type: 'rect', |
|
|
|
left: 0, |
|
|
|
// top: 'middle', |
|
|
|
shape: { |
|
|
|
width: 30, |
|
|
|
height: 6, |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: '#0056D6', // 蓝色方块 |
|
|
|
}, |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: '#FFDB84 ', // 橙色方块 |
|
|
|
{ |
|
|
|
type: 'text', |
|
|
|
left: 35, |
|
|
|
// top: 'middle', |
|
|
|
style: { |
|
|
|
text: '分类居民总数', |
|
|
|
fill: '#333', |
|
|
|
fontSize: 12, |
|
|
|
// fontWeight: 'bold', |
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'text', |
|
|
|
left: 170, |
|
|
|
// top: 'middle', |
|
|
|
style: { |
|
|
|
text: '分类信息不完整数', |
|
|
|
fill: '#333', |
|
|
|
fontSize: 12, |
|
|
|
// fontWeight: 'bold', |
|
|
|
{ |
|
|
|
type: 'rect', |
|
|
|
left: 130, |
|
|
|
// top: 'middle', |
|
|
|
shape: { |
|
|
|
width: 30, |
|
|
|
height: 6, |
|
|
|
}, |
|
|
|
style: { |
|
|
|
fill: '#FFDB84 ', // 橙色方块 |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
type: 'text', |
|
|
|
left: 170, |
|
|
|
// top: 'middle', |
|
|
|
style: { |
|
|
|
text: '分类信息不完整数', |
|
|
|
fill: '#333', |
|
|
|
fontSize: 12, |
|
|
|
// fontWeight: 'bold', |
|
|
|
}, |
|
|
|
}, |
|
|
|
], |
|
|
|
}], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: "bar", |
|
|
|
barWidth: '30%', |
|
|
|
barGap: '20%', |
|
|
|
data: this.yData, |
|
|
|
}, |
|
|
|
], |
|
|
|
}], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
type: "bar", |
|
|
|
barWidth: '30%', |
|
|
|
barGap: '20%', |
|
|
|
data: this.yData, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
const myChart = echarts.init(document.getElementById("mychart")); |
|
|
|
myChart.setOption(option); |
|
|
|
//随着屏幕大小调节图表 |
|
|
|
window.addEventListener("resize", () => { |
|
|
|
myChart.resize(); |
|
|
|
}); |
|
|
|
myChart.on("click", (e) => { |
|
|
|
console.log("123123123112", e.name); |
|
|
|
this.$router.push({ |
|
|
|
path: "/main/base-resi", |
|
|
|
query: { |
|
|
|
param1: e.name, |
|
|
|
} |
|
|
|
}; |
|
|
|
const myChart = echarts.init(document.getElementById("mychart")); |
|
|
|
myChart.setOption(option); |
|
|
|
//随着屏幕大小调节图表 |
|
|
|
window.addEventListener("resize", () => { |
|
|
|
myChart.resize(); |
|
|
|
}); |
|
|
|
myChart.on("click", (e) => { |
|
|
|
console.log("123123123112", e.name); |
|
|
|
this.$router.push({ |
|
|
|
path: "/main/base-resi", |
|
|
|
query: { |
|
|
|
param1: e.name, |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
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 |
|
|
|
} |
|
|
|
})); |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}; |
|
|
|