master
许宏杰 2 months ago
parent 8fd753c438
commit 611927b108

@ -42,7 +42,7 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
.left-color {
flex: 1;
height: 100%;
@ -62,6 +62,7 @@ export default {
.rigth-bottom {
background: red;
border-top: 1px solid white;
// border-left: 1px solid white;
}
}
.house_number {

@ -321,7 +321,6 @@ export default {
async getDeptList() {
let result = await treeselect();
this.deptList = result.data[0].children;
// console.log(result);
},
/**
* 级联筛选

@ -22,5 +22,7 @@ const getters = {
yjTotal: (state) => state.taicang.yjTotal,
xiaoquIntroduce: (state) => state.taicang.xiaoquIntroduce,
colorListL: (state) => state.taicang.colorListL,
threeCell: (state) => state.taicang.threeCell,
pie: (state) => state.taicang.pie,
};
export default getters;

@ -1,7 +1,27 @@
import { getYj } from "@/api/taicangpop/block.js";
import { getxiaoqu } from "@/api/home";
import {
getxiaoqu,
getTotaldata,
echartsData,
getPersonData,
} from "@/api/home";
import { getColorList } from "@/api/taicangpop/new.js";
const order = [
"HZ",
"HL",
"HO",
"HF",
"NZ",
"NL",
"NO",
"NF",
"户籍",
"流动",
"中共党员",
"帮扶对象",
"重点人群",
"退伍军人",
];
const taicang = {
state: {
yjTotal: 0,
@ -32,6 +52,16 @@ const taicang = {
},
},
colorListL: [],
threeCell: {
houseTotal: 0,
personTotal: 0,
netTotal: 0,
buildingTotal: 0,
},
pie: {
total: 0,
update: 0,
},
},
mutations: {
SET_YJ_TOTAL: (state, total) => {
@ -47,6 +77,20 @@ const taicang = {
state.rightTopColor
);
},
SET_THREE_CELL: (state, obj) => {
state.threeCell = {
houseTotal: obj["网格户数据"],
personTotal: obj["网格人数据"],
netTotal: obj["网格总数数据"],
buildingTotal: obj["网格楼栋数据"],
};
},
SET_PIE: (state, obj) => {
state.pie = {
total: obj["所有户数据"],
update: obj["修改户数据"],
};
},
},
actions: {
/**预警总数 */
@ -81,13 +125,41 @@ const taicang = {
});
});
},
/**
* 获取户总数 /人口数 / 网格总数 / 楼栋总数
*/
getThreeCell({ commit }, queryParams) {
return new Promise((resolve, reject) => {
getTotaldata().then((res) => {
commit("SET_THREE_CELL", res.data);
resolve();
});
});
},
/**
* 获取住户 / 居民 饼图数据
*/
GetPie({ commit }, queryParams) {
return new Promise((resolve, reject) => {
if (queryParams.type == "house") {
echartsData().then((res) => {
commit("SET_PIE", res.data);
resolve();
});
} else {
getPersonData().then((res) => {
commit("SET_PIE", res.data);
resolve();
});
}
});
},
},
};
function handleColor(list, leftColor, rightTopColor) {
list.map((item) => {
let isColor = /^[a-zA-Z]+$/.test(item.name);
console.log(isColor);
if (isColor) {
item.color = item.name;
for (let key in leftColor) {
@ -98,6 +170,12 @@ function handleColor(list, leftColor, rightTopColor) {
}
}
});
list = list.filter(
(obj, index, self) => index === self.findIndex((t) => t.name === obj.name)
);
list.sort((a, b) => {
return order.indexOf(a.name) - order.indexOf(b.name);
});
return list;
}

@ -3,7 +3,15 @@
<div class="list-item" v-for="(item, index) in colorListL" :key="index">
<div class="item-name">
<ColorCell :item="item" v-if="item.color" style="margin-right: 12px" />
<span> {{ item.name }}</span>
<span>
{{ item.name }}
<span v-show="item.name == ''"
>(空关{{ colorListL[2].house }})</span
>
<span v-show="item.name == ''"
>(空关{{ colorListL[6].house }})</span
>
</span>
</div>
<div class="item-value">
<span>{{ item.house }}</span>
@ -39,9 +47,8 @@ export default {
background-size: 100% 100%;
display: flex;
flex-direction: column;
padding: 0 28px;
padding-top: 20px;
padding-bottom: 37px;
padding: 25px;
padding-bottom: 23px;
.list-item {
flex: 1;
display: flex;
@ -67,19 +74,22 @@ export default {
}
}
}
.list-item:nth-child(10) .item-value,
.list-item:nth-child(11) .item-value {
.list-item:nth-child(9) .item-value,
.list-item:nth-child(10) .item-value {
span:nth-child(odd) {
font-size: 16px;
color: #ffb400;
font-family: "DIN-Medium-2.otf";
}
}
.list-item:nth-child(10),
.list-item:nth-child(11) {
.list-item:nth-child(9),
.list-item:nth-child(10) {
.item-name {
color: #fff;
}
}
.list-item:nth-child(10) {
border: 0;
}
}
</style>

@ -2,7 +2,7 @@
<div class="pie-chart">
<div class="tabLits">
<div
@click="handleClick(item, index)"
@click="handleClick(item.type, index)"
v-for="(item, index) in tabList"
:key="index"
:class="currentIndex == index ? 'currentIndex' : ''"
@ -14,7 +14,8 @@
<div class="pie-title">目前数据更新情况</div>
<div id="pie-echarts"></div>
<div class="lable">
<span style="color: #ffb400">0</span> / <span>0</span>
<span style="color: #ffb400">{{ pie.update }}</span> /
<span>{{ pie.total }}</span>
{{ currentIndex == 0 ? "户" : "人" }}
</div>
</div>
@ -23,24 +24,37 @@
<script>
var echarts = require("echarts");
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["pie"]),
},
data() {
return {
currentIndex: 0,
tabList: [
{ name: "住户", value: 0 },
{ name: "居民", value: 1 },
{ name: "住户", type: "house" },
{ name: "居民", value: "person" },
],
};
},
mounted() {
this.initPieEcharts(80);
this.getPie("house");
},
methods: {
handleClick(item, index) {
handleClick(type, index) {
if (this.currentIndex == index) return;
this.getPie(type);
this.currentIndex = index;
},
getPie(type) {
this.$store.dispatch("GetPie", { type: type }).then((res) => {
let percent = Math.trunc((this.pie.update / this.pie.total) * 100);
this.initPieEcharts(percent);
});
},
initPieEcharts(num) {
if (!num) {
num = 0;
@ -154,7 +168,7 @@ export default {
},
],
};
myChart.setOption(option);
myChart.setOption(option, true);
},
},
};

