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

楼栋页面UI修改

V1.0
PLUTO 2 years ago
parent
7b8818ccac
commit
757f7cdeb0
6 changed files with 217 additions and 207 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/home/dangerHomeBg.png
  2. 7
      src/js/store/modules/chooseArea.js
  3. 147
      src/views/dataBoard/cpts/homeDetails/index.vue
  4. 2
      src/views/dataBoard/overview/components/jdwgy.vue
  5. 2
      src/views/dataBoardMain/main-content.vue
  6. 266
      src/views/modules/home/index.vue

BIN
src/assets/images/home/dangerHomeBg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 627 B

7
src/js/store/modules/chooseArea.js
View File

@ -3,6 +3,7 @@ const state = {
orgId: "", orgId: "",
level: "", level: "",
}, },
commonLoading: false,
realScale: null, realScale: null,
}; };
@ -13,6 +14,9 @@ const mutations = {
CHOOSE_REAL_SCALE: (state, name) => { CHOOSE_REAL_SCALE: (state, name) => {
state.realScale = name; state.realScale = name;
}, },
COMMON_LOADING: (state, flag) => {
state.commonLoading = flag;
},
}; };
const actions = { const actions = {
@ -22,6 +26,9 @@ const actions = {
chooseScale({ commit }, name) { chooseScale({ commit }, name) {
commit("CHOOSE_REAL_SCALE", name); commit("CHOOSE_REAL_SCALE", name);
}, },
chooseLoading({ commit }, flag) {
commit("COMMON_LOADING", flag);
},
}; };
export default { export default {

147
src/views/dataBoard/cpts/homeDetails/index.vue
View File

@ -34,7 +34,20 @@
<div class="apar_center"> <div class="apar_center">
<div class="apar_center_flex" :style="{ width: flexWidth + 'px' }"> <div class="apar_center_flex" :style="{ width: flexWidth + 'px' }">
<div v-for="(item, index) in houseMountArr" :key="index" class="floor"> <div v-for="(item, index) in houseMountArr" :key="index" class="floor">
<div class="households" v-for="itm in item" :key="itm.id">{{ itm.doorName }}</div> <div v-for="itm in item" :key="itm.id" :class="[itm.riskyNum === 0 && itm.importanceNum === 0 ? 'households' : '', itm.riskyNum > 0 ? 'dangerHome' : '', itm.importanceNum > 0 ? 'dangerPeople' : '', itm.rentFlag === '2' ? 'freeHome' : '']">
<div v-if="itm.riskyNum === 0 && itm.importanceNum === 0 && itm.rentFlag != '2'">{{ itm.doorName }}</div>
<div v-if="itm.riskyNum > 0" class="dangerClass">
<div>{{ itm.doorName }}</div>
<img :src="require('@/assets/images/home/dangerHome.png')" alt="" />
</div>
<div v-if="itm.importanceNum > 0" class="dangerClass">
<div>{{ itm.doorName }}</div>
<img :src="require('@/assets/images/home/dangerPeople.png')" alt="" />
</div>
<div v-if="itm.rentFlag === '2'" class="dangerClass">
<div>闲置</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -56,10 +69,10 @@
<el-input v-model.trim="queryParams.ownerPhone" size="small" placeholder="按房主电话"></el-input> <el-input v-model.trim="queryParams.ownerPhone" size="small" placeholder="按房主电话"></el-input>
<el-input v-model.trim="queryParams.ownerIdCard" size="small" placeholder="按房主身份证号"></el-input> <el-input v-model.trim="queryParams.ownerIdCard" size="small" placeholder="按房主身份证号"></el-input>
<el-select popper-class="selectPopClass" clearable v-model="queryParams.residentTag" size="small" placeholder="居民类型"> <el-select popper-class="selectPopClass" clearable v-model="queryParams.residentTag" size="small" placeholder="居民类型">
<el-option v-for="item in satisfactionCategoryOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> <el-option v-for="item in peopleTypeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select> </el-select>
<el-select popper-class="selectPopClass" clearable v-model="queryParams.riskyFlag" size="small" placeholder="满意度风险家庭"> <el-select popper-class="selectPopClass" clearable v-model="queryParams.riskyFlag" size="small" placeholder="满意度风险家庭">
<el-option v-for="item in satisfactionCategoryOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> <el-option v-for="item in riskHomeList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select> </el-select>
<el-button size="small" class="btn" type="primary" @click="search">查询</el-button> <el-button size="small" class="btn" type="primary" @click="search">查询</el-button>
@ -69,9 +82,9 @@
<el-table :data="list" v-loading="loading" height="500" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)"> <el-table :data="list" v-loading="loading" height="500" element-loading-text="加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 21, 64, 0.3)">
<el-table-column label="序号" type="index" width="80" /> <el-table-column label="序号" type="index" width="80" />
<el-table-column prop="doorName" width="100" label="门牌号" /> <el-table-column prop="doorName" width="100" label="门牌号" />
<el-table-column prop="fullName" width="120" show-overflow-tooltip label="所属小区" /> <el-table-column prop="quartersName" width="120" show-overflow-tooltip label="所属小区" />
<el-table-column prop="buildingId" width="120" show-overflow-tooltip label="所属楼栋" /> <el-table-column prop="buildingName" width="120" show-overflow-tooltip label="所属楼栋" />
<el-table-column prop="buildingUnitId" width="120" show-overflow-tooltip label="所属单元" /> <el-table-column prop="buildingUnitName" width="120" show-overflow-tooltip label="所属单元" />
<el-table-column prop="houseCode" width="120" label="房屋编码" /> <el-table-column prop="houseCode" width="120" label="房屋编码" />
<el-table-column prop="rentFlag" width="120" label="房屋状态"> <el-table-column prop="rentFlag" width="120" label="房屋状态">
<template slot-scope="scope"> <template slot-scope="scope">
@ -79,14 +92,14 @@
<span>{{ getRentFlag(scope.row.rentFlag) }}</span> <span>{{ getRentFlag(scope.row.rentFlag) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="houseType" width="120" label="房屋类型"> <!-- <el-table-column prop="houseType" width="120" label="房屋类型">
<template slot-scope="scope"> <template slot-scope="scope"> -->
<!-- 1楼房，2平房，3别墅 --> <!-- 1楼房，2平房，3别墅 -->
<span>{{ getHouseType(scope.row.houseType) }}</span> <!-- <span>{{ getHouseType(scope.row.houseType) }}</span>
</template> </template>
</el-table-column> </el-table-column> -->
<el-table-column prop="ownerName" width="120" label="房主姓名" /> <el-table-column prop="ownerName" width="120" label="房主姓名" />
<el-table-column prop="ownerPhone" width="120" label="房主电话"> <el-table-column prop="ownerPhone" width="120" show-overflow-tooltip label="房主电话">
<template slot-scope="scope"> <template slot-scope="scope">
{{ $sensitive(scope.row.ownerPhone, 3, 7) }} {{ $sensitive(scope.row.ownerPhone, 3, 7) }}
</template> </template>
@ -148,22 +161,39 @@ export default {
residentTag: "", residentTag: "",
}, },
orgOptions: [], orgOptions: [],
satisfactionSourceOptions: [], peopleTypeList: [],
satisfactionCategoryOptions: [], riskHomeList: [
{
label: "风险",
value: "1",
},
{
label: "无风险",
value: "0",
},
],
flexWidth: 0, flexWidth: 0,
loading: false, loading: false,
homeMsg: {}, homeMsg: {},
list: [], list: [],
homeText: "", homeText: "",
buildingList: [], buildingList: [],
houseMountArr: [], houseMountArr: [
// [
// { doorName: 101, riskyNum: 0, importanceNum: 0, rentFlag: "0" },
// { doorName: 102, riskyNum: 1, importanceNum: 0, rentFlag: "0" },
// { doorName: 103, riskyNum: 0, importanceNum: 1, rentFlag: "0" },
// { doorName: 104, riskyNum: 0, importanceNum: 0, rentFlag: "2" },
// ],
],
}; };
}, },
watch: {}, watch: {},
mounted() { mounted() {
const buId = this.$route.query.buId || null; const buId = this.$route.query.buId || null;
this.getList(buId); this.getList(buId);
this.getTableData(); // this.getTableData(this.$route.query.id);
this.getPeopleTypeList();
}, },
methods: { methods: {
getDoorNameList(list) { getDoorNameList(list) {
@ -197,6 +227,19 @@ export default {
return doorNameList; return doorNameList;
}, },
getPeopleTypeList() {
this.$http
.post("sys/dict/data/dictlist", {
dictType: "resident_category",
})
.then((res) => {
const { code, data } = res.data;
if (code === 0) {
this.peopleTypeList = data;
}
});
},
getUnitList(id) { getUnitList(id) {
this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + id).then((res) => { this.$http.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + id).then((res) => {
const { const {
@ -207,7 +250,7 @@ export default {
let unitInfos = unitInfo || {}; let unitInfos = unitInfo || {};
this.homeMsg = unitInfos; this.homeMsg = unitInfos;
this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : "") + (unitInfos.buildingName ? unitInfos.buildingName : "") + (unitInfos.unitNum ? unitInfos.unitNum + "单元" : ""); this.homeText = (unitInfos.quartersName ? unitInfos.quartersName : "") + (unitInfos.buildingName ? unitInfos.buildingName : "") + (unitInfos.unitNum ? unitInfos.unitNum + "单元" : "");
this.houseMountArr = this.getDoorNameList(this.list); this.houseMountArr = this.getDoorNameList(houseList);
if (this.houseMountArr.length > 0) { if (this.houseMountArr.length > 0) {
this.flexWidth = this.houseMountArr[0].length * 58; this.flexWidth = this.houseMountArr[0].length * 58;
} }
@ -215,14 +258,17 @@ export default {
}); });
}, },
getTableData() { getTableData(id) {
const { id } = this.$route.query;
this.queryParams.unitId = id; this.queryParams.unitId = id;
this.loading = true; this.loading = true;
this.$http.get("/actual/base/streetOverview/getUnitHouseOverviewList?" + this.$paramsFormat(this.queryParams)).then((res) => { this.$http.get("/actual/base/streetOverview/getUnitHouseOverviewList?" + this.$paramsFormat(this.queryParams)).then((res) => {
const { code, data } = res.data; const {
code,
data: { list, total },
} = res.data;
if (code === 0) { if (code === 0) {
this.list = data; this.list = list;
this.total = total;
this.loading = false; this.loading = false;
} else { } else {
this.loading = false; this.loading = false;
@ -230,7 +276,10 @@ export default {
}); });
}, },
search() {}, search() {
this.queryParams.pageNo = 1;
this.getTableData();
},
getList(buid) { getList(buid) {
const homeType = this.$route.query.typeB; const homeType = this.$route.query.typeB;
@ -247,6 +296,7 @@ export default {
if (item.id === buid) { if (item.id === buid) {
item.ifActive = true; item.ifActive = true;
this.getUnitList(item.id); this.getUnitList(item.id);
this.getTableData(item.id);
} else { } else {
item.ifActive = false; item.ifActive = false;
} }
@ -256,6 +306,7 @@ export default {
if (i === 0) { if (i === 0) {
item.ifActive = true; item.ifActive = true;
this.getUnitList(item.id); this.getUnitList(item.id);
this.getTableData(item.id);
} else { } else {
item.ifActive = false; item.ifActive = false;
} }
@ -269,6 +320,7 @@ export default {
}); });
} else { } else {
this.getUnitList(this.$route.query.id); this.getUnitList(this.$route.query.id);
this.getTableData(this.$route.query.id);
} }
}, },
@ -298,6 +350,7 @@ export default {
if (item.id === d.id) { if (item.id === d.id) {
d.ifActive = true; d.ifActive = true;
this.getUnitList(item.id); this.getUnitList(item.id);
this.getTableData(item.id);
} else { } else {
d.ifActive = false; d.ifActive = false;
} }
@ -337,6 +390,22 @@ export default {
cursor: pointer; cursor: pointer;
} }
@mixin homeCommon {
height: 58px;
background-size: 100% 100%;
display: flex;
flex: 0 0 48px;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #fff;
&:not(:last-child) {
margin-right: 10px;
}
}
.top-nav-list { .top-nav-list {
display: flex; display: flex;
margin-bottom: 16px; margin-bottom: 16px;
@ -403,21 +472,29 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
.households { .households {
height: 58px; @include homeCommon;
background: url("@/assets/images/home/hasPeople.png") no-repeat; background: url("@/assets/images/home/hasPeople.png") no-repeat;
background-size: 100% 100%;
display: flex;
flex: 0 0 48px;
align-items: center;
justify-content: center;
font-size: 14px;
font-family: PingFang SC;
font-weight: 500;
color: #7fceff;
&:not(:last-child) {
margin-right: 10px;
}
} }
.dangerHome,
.dangerPeople {
@include homeCommon;
background: url("@/assets/images/home/dangerHomeBg.png") no-repeat;
}
.freeHome {
@include homeCommon;
background: url("@/assets/images/home/freeHome.png") no-repeat;
}
}
}
.dangerClass {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
div:first-child {
margin-bottom: 5px;
font-weight: bold;
} }
} }

2
src/views/dataBoard/overview/components/jdwgy.vue
View File

@ -126,9 +126,11 @@ export default {
getData() { getData() {
this.loading = true; this.loading = true;
if (this.currentLevelData.orgLevel == "grid") { if (this.currentLevelData.orgLevel == "grid") {
this.$store.dispatch("chooseArea/chooseLoading", true);
const personType = this.ifUnit && this.peopleType === "unit" ? "unit" : this.peopleType; const personType = this.ifUnit && this.peopleType === "unit" ? "unit" : this.peopleType;
this.$http.get("/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=" + personType + "&level=" + this.currentLevelData.orgLevel + "&orgId=" + this.currentLevelData.orgId).then(({ data: { data } }) => { this.$http.get("/actual/base/streetOverview/queryPersonnelGridGroup?personnelType=" + personType + "&level=" + this.currentLevelData.orgLevel + "&orgId=" + this.currentLevelData.orgId).then(({ data: { data } }) => {
this.loading = false; this.loading = false;
this.$store.dispatch("chooseArea/chooseLoading", false);
this.wglist = data; this.wglist = data;
this.$emit( this.$emit(
"setPoint", "setPoint",

2
src/views/dataBoardMain/main-content.vue
View File

@ -5,7 +5,7 @@
<template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)"> <template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)">
<iframe :src="$router.currentRoute.meta.iframeURL + '?token=' + token + '&customerId=' + customerId" ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes" :style="{ height: $store.state.fixed1920.height - 100 + 'px' }" /> <iframe :src="$router.currentRoute.meta.iframeURL + '?token=' + token + '&customerId=' + customerId" ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes" :style="{ height: $store.state.fixed1920.height - 100 + 'px' }" />
</template> </template>
<keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)" :exclude="['homeDetails', 'dissatisfiedPage']"> <keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)" :exclude="['homeDetails', 'dissatisfiedPage', 'Microgrid']">
<router-view ref="reloadPage" @changeCustomerName="changeCustomerName" /> <router-view ref="reloadPage" @changeCustomerName="changeCustomerName" />
</keep-alive> </keep-alive>
</template> </template>

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

@ -9,149 +9,90 @@
</div> </div>
<div class="tabs"> <div class="tabs">
<div :class="{ 'z-on': searchData.type == 'jumin' }" <div :class="{ 'z-on': searchData.type == 'jumin' }" @click="searchDataTab('jumin')">查居民</div>
@click="searchDataTab('jumin')"> <div :class="{ 'z-on': searchData.type == 'fangwu' }" @click="searchDataTab('fangwu')">查房屋</div>
查居民
</div>
<div :class="{ 'z-on': searchData.type == 'fangwu' }"
@click="searchDataTab('fangwu')">
查房屋
</div>
</div> </div>
<div class="search"> <div class="search">
<div class="search-input"> <div class="search-input">
<div class="input"> <div class="input">
<input type="text" <input type="text" :placeholder="typePlaceholder[searchData.type]" v-model="searchData.searchKey" @keyup.enter="handleClickSearchBtn" />
:placeholder="typePlaceholder[searchData.type]
" <div class="close-btn" v-if="searchData.searchKey != ''" @click="searchData.searchKey = ''">
v-model="searchData.searchKey" <img src="@/assets/img/shequ/close.png" />
@keyup.enter="handleClickSearchBtn"/>
<div class="close-btn"
v-if="searchData.searchKey != ''"
@click="searchData.searchKey = ''">
<img src="@/assets/img/shequ/close.png"/>
</div> </div>
</div> </div>
<div class="btn" <div class="btn" @click="handleClickSearchBtn">查一下</div>
@click="handleClickSearchBtn">
查一下
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class=" m-pan m-box"> <div class="m-pan m-box">
<div class="header"> <div class="header">
<img src="@/assets/images/index/title-icon-sqzl.png"/> <img src="@/assets/images/index/title-icon-sqzl.png" />
<span>组织总览</span> <span>组织总览</span>
</div> </div>
<div class="flex_box"> <div class="flex_box">
<div class="cnt"> <div class="cnt">
<div class="cnt-left"> <div class="cnt-left">
<div class="subtitle"> <div class="subtitle">
<img src="@/assets/images/index/i-sqjj.png"/> <img src="@/assets/images/index/i-sqjj.png" />
<span>组织简介</span> <span>组织简介</span>
</div> </div>
<p> <p>
{{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为{{ {{ pandectData.deptName }}，<span v-if="pandectData.gridCount">划分为{{ pandectData.underCount }}个{{ pandectData.underName }}，</span> 现有房屋{{ pandectData.homeCount }}间，自住房屋{{ pandectData.selfStay }}间、出租房屋{{ pandectData.rentOut }}间、闲置房屋{{ pandectData.vacantHouse }}间，现有居民{{ pandectData.resiCount }}户、{{ pandectData.totalResidents }}人，其中常住人口{{ pandectData.permanentResiCount }}人，流动人口{{ pandectData.floatingResiCount }}人，各类群体分布如下：
pandectData.underCount
}}个{{
pandectData.underName
}}，</span> 现有房屋{{ pandectData.homeCount }}间，自住房屋{{
pandectData.selfStay
}}间、出租房屋{{
pandectData.rentOut
}}间、闲置房屋{{
pandectData.vacantHouse
}}间，现有居民{{ pandectData.resiCount }}户、{{
pandectData.totalResidents
}}人，其中常住人口{{ pandectData.permanentResiCount }}人，流动人口{{
pandectData.floatingResiCount
}}人，各类群体分布如下：
</p> </p>
<div class="subtitle"> <div class="subtitle">
<img src="@/assets/images/index/i-fxjg.png"/> <img src="@/assets/images/index/i-fxjg.png" />
<span>分析结果</span> <span>分析结果</span>
</div> </div>
<p class="hint" <p class="hint" v-if="resiCategory.list.length > 0">
v-if="resiCategory.list.length > 0">
根据数据分析结果，建议重点关注 根据数据分析结果，建议重点关注
<b>{{ resiCategory.list[0].name }}、{{ <b>{{ resiCategory.list[0].name }}、{{ resiCategory.list[1].name }}、{{ resiCategory.list[2].name }}</b>
resiCategory.list[1].name
}}、{{ resiCategory.list[2].name }}</b>
三类群体，开展相关的社区服务和活动。 三类群体，开展相关的社区服务和活动。
</p> </p>
</div> </div>
<el-tabs v-model="activeName" <el-tabs v-model="activeName" style="width: calc(100% - 240px - 40px); margin-left: auto">
style="width: calc(100% - 240px - 40px);margin-left: auto;"> <el-tab-pane label="居民分类统计" name="resi">
<el-tab-pane label="居民分类统计"
name="resi">
<div class="cnt-right"> <div class="cnt-right">
<div class="list"> <div class="list">
<div class="item" <div class="item" @click="handleClickCategory(item)" :key="item.code" v-for="(item, index) in resiCategory.list">
@click="handleClickCategory(item)" <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
:key="item.code"
v-for="(
item, index
) in resiCategory.list">
<div>
{{
("0" + (index + 1)).substr(-2)
}}.
</div>
<div class="item-name"> <div class="item-name">
{{ item.name }} {{ item.name }}
</div> </div>
<div class="item-div"></div> <div class="item-div"></div>
<div class="item-count"> <div class="item-count">{{ item.count }}人</div>
{{ item.count }}人
</div>
<div class="item-progress"> <div class="item-progress">
<b :style="{ <b
width: item.per + '%', :style="{
}"></b> width: item.per + '%',
</div> }"></b>
<div class="item-per">
{{ item.per }} %
</div> </div>
<div class="item-per">{{ item.per }} %</div>
</div> </div>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="智能预测" <el-tab-pane label="智能预测" name="zhineng">
name="zhineng">
<div class="cnt-right"> <div class="cnt-right">
<div class="list"> <div class="list">
<div class="item" <div class="item" :key="item.code" v-for="(item, index) in znycCategory.list">
:key="item.code" <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
v-for="(
item, index
) in znycCategory.list">
<div>
{{
("0" + (index + 1)).substr(-2)
}}.
</div>
<div class="item-name"> <div class="item-name">
{{ item.name }} {{ item.name }}
</div> </div>
<div class="item-div"></div> <div class="item-div"></div>
<div class="item-count"> <div class="item-count">{{ item.count }}人</div>
{{ item.count }}人
</div>
<div class="item-progress"> <div class="item-progress">
<b :style="{ <b
width: item.per + '%', :style="{
}"></b> width: item.per + '%',
</div> }"></b>
<div class="item-per">
{{ item.per }} %
</div> </div>
<div class="item-per">{{ item.per }} %</div>
</div> </div>
</div> </div>
</div> </div>
@ -164,23 +105,15 @@
<div class="g-row-right"> <div class="g-row-right">
<div class="m-box m-tx"> <div class="m-box m-tx">
<div class="header"> <div class="header">
<img src="@/assets/images/index/title-icon-zntx.png"/> <img src="@/assets/images/index/title-icon-zntx.png" />
<span>智能提醒</span> <span>智能提醒</span>
</div> </div>
<div class="more" <div class="more" @click="toNoticePage">更多></div>
@click="toNoticePage">更多> <div class="cnt" v-if="noticeData.length > 0">
</div> <div @click="handleClickNotice(item)" class="item" :key="'notice' + item.targetId + index" v-for="(item, index) in noticeData">
<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 class="item_left">
<i class="i-tag" <i class="i-tag" v-if="item.readFlag == 1">已读</i>
v-if="item.readFlag == 1">已读</i> <i class="i-tag" v-else>未读</i>
<i class="i-tag"
v-else>未读</i>
</div> </div>
<div class="item_right"> <div class="item_right">
<div class="item-date"> <div class="item-date">
@ -193,10 +126,9 @@
</div> </div>
</div> </div>
<div class="cnt" <div class="cnt" v-else>
v-else>
<div class="empty"> <div class="empty">
<img src="~@/assets/images/shuju/renfang/index/empty.png"/> <img src="~@/assets/images/shuju/renfang/index/empty.png" />
<span>暂无提醒～</span> <span>暂无提醒～</span>
</div> </div>
</div> </div>
@ -204,31 +136,30 @@
<div class="m-box m-tb"> <div class="m-box m-tb">
<div class="wrap"> <div class="wrap">
<div class="header"> <div class="header">
<img src="@/assets/images/index/title-icon-zntb.png"/> <img src="@/assets/images/index/title-icon-zntb.png" />
<span>不满意事项月度趋势分析</span> <span>不满意事项月度趋势分析</span>
</div> </div>
</div> </div>
<!-- <div class="more">更多></div> --> <!-- <div class="more">更多></div> -->
<div class="cnt"> <div class="cnt">
<div id="my_chart" <div id="my_chart" style="width: 100%; height: 230px; position: relative; top: -10px"></div>
style="width: 100%;height: 230px; position: relative;top:-10px"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<fastcall ref="fastcall"/> <fastcall ref="fastcall" />
</div> </div>
</template> </template>
<script> <script>
import {requestPost, requestGet} from "@/js/dai/request"; import { requestPost, requestGet } from "@/js/dai/request";
import resiCategoryMap from "@/views/business/resi-category-map.js"; import resiCategoryMap from "@/views/business/resi-category-map.js";
import {mapGetters} from "vuex"; import { mapGetters } from "vuex";
import nextTick from "dai-js/tools/nextTick"; import nextTick from "dai-js/tools/nextTick";
import fastcall from "@/views/modules/cpts/fastcall"; import fastcall from "@/views/modules/cpts/fastcall";
import * as echarts from 'echarts'; import * as echarts from "echarts";
export default { export default {
components: {fastcall}, components: { fastcall },
data() { data() {
return { return {
@ -272,10 +203,10 @@ export default {
noticeData: [], noticeData: [],
activeName: 'resi', activeName: "resi",
myChart: {} myChart: {},
} };
}, },
computed: { computed: {
maxTableHeight() { maxTableHeight() {
@ -303,40 +234,37 @@ export default {
mounted() { mounted() {
this.getApiData(); this.getApiData();
this.$nextTick(() => { this.$nextTick(() => {
this.initChart() this.initChart();
}) });
console.log( console.log("dynamicMenuRoutes----------------------------", this.$store.state.sidebarMenuList);
"dynamicMenuRoutes----------------------------",
this.$store.state.sidebarMenuList
);
}, },
methods: { methods: {
initChart() { initChart() {
this.$http.get('/governance/satisfactionOverview/notSatisfactionTrend').then(({data: {data}}) => { this.$http.get("/governance/satisfactionOverview/notSatisfactionTrend").then(({ data: { data } }) => {
this.myChart = echarts.init(document.getElementById('my_chart')); this.myChart = echarts.init(document.getElementById("my_chart"));
let series = data.series.map((item, index) => { let series = data.series.map((item, index) => {
return { return {
...item, ...item,
type: 'line', type: "line",
} };
}) });
let option = { let option = {
tooltip: { tooltip: {
trigger: 'axis' trigger: "axis",
}, },
legend: { legend: {
data: data.series.map(item => item.name), data: data.series.map((item) => item.name),
bottom: '10%', bottom: "10%",
icon: 'rect', icon: "rect",
itemWidth: 20, itemWidth: 20,
itemHeight: 5, itemHeight: 5,
itemGap: 20, itemGap: 20,
}, },
grid: { grid: {
left: '3%', left: "3%",
right: '4%', right: "4%",
bottom: '25%', bottom: "25%",
containLabel: true containLabel: true,
}, },
toolbox: { toolbox: {
// feature: { // feature: {
@ -344,19 +272,18 @@ export default {
// } // }
}, },
xAxis: { xAxis: {
type: 'category', type: "category",
boundaryGap: false, boundaryGap: false,
data: data.monthTimes.map(item => this.$moment(item).format('M') + '月') data: data.monthTimes.map((item) => this.$moment(item).format("M") + "月"),
}, },
yAxis: { yAxis: {
type: 'value' type: "value",
}, },
series series,
} };
this.myChart.setOption(option, true) this.myChart.setOption(option, true);
window.addEventListener('resize', this.handleWindowResize); window.addEventListener("resize", this.handleWindowResize);
}) });
}, },
handleWindowResize() { handleWindowResize() {
if (this.myChart) { if (this.myChart) {
@ -370,24 +297,23 @@ export default {
this.$router.push({ this.$router.push({
name: "base-resi", name: "base-resi",
params: { params: {
category: item.code category: item.code,
} },
}); });
}, },
async readClearOne(item) { async readClearOne(item) {
console.log("item", item) console.log("item", item);
const url = `/message/intelligentMessage/msg/clearOne/?msgId=${item.id}` const url = `/message/intelligentMessage/msg/clearOne/?msgId=${item.id}`;
const {data, code, msg} = await requestPost(url) const { data, code, msg } = await requestPost(url);
if (code == 0) { if (code == 0) {
this.getNoticeData() this.getNoticeData();
} else if (code >= 8000) { } else if (code >= 8000) {
this.$message.error(msg) this.$message.error(msg);
} }
}, },
handleClickNotice(item) { handleClickNotice(item) {
const {msgType, targetId} = item; const { msgType, targetId } = item;
this.readClearOne(item) this.readClearOne(item);
if (msgType == "community_house") { if (msgType == "community_house") {
this.$refs.fastcall.showHouseInfo(targetId); this.$refs.fastcall.showHouseInfo(targetId);
} else if (msgType == "resident_base_info") { } else if (msgType == "resident_base_info") {
@ -403,19 +329,19 @@ export default {
toSearchPage(type, searchKey) { toSearchPage(type, searchKey) {
this.$router.push({ this.$router.push({
path: "/main/shequ-chaxun" path: "/main/shequ-chaxun",
}); });
localStorage.setItem('homeSearchType', type) localStorage.setItem("homeSearchType", type);
localStorage.setItem('homeSearchKey', searchKey) localStorage.setItem("homeSearchKey", searchKey);
}, },
handleClickSearchBtn(str) { handleClickSearchBtn(str) {
const { const {
searchData: {type, searchKey}, searchData: { type, searchKey },
} = this; } = this;
if (str) { if (str) {
this.toSearchPage(type, searchKey); this.toSearchPage(type, searchKey);
return return;
} }
if (!searchKey) return this.$message.error("请输入搜索条件"); if (!searchKey) return this.$message.error("请输入搜索条件");
this.toSearchPage(type, searchKey); this.toSearchPage(type, searchKey);
@ -437,7 +363,7 @@ export default {
level: "", level: "",
}; };
const {data, code, msg} = await requestPost(url, params); const { data, code, msg } = await requestPost(url, params);
if (code === 0) { if (code === 0) {
this.orgData = data; this.orgData = data;
@ -454,7 +380,7 @@ export default {
// level: "", // level: "",
}; };
const {data, code, msg} = await requestGet(url, params); const { data, code, msg } = await requestGet(url, params);
if (code === 0) { if (code === 0) {
if (data) { if (data) {
@ -472,7 +398,7 @@ export default {
last: "10", last: "10",
}; };
const {data, code, msg} = await requestGet(url, params); const { data, code, msg } = await requestGet(url, params);
if (code === 0) { if (code === 0) {
if (data) { if (data) {
@ -492,7 +418,7 @@ export default {
}; };
this.resiCategory.loading = true; this.resiCategory.loading = true;
const {data, code, msg} = await requestGet(url, params); const { data, code, msg } = await requestGet(url, params);
this.resiCategory.loading = false; this.resiCategory.loading = false;
if (code === 0) { if (code === 0) {
@ -503,9 +429,7 @@ export default {
code: item.categoryName, code: item.categoryName,
name: resiCategoryMap[item.categoryName] || "", name: resiCategoryMap[item.categoryName] || "",
count: item.categoryCount, count: item.categoryCount,
per: parseInt( per: ((100 * item.categoryCount) / data.resiCount).toFixed(0),
(100 * item.categoryCount) / data.resiCount
),
const: "const", const: "const",
}; };
}); });
@ -524,7 +448,7 @@ export default {
}; };
this.znycCategory.loading = true; this.znycCategory.loading = true;
const {data, code, msg} = await requestGet(url, params); const { data, code, msg } = await requestGet(url, params);
this.znycCategory.loading = false; this.znycCategory.loading = false;
if (code === 0) { if (code === 0) {

Write Preview
Loading…
Cancel
Save