@ -4,11 +4,11 @@
<img src="@/assets/images/ui/icon_3.png" alt="" />
<div class="lable-value">
<div class="value-item">
<div class="value-data">17873</div>
<div class="value-data">{{ threeCell.houseTotal }}</div>
<div class="value-lable">总户数</div>
</div>
<div class="value-item" style="margin-left: 6px">
<div class="value-data">39724</div>
<div class="value-data">{{ threeCell.personTotal }}</div>
<div class="value-lable">人口数</div>
</div>
</div>
@ -16,14 +16,14 @@
<div class="cell-item">
<img src="@/assets/images/ui/icon_1.png" alt="" />
<div class="value-item">
<div class="value-data">19</div>
<div class="value-data">{{ threeCell.netTotal }}</div>
<div class="value-lable">网格总数</div>
</div>
</div>
<div class="cell-item">
<img src="@/assets/images/ui/icon_2.png" alt="" />
<div class="value-item">
<div class="value-data">19</div>
<div class="value-data">{{ threeCell.buildingTotal }}</div>
<div class="value-lable">楼幢总数</div>
</div>
</div>
@ -31,7 +31,15 @@
</template>
<script>
export default {};
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["threeCell"]),
},
data() {
return {};
},
};
</script>
<style lang="scss" scoped>

@ -43,7 +43,8 @@ export default {
},
mounted() {
this.$store.dispatch("GetXiaoquInfo", this.dept.deptId);
this.$store.dispatch("GetcolorList", this.dept.deptId);
this.$store.dispatch("getThreeCell");
this.$store.dispatch("GetcolorList");
},
methods: {},
};

Loading…
Cancel
Save